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:

1. List item

2. Bar charts

3. Expander

4. Pie charts

5. Product item

6. Stage

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
data	The items you want to show in the list.
item	There is a list of components available to use: bar-chart expander pie-chart product-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.

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 jig 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 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: - [email protected] (for a list in a default jig) - [email protected] (for a list jig) 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. When using the value property 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.

State Configuration	Key	Notes
[email protected].	amount checked	Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The [email protected] is the state of the current object in the array.
[email protected].	amount checked	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.

Considerations

• When using the value property 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.

List functionality

List with Search functionality

Searchable List

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:

See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

search (static)

children:
  - type: component.list
    instanceId: cleaning_serv_items
    options:
      # Data configured to use datasource (static)      
      data: =$filter(@ctx.datasources.repair-services-static, function($v){$contains($string($v.service),$string(@ctx.components.cleaning_serv_items.state.searchText != null ? @ctx.components.cleaning_serv_items.state.searchText:''))})[]
      isSearchable: true
      maximumItemsToRender: 50
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]

search (dynamic)

datasources (static)

datasources (dynamic)

List with Filter functionality

List with filter

This example helps to filter the items in a list to create meaningful sections or split the data for ease of use.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

filter-label (static)

children:
  - type: component.list
    instanceId: filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      # Data configured to use datasource (static)             
      data: =$filter(@ctx.datasources.cleaning-services-static, function($v){$contains($string($v.status), $string(@ctx.components.filter-list.state.filter != null ? @ctx.components.filter-list.state.filter:'')) })[]
      item:
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
          leftElement: 
            element: avatar
            text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
            uri: [email protected]

filter-label (dynamic)

datasources (static)

datasources (dynamic)

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.

Filtered list with default tab

default-w-filter-initialvalue

title: Filter List with default tab 
description: A dynamic list displaying filter options opening with a default tab showing tasks in progress
type: jig.default
icon: notes-paper-approve

header:
  type: component.jig-header
  options:
    children:
      options:
        source:
          uri: https://images.unsplash.com/photo-1590402494628-9b9acf0b90ae?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
      type: component.image
    height: medium

datasources:
  team-tasks:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/tasks
      query: |
        SELECT 
          id, 
          '$.taskAssignee',
          '$.taskName',
          '$.taskCost',
          '$.taskId', 
          '$.taskStatus',
          '$.team', 
          '$.Profile'       
        FROM [default/tasks]
        WHERE '$.taskStatus' LIKE @filter or @filter IS 'All'
      queryParameters:
          filter: [email protected]
    
children:
  - type: component.list
    instanceId: task-progress
    options:
      filter:
        initialValue: "In Progress"
        data: 
        - title: All
          value: "All"
        - title: Not Started
          value: Not Started  
        - title: In Progress
          value: In Progress
        - title: Complete
          value: Complete            
      data: [email protected]         
      item:
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            color:
              - when: [email protected] = "In Progress"
                color: color7
              - when: [email protected] = "Not Started"
                color: color4
              - when: [email protected] = "Complete"
                color: color2
            title: [email protected]
          leftElement:
            element: avatar
            text: [email protected]
            uri: [email protected]  
      maximumItemsToRender: 50

List with Search and Filter functionality

List with search & filter

Combine the search and filter capabilities to enhance the list functionality.

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: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

search-filter (static)

children:
  - type: component.list
    instanceId: search-filter-list
    options:
      filter:
        data: 
        - title: All
          value: all
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      isSearchable: true
      # Data configured to use datasource (static)       
      data: =$filter($filter(@ctx.datasources.cleaning-services-static, function($v){$contains($string($v.service),$string(@ctx.components.search-filter-list.state.searchText != null ? @ctx.components.search-filter-list.state.searchText:'')) }), function($v){$contains($string($v.status), $string(@ctx.components.search-filter-list.state.filter != null ? @ctx.components.search-filter-list.state.filter:'')) })[]                                                                                                                                                                                                
      item:
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
          leftElement: 
            element: avatar
            text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
            uri: [email protected]

search-filter (dynamic)

datasources (static)

datasources (dynamic)

Horizontal list

Horizontal

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.

horizontal-list (static)

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: [email protected]
  - type: component.list
    options:
      isHorizontal: true
      isHorizontalScrollIndicatorHidden: false
      # Data configured to use datasource (static) 
      data: [email protected]
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected] & ' mins'
          divider: solid
          horizontalItemSize: large
          leftElement: 
            element: image
            text: ''
            uri: [email protected]

horizontal-list (dynamic)

datasources (static)

datasources (dynamic)

See also

• State