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 jig 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:
Configuration options
Some properties are common to all components, see Common component properties for the properties and their configuration options.
data
The items you want to show in the list.
item
stage
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.
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 jig file:
To display as a red dot using the
emptyvalue.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 jig 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: -=@ctx.components.my-list.state.filter(for a list in a default jig) -=@ctx.jig.state.filter(for a list jig) Fortrue/falsevalues that are saved as boolean ensure the filter has a boolean value. Fortrue/falsevalues that are saved as string ensure the filter has a string value. When using thevalueproperty for filtering, it's recommended to use simple values such as strings or numbers (e.g., 'today', '7d', '14d'). Avoid using objects, as the filter logic is designed for strict equality checks. Instead, derive complex data like date ranges elsewhere based on the selected value. See When using a filter best practice.
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.
numberOfColumns
Sets the number of columns used to display items in a multi-column layout. This property applies only to vertical lists and is ignored when isHorizontal is true.
The numberOfColumns property is only supported when item.type is component.product-item or component.menu-item; it is not allowed for any other item types.
=@ctx.current.state.
amount checked
Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The =@ctx.current.state is the state of the current object in the array.
=@ctx.component.state.
amount checked
State is the variable of the component.
=@ctx.solution.state.
activeItemId now
Global state variable that can be used throughout the solution.
Considerations
When using the
valueproperty for filtering, it's recommended to use simple values such as strings or numbers (e.g., 'today', '7d', '14d'). Avoid using objects, as the filter logic is designed for strict equality checks. Instead, derive complex data like date ranges elsewhere based on the selected value. See When using a filter best practice.The recommended maximum number of columns is 3 on mobile devices and 5 on tablets in landscape for optimal readability and spacing.
When using an image in the
leftElementtogether withnumberOfColumns, the image may expand to fill the entire column, causing thetitleorsubtitleto be hidden.For phones, use an avatar with the image to ensure proper rendering.
For tablets, using the image property is supported and renders correctly.
List functionality
List with Search functionality
This example displays the search functionality of a basic list jig 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 jig.
Datasource:
List with Filter functionality
Filtered list with default tab set
In this example, there are four tabs to filter on. By default we want the jig 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.
List with Search and Filter functionality
Horizontal list
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 jig. 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 jig will be displayed.
See also
Last updated
Was this helpful?