.. index:: list ***** List ***** List element ============ A *list* element represents a list of items on the UI. Syntax of the *list* element ---------------------------- .. list {} where: - The is the name of the list. - The defines the elements and the look of the *list* element. .. index:: list events Events of the *list* -------------------- The list UI element supports following events: - **on selection changed**: this event is fired when the user selects a new element in the list. .. code-block:: scolvoscript :caption: Example on selection changed event of the Example list :linenos: function onExampleListSelectionChanged(originId) { debug("Selection changed: " + $IN.toString()); var selectedRecord = $IN.data; // business logic to be executed according to the application logic } .. .. index:: list dictionary keys Dictionary keys of the *list* ------------------------------ The label and icon of the actions of the *list* items are defined in the dictionary, the corresponding key has the form of 'page____label' and 'page____icon'. For possible icon values check the :ref:`Icons` API documentation page. .. code-block:: properties :caption: Dictionary key definition for ExampleList list in the mobile_dictionary_en.properties file :linenos: page_ExamplePage_ExampleList_ExampleAction_label=Example page_ExamplePage_ExampleList_ExampleAction_icon=\ue91f .. Syntax of the *list* descriptor -------------------------------- The list descriptor can contain one or more attribute descriptors. .. ([,|;])+ .. where: - Multiple can be defined, the definitions are optionally separated by ',' or ';'. - The block defines page level actions. - The block contains column definitions used by the item template. Syntax of the *list* attribute descriptor ----------------------------------------- .. : .. where: - List of valid attribute names and values are defined by client device types below. .. index:: list attributes Valid *list* attribute names and values ---------------------------------------- The following table describes the valid attribute names and values. .. list-table:: Valid list attribute keys and values :widths: 10 5 10 50 :header-rows: 1 * - Attribute name - Description - Valid values - Example * - template - Defines the template to be used - TBD - template: listVerticalNormal, * - itemTemplate - Defines the itemTemplate to be used - listItemMultiLine, listItemCard, listItemCalendar and grid (for legacy support only), - itemTemplate: listItemCard; * - filterVisible - Defines if the list filter is visible - Boolean value: true or false, default value is false - scolvoMenuVisible: true; * - span - Defines the span of the list - Number - span: 0; .. index:: list actions Syntax of the *list* actions ---------------------------- .. actions: [,|;] .. where: - The actions is defined by 'actions' keyword and the list of actions. This definition can be optionally separated from other page description elements by ',' or ';'. Syntax of the *list* action-list -------------------------------- .. [+] .. where: - The action list is defined as collection of strings (in []), where the action names are double-quoted strings. E.g.: ["FirstPageAction", "SecondPageAction"]. .. index:: list columns Syntax of the *list* columns ---------------------------- .. columns: [,|;] .. where: - The columns are defined by 'columns' keyword and the list of columns. This definition can be optionally separated from other page description elements by ',' or ';'. Syntax of the *list* column-list -------------------------------- .. [ => +] .. .. _list_column_key_mapping: where the possible column-keys are depending on the itemTemplate with following mapping: .. list-table:: Valid colum keys and itemTemplates :widths: 10 10 50 :header-rows: 1 * - Item template - Column keys - Example mapping * - listItemCard - title and text - title => title, text => content * - listItemMultiLine - mainText and subText - mainText => title, subText => content Example *list* definition ------------------------- There are different list examples defined in Scolvo Script lessons: in :ref:`List page with card template` and in :ref:`List page with simple template` .