List
Use the List widget to display a simple list, for example a list of Expressions, or to display more complex items by adding a List Item widget. The List widget requires a source to populate the items.
Virtualization
The List widget uses virtualization to render only those elements that are visible in the screen. You can set the value for virtualized pixels with virtualization-threshold-before and virtualization-threshold-after in the Attributes of List. Adjust the threshold values to tweak the scroll behavior.
You can also deactivate the virtualization with disable-virtualization=True.
Scroll threshold
When List reaches the scroll threshold value, the app requests new records and then adds them to the list of items. The default value is 2000 pixels. Set the scroll threshold with infinite-scroll-threshold in the Attributes of List.
Properties
| Name | Description | Mandatory | Default value | Observations |
|---|---|---|---|---|
| Name | Identifies an element in the scope where it is defined, like a screen, action, or module. | Yes | ||
| Source | Specifies a list with records to populate the widget. | Yes | ||
| Animate Items | Set to Yes to Animate Items on append, insert or remove. | Yes | ||
| Mode | Set to Custom to define a custom HTML tag to be used by the widget in runtime. Default mode sets tag as div. | Yes | Default | |
| Tag | Wrapper HTML tag to be used by this widget in runtime. | Yes | div | Only available when Mode is set to Custom. |
| Style Classes | Specifies one or more style classes to apply to the widget. Separate multiple values with spaces. | "list list-group" | ||
| Attributes | ||||
| Property | Name of an attribute to add to the HTML translation for this element. | You can pick a property from the drop-down list or type a free text. The name of the property will not be validated by the platform. Duplicated properties are not allowed. Spaces, " or ' are also not allowed. |
||
| Value | Value of the attribute. | You can type the value directly or write expressions using the Expression Editor. If the Value is empty, the corresponding HTML tag is created as property="property". For example, the nowrap property does not require a value, therefore nowrap="nowrap" is added. |
||
Events
| Name | Description | Mandatory | Observations |
|---|---|---|---|
| On Scroll Ending | Screen action to be executed or a screen to navigate to when the user scrolling is nearing the end of the loaded list. | ||
| Transition | Transition effect applied when navigating to another screen. | By default defined at module level. | |
| Event | JavaScript or custom event to be handled. | ||
| Handler | JavaScript event handler. |
Runtime Properties
| Name | Description | Read Only | Type | Observations |
|---|---|---|---|---|
| Id | Identifies the widget instance at runtime (HTML 'id' attribute). You can use it in JavaScript and Extended Properties. | Yes | Text |