System StatusSamples on GitHub

list-item

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

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

Core structure

title

Add a title for the list-item. You can use an expression and datasource to set the title. Select Line Options (text), allowing configuration of individual parts of the central element in a list-item. You can set properties such as color, fontSize, bold, format, isSubtle (low opacity), and numberOfLines, rather than applying them globally via the root.

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) or select Line Options (text), allowing configuration of individual parts of the central element in a list-item. You can set properties such as color, fontSize, bold, format, isSubtle (low opacity), and numberOfLines, rather than applying them globally via the root. select .

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.

hasDynamicHeight

The hasDynamicHeight property for vertical lists. When used with the numberOfLines property, list item heights are calculated dynamically based on content. If not combined, items display as a single line. Note: Using hasDynamicHeight with many items may cause performance issues.

isContained

Used to style the list item, true wraps the list item in a card, while false displays the item with no styling. This property can be used with vertical and horizontal lists.

leftElement

Set an element to the left of the list. The following elements are available:

  • avatar - configure the color, size, text, uri, and onPress event.

  • checkbox

  • icon - the icon size, color,shape, type, isSubtle (low opacity), and onPress event is configurable.

  • image - the image size, shape, resizeMode, and onPress event is configurable.

  • progress

numberOfLines

Specify the maximum number of lines for the description and subtitle properties at a global root level. Property values are:

  • dynamic- displays all lines of text.

  • Numerical value (e.g., 2) - Limits the description and subtitle to the specified number of lines.

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.

rating

Displays a rating as either a numerical value or a percentage. This property is highly flexible, with options to configure the ratingIcon, color, and accompanying descriptive text. By default, the rating property has only one icon showing a rating-star in the primary color. value- Rating with numerical value. The value of the rating, which can be a simple number. The number of icons is calculated based on this value unless overridden in the icon configuration. Configuring the current and maximum values, shows the value as a fraction, for example 7/10. percentage - Rating with a percentage. The percentage value for the rating, where the value ranges between 0 and 1, for example 0.75 is 75%. ratingIcon - By default the rating-star icon in the primary color is displayed. icon - Add an icon to represent the rating. A list of icons is available. See for more information. color- Sets the color of the icon, choose a color from the provided color palette. Default color is primary if the property is not specified in the YAML. See the list of available colors in . current and maximum values - Where maximum is the number of icons to display and current the number of icons to color. text - Add a descriptive text that displays next to the rating. Ratings can set up in the following ways: 1) Example of value for a product rating. 2) Example of a user rating shown in a percentage. 3)Example of value rating showing 2.5/5 as a rating with single star icon.

rightElement

Set an element to the right of the list. The following elements are available:

  • amountControl

  • badge - can be a solid colored badge or a badge with a number in it. Badges always use the primary color.

  • button

  • checkbox

  • icon - the icon size, color,shape, type, isSubtle (low opacity), and onPress event is configurable.

  • switch

  • value - When using text, the option to change its color is available.

  • text - define up to three lines of text with styling (color, bold, font size) applied to each line of text.

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) or select Line Options (text), allowing configuration of individual parts of the central element in a list-item. You can set properties such as color, fontSize, bold, format, isSubtle (low opacity), and numberOfLines, rather than applying them globally via the root.

tags

A set of descriptive keywords appear at the bottom of each list item, helping to categorize and provide context. Unlike labels, multiple tags can be shown. Tags support up to two lines; if the tags exceed this space, a +1 indicator is added to represent the number of hidden tags. For example, if two tags are hidden, +2 will display at the end of the list.

  • text - The text content displayed within the tag.

  • color - Sets the color of the tags, choose a color from the provided color palette. The default is primary. See the list of available colors in.

Tags can be set up in three ways:

  1. Using a dynamic expression from a datasource: tags: [email protected][product = @ctx.current.item.id].{"text":tags, "color":color}

  2. Using a dynamic expression from a list item: tags: [email protected].{"text":$, "color":"primary"}

  3. Using static, predefined tags tags: - text: [email protected] > 0.75 ? 'Great'

rating:
   value: 4.5
   text: based on 1,200 reviews

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.

Considerations

  • You can use a list-item outside of the list component. This allows configuring a single list item with all list-item features, such as left and right elements and swipe actions, without requiring a full list. These items typically use static values rather than a datasource. See the List-item outside a list code example below. The functionality is available in the following components:

Examples and code snippets

Simple list

Simple list
Simple list

This example displays the list in its most basic form, with a few additional properties or elements to support layout and data visibility.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Display each list-item in a container. 
    isContained: true
    # Define the title and the title styling.
    title:
      text: [email protected]
      fontSize: regular
      color: color1
      isBold: true
   # Define and style the subtitle. Ensure text wraps to the next line.
    subtitle:
      text: [email protected]
      fontSize: small
      isSubtle: true
      numberOfLines: 3

Simple list with dividers

Simple list Simple list with dividers
Simple list 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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Add a solid line divider between each list-item.
    divider: solid
    # Define the title and the title styling.
    title:
      text: [email protected]
      fontSize: regular
      color: color4
      isBold: true
    # Define and style the subtitle. Ensure text wraps to the next line. 
    subtitle:
      text: [email protected]
      fontSize: small
      isSubtle: true
      numberOfLines: 3

List with colored progress bars

List with colored progress
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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    progress: [email protected]/120
    
    color:
      - when: [email protected]
        color: primary
      - when: [email protected] = 'true'
        color: color14
      - when:  [email protected] = 'false'
        color: color7

List with charts

List with pie 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.

children:
  - type: component.list
    options:
      # Data configured to use datasource (static)     
      data: [email protected]
      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
List with bar charts
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.


children:
  - type: component.list
    options:
      # Data configured to use datasource (static)    
      data: [email protected]
      item: 
        type: component.bar-chart
        options:
          legend:
            isHidden: true
          chart:
            title:
              text: [email protected]
            height: 260
            isAnimated: false
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                currency: USD
                compactDisplay: short
                notation: compact
            tickAmount: 5
            isFirstTickHidden: false
            isFirstLabelHidden: false
          series:
            - data: [email protected]
              color: [email protected]

List with avatars

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 jig 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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: = 'Group id:'& ' ' & @ctx.current.item.groupId
    avatars: [email protected]

List with left avatar

List with avatars (left)
List with avatars (left)

This example showcases the list of items with a regular sized avatar to the left. The title text is styled (bold). The subtitle allows the text to wrap over three lines.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Add a bold title.
    title:
      text: [email protected]
      isBold: true
    # Add a subtitle that will wrap text over 3 lines.  
    subtitle:
      text: [email protected]
      numberOfLines: 3
    leftElement:
      element: avatar
      text: $substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: [email protected]
      # define the size of the avatar.
      size: regular

List with left 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. A color is added to the title text and the subtitle allows the text to wrap over two lines.

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.

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.

List with checkboxes
List with checkboxes
# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
     # Add the title and title color.
    title:
      text: [email protected]
      color: primary
    # Add a small subtitle that wraps over two lines.  
    subtitle:
      text: [email protected]
      fontSize: small
      numberOfLines: 2
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false

List with the left icons

List with 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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected] & 'minutes for task completion'
    # Add icons to the left of the list-item, define the color,
    # type and shape of the icon
    leftElement:
      element: icon
      icon: =(@ctx.current.item.materials) = true ? 'home' :'car-garage'
      color: color7
      type: contained
      shape: basic

List with the left image

List with image
List with image

This example displays a list with an image to left of the list-item for visual representation. The image shape and size is defined.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    # Add a subtitle that wraps over two lines. 
    subtitle:
      text: [email protected]
      numberOfLines: 2
    leftElement:
     # Add images to the left of the list-item, define the shape & size
      element: image
      text: [email protected]
      uri: [email protected]
      shape: landscape
      size: regular

List with left progress

List with 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

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: progress
      title: Time
      value:  [email protected]/120

Swipeable list (left)

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
   # Add a bold title. 
    title:
      text: [email protected]
      isBold: true
    # Add a subtitle that wraps over two lines.   
    subtitle:
      text: [email protected]
      numberOfLines: 2
    # Add and style the icon to the left of the item.   
    leftElement:
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'home' :'car-garage')
      shape: circle
      type: duotone
    rightElement:
      element: value
      text: ='$ ' & $number(@ctx.current.item.hourlyRate)
    swipeable:
      left:
        # Configure two actions (buttons) with color when swiping left.
        - onPress:
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary     
        - 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 amount control

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.

# Data configured to use datasource (static) 
data: [email protected]
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

List with the right badges

List-item with right badge"
List-item with right badge"

This example shows badges that are displayed based on certain input. Badges always use the primary color. You cannot change the color of the badge. The styling has been applied to the title and subtitle, and each list-item displayed in a container.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Configure each list-item to display in a container/card.  
    isContained: true
    # Add and style the title.
    title:
      text: [email protected]
      fontSize: regular
      isBold: true
    # Add a subtitle that wraps over two lines and define the font size.  
    subtitle:
      text: [email protected]
      numberOfLines: 2
      fontSize: small
    # Configure when the badge must display.  
    rightElement: 
      element: badge
      isHidden: =(@ctx.current.item.materials) = true ? true :false

List with right numbered badges

In this example a list shows the work priorities and how many tasks there are for each priority. The rightElement uses a badge with an expression. The count is performed in the datasource query rather than in the expression. The expression calls the taskCount from the datasource. Badges always use the primary color. You cannot change the color of the badge.

Examples: See the example in GitHub.

List-item with numbered badge
List-item with numbered badge
title: Team task priorities list
description: A list displaying priorities, with a numbered badge for each. 
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1569098644584-210bcd375b59?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjV8fHdvcmslMjB0YXNrc3xlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:
          color:
            - when: [email protected] = 'Urgent'
              color: negative
            - when: [email protected] = 'Medium'
              color: primary
            - when: [email protected] = 'Low'
              color: color6
            - when: [email protected] = 'Closed'
              color: positive
            - when: [email protected] = 'High'
              color: warning
          title: [email protected]
          divider: solid
          leftElement:
           # Add an icon with styling.
            element: icon
            icon: [email protected][name = @ctx.current.item.priority].icon
            type: duotone
          rightElement:
            # The badge will display with the number of priorities
            # per priority, the count is configured in the datasource query.     
            element: badge
            value: [email protected]

List with right Buttons

List-item with button
List-item with button

This example shows a list with actionable buttons, a bold title, and the subtitle wraps over two lines.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Define a title and apply custom styling such as font size, 
    # weight, and color.
    title:
      text: [email protected]
      isBold: true
      fontSize: regular
    # Configure the subtitle to allow text wrapping across two lines.   
    subtitle:
      text: [email protected]
      numberOfLines: 2
    # Define a button to display on the right of the list-item, 
    # when pressed you will go to the previous screen. 
    rightElement:
      element: button
      title: Press Me
      onPress:
        type: action.go-back

List with the right icons

List-item with right icons
List-item with right 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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Define a title and apply custom styling such as font size, 
    # weight, and color.
    title:
      text: [email protected]
      isBold: true
      fontSize: regular
   # Configure the subtitle to allow text wrapping across two lines.   
    subtitle:
      text: [email protected]
      isSubtle: true
      numberOfLines: 2
    rightElement:
      # Define an icon on the right and apply custom styling such as
      # shape, and color.
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'attachment' :'alert-triangle')
      type: contained
      shape: circle
      color: color14

List with the right switch

List-item with 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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Add a line to devide each item in the list.
    divider: solid
    # Define a title and apply custom styling such as font size.
    title:
      text: [email protected]
      fontSize: regular
    # Configure the subtitle to allow text wrapping across two lines.  
    subtitle:
      text: [email protected]
      numberOfLines: 2
    # Add a switch to the right of each item. Use initialvalue to set
    # some of the switches when the screen opens. 
    rightElement:
      element: switch
      initialValue: =(@ctx.current.item.materials = true ? true:false)

List with the right value

List-item with right values
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. Each list item isContained with bold title, subtitle wrapping over two lines.

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.

title: List with Right Value (Static Data)
description: A list to display values in list items
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-1534398079543-7ae6d016b86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cmVwYWlyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60
# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    # Configure each list-item to display in a container/card. 
    isContained: true
    # Define a title and apply custom styling.
    title: 
      text: [email protected]
      isBold: true
    # Configure the subtitle to allow text wrapping across two lines.   
    subtitle: 
      text: [email protected]
      numberOfLines: 2
    # Add a value to the right of each item, and add a color. 
    rightElement: 
      element: value
      text: ='$ ' & @ctx.current.item.hourlyRate
      color: color4

Swipeable list (right)

This example demonstrates a swipeable action configured to swipe right on each list item, using both primary and secondary actions. The title, subtitle, and left and right elements are styled with properties such as color, bold text, and number of lines.

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.

# Data configured to use datasource (static) 
data: [email protected]
item:
  type: component.list-item
  options:
    title:
      # Define a title and apply custom styling.
      text: [email protected]
      isBold: true
      fontSize: regular
    # Configure the subtitle to allow text wrapping across two lines.  
    subtitle:
      text: [email protected]
      isSubtle: true
      numberOfLines: 4
    # Add an icon to the left of each item, and add styling.   
    leftElement:
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'home' :'car-garage')
      type: contained
    # Add a value to the right of each item, and add a color.   
    rightElement:
      element: value
      text: ='$ ' & @ctx.current.item.hourlyRate
      color: color4
    # Add two action/buttons when you swipe right to go to another screen.
    swipeable:
      right:
        - onPress:
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
        - 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.

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 active item
List with active item
  children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: [email protected]
  - type: component.list
    options:
     # Data configured to use datasource (static)     
      data: [email protected]
      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

List with sections

List with sections
List with sections

This functionality allows you to divide your list into meaningful sections. In this example, there are two sections—one including materials and the other excluding them. Each list-item is contained, with the subtitle wrapping over two lines. A label on the right displays the duration of the job in hours and minutes.

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.

 children:
  - type: component.list
    options:
      sections:
      - title: Services incl Materials
        # Data configured to use datasource (static)   
        data: [email protected][materials=true]
      - title: Services excl Materials
        # Data configured to use datasource (static) 
        data: [email protected][materials=false]
      item:
        type: component.list-item
        options:
          # Configure each list-item to display in a container/card. 
          isContained: true
          title: [email protected]
          subtitle:
            # Define the number of lines the text can wrap over.
            text: [email protected]
            numberOfLines: 2
          label:
            title: [email protected] & ' mins'

List items contained in a card

This example use the isContained property set to true to style each item by wrapping it in a card. The code sample below is for a vertical list. You can also wrap list items in a card for a horizontal list.

Examples: See the full example in GitHub.

List-item contained in a card
List-item contained in a card
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
# Change the list to a horizontal list by uncommenting the isHorizontal line
# below. isHorizontal: true.
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]
item:
  type: component.list-item
  options:
    # Configure each list-item to display in a container/card.  
    isContained: true
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: image
      text: [email protected]
      uri: [email protected]

List-item with ratings as a value

This example uses the basic rating configuration to display a value with accompanying text. By default, the rating shows a single star in the primary color

Examples: See the full example in GitHub.

List-item with rating - value
List-item with rating - value
title: List of cleaning services with ratings
type: jig.default
description: A list displaying ratings with values
icon: notes-paper-approve

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1529220502050-f15e570c634e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1829&q=80
  
children:
  - type: component.list
    instanceId: rating-list
    options:
      data: [email protected]
      item:
        type: component.list-item
        options:
          isContained: true
          title: [email protected]
          subtitle: [email protected]
          label:  
            title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
          leftElement:
            element: image
            text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) &
              $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
            uri: [email protected]
          # Rating uses a value from the datasource with accompanying text.
          # By default, a single rating-star icon in the primary color is shown.               
          rating: 
            value: [email protected]
            text: [email protected]

List-item with ratings as a percentage

This example uses the simplest configuration of the rating property to display a percentage. By default the rating shows a star in the primary color.

Examples: See the full example in GitHub.

List-item with percentage rating
List-item with percentage rating
title: Manufacturing quality control
description: List with a percentage rating
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1700727448575-6f1680cd7d75?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cXVhbGl0eSUyMGNvbnRyb2x8ZW58MHx8MHx8fDA%3D

children:
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:
          isContained: true
          title: [email protected]
          subtitle: [email protected]
          # Rating uses a percentage defined in the datasource.
          # By default, a single star icon in the primary color is shown.           
          rating: 
            percentage: [email protected]
          leftElement: 
            element: icon
            icon: [email protected]
            isDuotone: true

List-item with ratings with a percentage, minimum, maximum and icon

This example sets up a product review jig that displays:

  • A rating as a percentage.

  • An icon and color customized to represent the rating percentage visually.

  • A styled list where each item is displayed within a card format, achieved by enabling the isContained property.

  • A verified label placed on the right side of the item.

  • A product image shown as an avatar on the left side.

Examples: See the full example in GitHub.

List-item with customized percentage rating
List-item with customized percentage rating
title: Product Review
description: List with percentage rating and icons
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2R1Y3QlMjBleHBlcmllbmNlfGVufDB8fDB8fHww

children:
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          description: [email protected]
          isContained: true
          label:
            title: [email protected]
          leftElement:
            element: avatar
            text: ""
            uri: [email protected]
          # Rating uses a percentage from the datasource, the rating icon and 
          # color is customized. By configuring the maximum property sets the 
          # number of icons required. By configuring the current property colors
          # the number of icons specified in the maximum property with the value
          # to create the rating.              
          rating:
            percentage: [email protected]
            ratingIcon:
              color: color7
              current: [email protected]*5
              icon: thumb-up-like
              maximum: 5

List-item with multiple tags

This example creates a list with multiple tags shown on each list-item

  • A styled list where each item is displayed within a card format, achieved by enabling the isContained property.

  • The tags show the assigned team, priority, and status.

  • A product image shown as an avatar on the left side.

Examples: See the full example in GitHub.

List-item with multiple tags
List-item with multiple tags
title: Team task list with multiple tags
description: List displaying multiple tags 
type: jig.default

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
  
children:
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:
          isContained: true
          title: [email protected]
          subtitle: [email protected]
          # Add multiple tags to the list-items.
          # Each tag can have its own color.
          # Tags are shown in the order they configured.           
          tags:
            - text: [email protected]
              color: primary
            - text: [email protected]
              color: warning
            - text: [email protected]
              color: color2
          leftElement: 
            element: avatar
            text: [email protected]
            uri: [email protected]

List-item with ratings and tags

List-item with rating, tags & badges
List-item with rating, tags & badges

This example show a list of cleaning services that displays:

  • A rating as a value.

  • An icon and color customized to represent the rating value visually.

  • Multiple tags showing the hourly rate and cleaning area category.

  • A styled list where each item is displayed within a card format, achieved by enabling the isContained property.

  • A numbered badge in the rightElement of the item shows the number of services available.

Examples: See the full example in GitHub.

title: Cleaning Services
description: List showing available Cleaning Services
type: jig.default

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

children:
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:  
          title: [email protected]
          subtitle: ='Duration of ' & @ctx.current.item.time & ' mins'
          horizontalItemSize: large
          # Wrap each list-item in a card.          
          isContained: true
          # Rating uses a value from the datasource, the rating icon and color
          # is customized. By configuring the maximum property sets the number 
          # of icons required. By configuring the current property colors the 
          # number of icons specified in the maximum property with the value to
          # create the rating.             
          rating: 
            ratingIcon:
              icon: thumb-up-like
              color: color7
            value: 
              current: [email protected]
              maximum: 5 
          # Add multiple tags to the list-items.
          # Each tag can have its own color.
          # Tags are shown in the order they configured.                
          tags:
            - text: =('$' & @ctx.current.item.hourlyrate)
              color: color14
            - text: [email protected]
              color: color14
          leftElement: 
            element: image
            text: ''
            uri: [email protected]
          rightElement: 
           # The badge will display with the number of service, the count is
           # configured in the datasource.           
            element: badge
            value: [email protected]

List-item outside a list

In this example, a single list-item is configured inside an expander component. The list-item uses a static value and is configured to use the left and right element as well as the swipeable event that opens an info-modal. Note, that the list-item is outside of a list component and uses a static value and does not rely on a datasource.

List-item outside a list
List-item outside a list
YAML
title: Single list ite
type: jig.default

children:
 # Configure the expander component that will contain the single list-item
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            align: left
        leftElement:
          title: Reservations
          element: text
      divider: solid
      children:
        # Single list-item configured outside of the list.
        # The values are static and do not rely on a datasource.
        # Add a left and right element for the list-item.
        - type: component.list-item
          instanceId: list-item
          options:
            # Note: The list-item is outside of a list component
            # and uses a static value and does not rely on a datasource.
            # This means you do not need to use [email protected].      
            title: Guests
            subtitle: Select the number of guests
            leftElement:
              element: checkbox
              value: "true"
            rightElement:
              element: amount-control
              initialValue: 5
            progress: 1
            swipeable:
              right:
                - label: Cost
                  icon: currency-dollar
                  color:  primary
                  onPress:
                    type: action.info-modal
                    options:
                      modal:
                        element: 
                          type: icon
                          icon: monetization-approve
                          color: warning
                        title: Cost per guest is $25
                        description: Bookings for groups of ten or more are charged at $20 per guest.
                        buttonText: rightBook

List-item with multiple lines in right element

List-item with multiple lines in right element
List-item with multiple lines in right element

This example demonstrates list-items configured to display data across multiple lines, with styling applied to the title, subtitle, and the left and right elements.

Example:

See the full example in GitHub

data: [email protected]
item:
  type: component.list-item
  options:
    # Configure each list-item to display in a container/card.   
    isContained: true
    # Define a title and apply custom styling.
    title:
      text: [email protected]
      color: color1
      fontSize: regular
      isBold: true
      numberOfLines: 1
    # Define the color of the subtitle's text.
    subtitle:
      text: = 'Group id:'& ' ' & @ctx.current.item.groupId
      color: color4
    # Define a description, apply custom styling and wrap the text. 
    description:
      text: [email protected]
      isSubtle: true
      fontSize: small
      numberOfLines: 3
    # Configure and style the avatar to the left of the item.
    leftElement:
      element: avatar
      text: [email protected]
      uri: [email protected]
      size: large
      color: color6
      onPress:
        type: action.go-to
        options:
          linkTo: custom-user-profile
    # Configure and style the text to the right of the item.
    # THe right element has text defined on three lines. 
    rightElement:
      element: text
      firstLine:
        text: 10 hours
        isBold: true
      secondLine:
        text: [email protected]
        isSubtle: true
        color: color1
      thirdLine:
        text: 2 days left
        fontSize: medium
        color: negative

See also

PreviouslistNextproduct-item

Last updated

Was this helpful?