Components
list
list-item

15min
The list-item component serves as the child component whenever any list-related item has been called, as discussed in the jig.list﻿ and list﻿ sections. The component determines how the list items are returned, allowing you to customize the data returned and add UI elements to the lists. 
﻿Configuration options﻿
﻿
Core structure
﻿
title
Add a title for the list-item. You can use an expression and datasource to set the title. The title must fit the line, as the text will not wrap to the next line.
Other options
﻿
color
The color of the list item changes based on conditions. The first evaluating to true will be used.
description
The subtitle or description should be displayed with the list-item title. You can format the text of these properties if you select the "Text With Format" option in the builder help (ctrl + space).
divider
Set the space between two items in the list.
none - No divider is shown between items. Set by default.
transparent - Sets a 1pt margin between two items.
solid - Displays a colored line between two items. When the list-item is contained in a card, this property will be ignored.
leftElement
Set an element to the left of the list. The following elements are available:
avatar
checkbox
icon
image
progress
progress
Add a colorful visualization (background color of your choice) of the list item's progress. The color displays from left to right, and the range of the allowed values is from  0 to 1. 
rightElement
Set an element to the right of the list. The following elements are available:
amountControl
badge
button
checkbox
icon
switch
value
subtitle
The subtitle or description should be displayed together with the title on the list-item. You can format the text of these properties if you select the Text With Format option in the IntelliSense (ctrl + space).
Actions
﻿
onPress
The action is available with the swipeable action and is triggered when pressing an item in the list. Use IntelliSense (ctrl+space) to see the list of available actions. 
swipeable
Use the swipeable property to add the onPress action. The action will appear and become pressable by swiping the list-item to the left or right.
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.
﻿Examples and code snippets ﻿
Simple list
Simple list
﻿
This example displays the list in its most basic form without configuring additional properties or elements. Scroll down for more examples of how you can implement lists.
Examples:
See the full example using static data local and global 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. 
simple-list (static)
simple-list (dynamic)
datasources (static)
datasources (dynamic)
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
﻿
Simple list with dividers
Simple list with dividers
﻿
This example shows only a slight variation from the previous example, by having a  divider : solid properly configured.
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. 
list-w-divider (static)
list-w-divider (dynamic)
datasources (static)
datasources (dynamic)
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
﻿
List with colored progress bars
List with colored progress
﻿
This example showcases two additional properties that have been configured, the progress and colors. You can use the data along with some expressions to manipulate data to create meaningful list displays.
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. 
progress-list (static)
progress-list (dynamic)
datasources (static)
datasources (dynamic)
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
﻿
List with charts
List with pie charts
﻿
This example shows pie charts displayed on a list - this is great for a visual representation of information. 
Pie chart 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. 
pie-chart-list (static)
pie-chart-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-chart-list-dynamic
item:
        type: component.pie-chart
        options:
          chart:
            title:
              text: [email protected]
              verticalAlign: center
            subtitle:
              text: [email protected]
              verticalAlign: center
            width: 100
            height: 100
          legend:
            isHidden: true
          series:
            - data: [email protected]
              layout: pie
              color: [email protected]
data: =@ctx.datasources.pie-chart-list-dynamic
item:
        type: component.pie-chart
        options:
          chart:
            title:
              text: =@ctx.current.item.title
              verticalAlign: center
            subtitle:
              text: =@ctx.current.item.subtitle
              verticalAlign: center
            width: 100
            height: 100
          legend:
            isHidden: true
          series:
            - data: =@ctx.current.item.data
              layout: pie
              color: =@ctx.current.item.color
﻿
List with bar charts
﻿
This example shows bar charts displayed on a list as a visual representation of information. 
Bar chart example:
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. 
bar-chart-list (static)
bar-chart-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-charts
# isHorizontal: true
item:
  type: component.bar-chart
  options:
    yAxis:
      max: 2000
      min: 200
    xAxis:
      categories: [email protected]-charts.x
    series:
      - data: [email protected]-charts.y
        color: [email protected]-charts.color
data: =@ctx.datasources.finance-charts
# isHorizontal: true
item:
  type: component.bar-chart
  options:
    yAxis:
      max: 2000
      min: 200
    xAxis:
      categories: =@ctx.datasources.finance-charts.x
    series:
      - data: =@ctx.datasources.finance-charts.y
        color: =@ctx.datasources.finance-charts.color
﻿
List with avatars
List with avatars
﻿
This example shows a list of avatars grouped by titles and returns all avatars in the array. In this example, the static datasource has been configured to use the uri and text properties that are   required for avatars in a list. This makes it easy to configure in the 
﻿ by simply using the expression:
avatars: [email protected]
The following expression can be used if your datasource uses different names for  uri and text, for example:
avatars:
      [email protected].{"text":name,"uri":image}[]
Examples:
See the full example using static data in GitHub. 
list-avatars (static)
datasources (static)
data: [email protected]-groups
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: = 'Group id:'& ' ' & @ctx.current.item.groupId
    avatars: [email protected]
data: =@ctx.datasources.employee-groups
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.title
    subtitle: = 'Group id:'& ' ' & @ctx.current.item.groupId
    avatars: =@ctx.current.item.people
﻿
List with left avatar
List with avatars (left)
﻿
This example showcases the list of items with an avatar to the left. 
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.
left-avatar-list (static)
left-avatar-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: avatar
      text: $substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: [email protected]
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: avatar
      text: $substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: =@ctx.current.item.illustration
﻿
﻿
List with left checkboxes
List with checkboxes
﻿
This example showcases a list with checkboxes to the left. This can be configured with preset checked values or can just be empty for the user to select themselves.
Examples:
See the full example using static data in GitHub. ﻿﻿﻿﻿﻿
See the e full example using dynamic data in GitHub. ﻿﻿﻿﻿﻿
Specifying initialValue will determine the value when the list is loaded, however, specifying the value presets the value itself. The latter is handy when you want to display details that don't require much intervention from the user or if you wish to make it easier and faster so they only have to review the current selections for instance.
Datasources:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub. 
left-checkbox-list (static)
left-checkbox-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false
﻿
﻿
List with the left icons
List with icons
﻿
This example displays icons to the left of the list.
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. 
left-icon-list (static)
left-icon-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-dynamic
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected] & 'minutes for task completion'
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor) = "TRUE" ? 'home' :'car-garage'
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.time & 'minutes for task completion'
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor) = "TRUE" ? 'home' :'car-garage'
﻿
List with the left image
List with image
﻿
This example displays a list with an image to left of the list-item for visual representation.
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. 
left-image-list (static)
left-image-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-dynamic
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: image
      text: [email protected]
      uri: [email protected]
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: image
      text: =@ctx.current.item.service
      uri: =@ctx.current.item.image
﻿
List with left progress
List with progress
﻿
This example displays a list with visual progress elements to the left of the list items.
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. 
left-progress-list-dynamic (static)
left-progress-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: progress
      title: Time
      value:  [email protected]/120
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: progress
      title: Time
      value:  =@ctx.current.item.time/120
﻿
Swipeable list (left)
swipeable list
﻿
Swipeable list
﻿
This example shows using the swipeable action to access the onPress action as well as setting up a primary and secondary action. 
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. 
swipeable-list (static)
swipeable-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: ='$ ' & $number(@ctx.current.item.hourlyRate)
    swipeable:
      left:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: ='$ ' & $number(@ctx.current.item.hourlyRate)
    swipeable:
      left:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning
﻿
List with the right amount control
List with amountControl
﻿
List with amountControl
﻿
Examples:
See the full example of amount control options in GitHub. 
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. 
amount-control-list (static)
amount-control (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    style:
      isDisabled: [email protected] = 5
    rightElement:
      element: amount-control
      value: 1
      step: 1
      minimum: 2
      maximum: 5
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    style:
      isDisabled: =@ctx.current.state.amount = 5
    rightElement:
      element: amount-control
      value: 1
      step: 1
      minimum: 2
      maximum: 5
﻿
List with the right badges
List-item with right badge
﻿
This example shows badges that are displayed based on a certain input. 
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. 
list-badges (static)
list-badges (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    rightElement: 
      element: badge
      isHidden: =(@ctx.current.item.materials) = true ? true :false
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: badge
      isHidden: =(@ctx.current.item.materials) = true ? true :false
﻿
List with right Buttons
List-item with button
﻿
This example shows a list with actionable buttons.
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. 
list-with-right-button (static)
list-with-right-button (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    rightElement: 
      element: button
      title: Press Me
      onPress: 
        type: action.go-back
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: button
      title: Press Me
      onPress: 
        type: action.go-back
﻿
List with the right icons
List-item with icons
﻿
This example shows icons to the right of the list-items.
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.
right-icon-list (static)
right-icon-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    rightElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'attachment' :'alert-triangle')
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'attachment' :'alert-triangle')
﻿
List with the right switch
List-item with switch
﻿
This example displays a list with switches/toggle functionality - based on a certain input. 
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. 
switch-list (static)
switch-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    rightElement: 
      element: switch
      initialValue: =(@ctx.current.item.materials = true ? true:false)
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: switch
      initialValue: =(@ctx.current.item.materials = true ? true:false)
﻿
List with the right value
List-item with right values
﻿
This example shows the right values on a list populated dynamically based on input, and additional configuration using expressions were used to concatenate values.
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. 
Swipeable list (right)
Swipeable list-item
﻿
Swipeable list-item
﻿
This example shows the swipeable action configured to swipe right for each list-item. We show how to set up a primary and secondary action. 
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.
swipable-right-list (static)
swipable-right-list (dynamic)
datasources (static)
datasources (dynamic)
data: [email protected]-services-dynamic
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
    swipeable:
      right:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
    swipeable:
      right:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning
﻿
List with active item
This allows you to see when you are interacting with a specific list-item. Whilst interacting, the list item changes slightly making it clear which item you are interacting with.
List with active item
﻿
List with active item
﻿
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. 
active-item-list (static)
active-item-list (dynamic)
datasources (static)
datasources (dynamic)
  children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: [email protected]
  - type: component.list
    options:
      data: [email protected]-services-static
      hasActiveItem: true
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected] & ' mins'
          leftElement: 
            element: image
            text: ''
            uri: [email protected]
          rightElement: 
            element: value
            text: ='$ ' & @ctx.current.item.hourlyRate & ' p/hr'
          onPress: 
            type: action.set-state
            options:
              state: [email protected]
              value: true
  children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      data: =@ctx.datasources.repair-services-static
      hasActiveItem: true
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.time & ' mins'
          leftElement: 
            element: image
            text: ''
            uri: =@ctx.current.item.image
          rightElement: 
            element: value
            text: ='$ ' & @ctx.current.item.hourlyRate & ' p/hr'
          onPress: 
            type: action.set-state
            options:
              state: =@ctx.solution.state.hasActiveItem
              value: true
﻿
List with sections
List with sections
﻿
This functionality allows you to split your lists into meaningful sections.
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. 
section-list (static)
section-list (dynamic)
datasources (static)
datasources (dynamic)
 children:
  - type: component.list
    options:
      sections:
      - title: Services incl Materials
        data: [email protected]-services-static[materials=true]
      - title: Services excl Materials
        data: [email protected]-services-static[materials=false]
        
      item:
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            title: [email protected] & ' mins'
 children:
  - type: component.list
    options:
      sections:
      - title: Services incl Materials
        data: =@ctx.datasources.repair-services-static[materials=true]
      - title: Services excl Materials
        data: =@ctx.datasources.repair-services-static[materials=false]
        
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.description
          label:
            title: =@ctx.current.item.time & ' mins'
﻿
List items contained in a card (styling)
This example use the isContained property set to true to style each item by wrapping it in a card. 
Examples:
See the full example in GitHub. 

ist-item in a card
﻿
list-item-contained.jigx
title: List with items wrapped in a card
description: A list displaying images on list items styled in a card
type: jig.list
icon: task-list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80

data: [email protected]-services-static
item:
  type: component.list-item
  options:
    isContained: true
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: image
      text: [email protected]
      uri: [email protected]
title: List with items wrapped in a card
description: A list displaying images on list items styled in a card
type: jig.list
icon: task-list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80

data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    isContained: true
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: image
      text: =@ctx.current.item.service
      uri: =@ctx.current.item.image
﻿
See also
﻿list﻿ 
﻿jig.list﻿﻿
﻿State﻿﻿
﻿
Updated 05 Aug 2024
Did this page help you?
list
product-item
Core structure
title	Add a title for the list-item. You can use an expression and datasource to set the title. The title must fit the line, as the text will not wrap to the next line.
Other options
color	The color of the list item changes based on conditions. The first evaluating to true will be used.
description	The subtitle or description should be displayed with the list-item title. You can format the text of these properties if you select the "Text With Format" option in the builder help (ctrl + space).
divider	Set the space between two items in the list. none - No divider is shown between items. Set by default. transparent - Sets a 1pt margin between two items. solid - Displays a colored line between two items. When the list-item is contained in a card, this property will be ignored.
leftElement	Set an element to the left of the list. The following elements are available: avatar checkbox icon image progress
progress	Add a colorful visualization (background color of your choice) of the list item's progress. The color displays from left to right, and the range of the allowed values is from 0 to 1.
rightElement	Set an element to the right of the list. The following elements are available: amountControl badge button checkbox icon switch value
subtitle	The subtitle or description should be displayed together with the title on the list-item. You can format the text of these properties if you select the Text With Format option in the IntelliSense (ctrl + space).
Actions
onPress	The action is available with the swipeable action and is triggered when pressing an item in the list. Use IntelliSense (ctrl+space) to see the list of available actions.
swipeable	Use the swipeable property to add the onPress action. The action will appear and become pressable by swiping the list-item to the left or right.
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.
list-item

﻿Configuration options﻿

Core structure

Other options

Actions

State Configuration

Simple list

Simple list with dividers

List with colored progress bars

List with charts

List with avatars

List with left avatar

List with left checkboxes

List with the left icons

List with the left image

List with left progress

Swipeable list (left)

List with the right amount control

List with the right badges

List with right Buttons

List with the right icons

List with the right switch

List with the right value

Swipeable list (right)

List with active item

List with sections

List items contained in a card (styling)

See also

Configuration options
