list
This component is very similar to the jig.list the only exception is that this list component can be used in a jig.default with other items, whereas the jig.list is a dedicated to a list only. With this component, you can typically combine a list with other components. Another difference is that jig.list automatically display lists on the widget, which is not true with lists on a jig.default.
As far as the functionality goes, the same list options are available as with the List Jig where the list itself can either be a list of values with list items or it can be one of the following:
Core Structure | |
|---|---|
data | The items you want to show in the list. |
item | There is a list of components available to use: If you use the list component in a jig.composite, the maximum number of displayed items is 8. If you set the maximumItemsToRender to a higher number, the rest of the list will display after clicking on the 'Show more' option. |
maximumItemsToRender | The number of items you would like to display in your list. |
Other options | |
|---|---|
badge | Add a badge to the list that displays on the widget to highlight critical information and capture the user's attention, ensuring key updates or notifications are easily noticeable within the app. The badge can be configured at the root level of the file: - To display as a red dot using the empty value. - A red dot with a number using an expression to perform a count. For example, counting the number of tasks in the list. |
filter | Allows you to create lists filtered by a key/value. Set the filter to open on a specific tab in a list. initialValue - Predefine the default selected tab for a filter on the list, when opening the the default filter tab is displayed. data - define the filter tabs using: - title - give the filter a name. The text that will be displayed in the tab, for example, in-stock. - value - The value that the list filter returns. Use the following expressions to return this value:
For true/false values that are saved as boolean ensure the filter has a boolean value. For true/false values that are saved as string ensure the filter has a string value. |
isHorizontal | The boolean value that transforms the list into a horizontal one. |
isSearchable | The boolean value which allows you to add a search bar on the top of your list. |
onShowMorePress | Action to be performed when you press on the show more button. This is type: action.go-to with a linkTo: option. |
State Configuration | Key | Notes |
|---|---|---|
amount checked |
| |
amount checked |
| |
activeItemId now |
|
This example displays the search functionality of a basic list that allows you to search a large list instantly based on certain keywords entered.
Examples:
See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
By design, search functionality is automatically disabled when using it on a composite .
Datasource:
In this example, there are four tabs to filter on. By default we want the to open on the third tab to show the in progress work by default. This is achieved by setting the initialValue property to the filter property.
Examples: See the example in GitHub.
This is an example of a horizontal list with UI elements such as an image and values configured. Horizontal lists are especially helpful when used on a composite . Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
Horizontal lists cannot be used with the section component as an empty white will be displayed.
