Listview Action

From CYW-Wiki

Jump to: navigation, search

Description and Usage

In computer terminology a Listview is a control which displays a list of items and makes them keyboard navigatable. The purpose of the Listview Action is to add keyboard navigation to a list of HTML elements.

In HTML Listviews can be achieved in different ways. Here are an overview of the most common ones:

Container Element Item Element
TABLE TR
UL/OL LI
DIV DIV

To define a Listview Action you have to select the container element of the listview items.

The Listview Action provides the following behavior:

  • Navigating up/down the listview items with Arrow-Up/Down or J/K keys.
  • Scrolling up/down with the Page up/down keys.
  • Prssing Enter opens the first link of the seleted item in the same or new tab (could be configured). Pressing Cltr+Enter opens the first link in the opposite way.
  • Pressing Space toggles the first checkbox within the seleced item.

Edit Dialog

The following configurations are available:

Key Combination
Just press the key combination you wish. The following keys must be selected via the dropmarker next to the edit field: "Enter/Return", "Tab", "Shift+Tab", "Escape", "Backspace". You can clear the edit field with the backspace key.
Short String
In this field you can enter a string or character combination which will trigger the action. E.g. you can enter "LO" to trigger the logout button. Of course short strings will not work while the focus is within an editable field.
List items tag name
HTML tag name of the list items. This value will be automatically be set to the tag name of the first child element of the selected container element.
Highlight background-color
The color with which the currently selected element will be highlighted.
Pressing Enter opens the first link in
Defines the behavior of pressing Enter/Ctrl+Enter. By default Enter opens the first link contained wihtin the selected item elment in the same tab. Cltr+Enter opens the first link in a new tab.
Number of header rows
Often listview also contain header rows which should not be keyboard navigatable. You can achive this by specifying the appropriate number of rows in this field.
Omit every Xth item
Sometimes listviews also contain items with the same item tag name only for visual purposes. You can specify that every 2nd, 3rd etc. should be ommited (This will probably change in a future version in a way that you specify which items should be included).
Automatically focus after page load
If ticked on the first item of the listview will automatically be focused after page load. Attention: As the listview action is by default executed after every page change, this listview is also focused after every page change if this checkbox is ticked on (this will be configurable in a future version).

Please refer to the pages Target Element Definition and Common Action Attributes for information how to edit the rest of the dialog.

Personal tools