Components

list

10min

This component is very similar to the List J; seeith the only exception that this is a list component that you use on 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. 
List item
Product item
Stage
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:
﻿List item﻿
﻿Bar charts﻿
﻿Expander﻿
﻿Pie charts﻿
﻿Product item﻿
﻿Stage﻿
This functionality is similar to the List Jig, with two exceptions. A List Jig is dedicated to a list display only, whereas a list on a Default Jig can be combined with other components. Another difference is that List Jigs automatically display lists on the widget, which is not the case with lists on a Default Jig.
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
Core Structure
Details
data
The items you want to show in the list
maximumItemsToRender
 The number of items you would like to display in your list
item
There is a list of components available to use:
list-item
bar-chart
expander
pie-chart
product-item
stage
If you are using the list component in jig.composite maximum 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.
Other options
Details
isSearchable
The boolean value which allows you to add a search bar on the top of your list
isHorizontal
The boolean value that transforms the list into a horizontal one
filter
Allows you to create lists filtered by a key/value
onShowMorePress
Action to be performed when you press on the show more button. This is type: action.go-to with a linkTo: option.
﻿List functionality ﻿
List with Search functionality
﻿
This example displays the search functionality of a basic List Jig that allows the user to filter a list with tons of data instantaneously based on certain keywords they have 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)
search (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: cleaning_serv_items
    options:
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.description
children:
  - type: component.list
    instanceId: cleaning_serv_items
    options:
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.description
﻿
List with Filter functionality
﻿
This example helps to categorically filter the data to create meaningful sections or split the data for ease of use for the users. 
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)
filter-label (dynamic) 
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      # data: =$filter(@ctx.datasources.cleaning-services-static, function($v, $a, $i) { @ctx.components.filter-list.state.filter = 'all' or $v.status = @ctx.components.filter-list.state.filter })[]        
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          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: =@ctx.current.item.image
children:
  - type: component.list
    instanceId: filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      # data: =$filter(@ctx.datasources.cleaning-services-static, function($v, $a, $i) { @ctx.components.filter-list.state.filter = 'all' or $v.status = @ctx.components.filter-list.state.filter })[]        
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          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: =@ctx.current.item.image
﻿
List with Search and Filter functionality
﻿
To further enhance the search and filter capabilities for the user, there is also an option to combine the search and filter functionality as can be seen in this example. 
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)
search-filter (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: search-filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      isSearchable: true
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          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: =@ctx.current.item.image
children:
  - type: component.list
    instanceId: search-filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      isSearchable: true
      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: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          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: =@ctx.current.item.image
﻿
Horizontal list
﻿
This provides an example of a horizontal list with some UI elements like an image and values configured. Horizontal lists are especially helpful when used on a Composite Jig with other Jigs or like in this case where it can be combined with other components on a Default 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-list (static)
horizontal-list (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      isHorizontal: true
      isHorizontalScrollIndicatorHidden: false
      data: =@ctx.datasources.repair-services-static
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.time & ' mins'
          divider: solid
          horizontalItemSize: large
          leftElement: 
            element: image
            text: ''
            uri: =@ctx.current.item.image
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      isHorizontal: true
      isHorizontalScrollIndicatorHidden: false
      data: =@ctx.datasources.repair-services-static
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.time & ' mins'
          divider: solid
          horizontalItemSize: large
          leftElement: 
            element: image
            text: ''
            uri: =@ctx.current.item.image
﻿
See also
﻿Developer reference 
﻿Related examples (Github)﻿
﻿

Updated 19 Sep 2023

Did this page help you?

interactive-image-item

list-item

Docs powered by

Archbee

TABLE OF CONTENTS

Configuration options

Core Structure

Other options

List functionality

List with Search functionality

List with Filter functionality

List with Search and Filter functionality

Horizontal list

Core Structure	Details
data	The items you want to show in the list
maximumItemsToRender	The number of items you would like to display in your list
item	There is a list of components available to use: list-item bar-chart expander pie-chart product-item stage If you are using the list component in jig.composite maximum 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.

Other options	Details
isSearchable	The boolean value which allows you to add a search bar on the top of your list
isHorizontal	The boolean value that transforms the list into a horizontal one
filter	Allows you to create lists filtered by a key/value
onShowMorePress	Action to be performed when you press on the show more button. This is type: action.go-to with a linkTo: option.

list

﻿Configuration options﻿

Core Structure

Other options

﻿List functionality ﻿

List with Search functionality

List with Filter functionality

List with Search and Filter functionality

Horizontal list

See also

Configuration options

List functionality