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. 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.
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
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 - can be a solid colored badge or a badge with a number in it. Badges always use the primary color.
button
checkbox
icon
switch
value
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 Jigx icons 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 Jigx color palette.
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:
Example of value for a product rating:
rating:
value: 4.5
text: based on 1,200 reviews
Example of a user rating shown in a percentage:
rating:
percentage: 0.75
text: expectations exceeded
Example of value rating showing 2.5/5 as a rating with single star icon:
rating:
value:
current: 2.5
maximum: 5
ratingIcon:
icon: rating-star
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).
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 Jigx color palette.
Tags can be set up in three ways:
Using a dynamic expression from a datasource:
tags: =@ctx.datasources.product-tags[product = @ctx.current.item.id].{"text":tags, "color":color}
Using a dynamic expression from a list item:
tags: =@ctx.current.item.tags.{"text":$, "color":"primary"}
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
=@ctx.current.state.
amount
checked
Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The =@ctx.current.state is the state of the current object in the array.
=@ctx.component.state.
amount
checked
State is the variable of the component.
=@ctx.solution.state.
activeItemId
now
Global state variable that can be used throughout the solution.
Examples and code snippets
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.area
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.area
8divider: solid
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.
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.pie-chart-list-dynamic
3item:4type: component.pie-chart
5options:6chart:7title:8text: =@ctx.current.item.title
9verticalAlign: center
10subtitle:11text: =@ctx.current.item.subtitle
12verticalAlign: center
13width:10014height:10015legend:16isHidden:true17series:18-data: =@ctx.current.item.data
19layout: pie
20color: =@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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.finance-charts
3# isHorizontal: true4item:5type: component.bar-chart
6options:7yAxis:8max:20009min:20010xAxis:11categories: =@ctx.datasources.finance-charts.x
12series:13-data: =@ctx.datasources.finance-charts.y
14color: =@ctx.datasources.finance-charts.color
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: =@ctx.current.item.people
The following expression can be used if your datasource uses different names for uri and text, for example:
avatars:
=@ctx.current.item.people.{"text":name,"uri":image}[]
Examples:
See the full example using static data in GitHub.
list-avatars (static)
datasources (static)
1# Data configured to use datasource (static) 2data: =@ctx.datasources.employee-groups
3item:4type: component.list-item
5options:6title: =@ctx.current.item.title
7subtitle: = 'Group id:'& ' ' & @ctx.current.item.groupId
8avatars: =@ctx.current.item.people
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.time & ' minutes for task completion'
8leftElement:9element: avatar
10text: $substring($substringBefore(@ctx.current.item.service, " "),1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") ,1, 1)
11uri: =@ctx.current.item.illustration
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8leftElement:9element: checkbox
10initialValue: =(@ctx.current.item.indoor) = 'TRUE' ? true :false
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.time & 'minutes for task completion'
8leftElement:9element: icon
10icon: =(@ctx.current.item.indoor) = "TRUE" ? 'home' :'car-garage'
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8leftElement:9element: image
10text: =@ctx.current.item.service
11uri: =@ctx.current.item.image
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8leftElement:9element: progress
10title: Time
11value: =$number(@ctx.current.item.time)/120
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8leftElement:9element: icon
10icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
11rightElement:12element: value
13text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
14swipeable:15left:16-onPress:17type: action.go-to
18options:19linkTo: action-list-onPress
20label: Primary Action
21icon: alarm-bell
22color: primary
23# note that the secondary action is only for demo purposes, you can stop at the primary action24-onPress:25type: action.go-to
26options:27linkTo: action-list-onPress
28label: Secondary Action
29icon: alert-triangle
30color: warning
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)
1datasources:2repair-services-static:3type: datasource.static
4options:5data:6-id:17description: Installation or repairs for doors. Doors to be provided by client
8hourlyRate:709illustration: http://clipart-library.com/data_images/436224.png
10image: https://images.unsplash.com/photo-1500281781950-6cd80847ebcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=8011materials:false12service: Door Installation/Repair
13time:6014-id:215description: Repairs to door handles
16hourlyRate:4017illustration: http://clipart-library.com/img1/1332215.jpg
18image: https://images.unsplash.com/photo-1538766017398-415434a31a5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=8019materials:true20service: Door Handle/Lock Repairs
21time:6022-id:323description: Installation or repairs of tiled surfaces. Tiles have to be provided by client
24hourlyRate:11025illustration: http://clipart-library.com/images/kcKnbzbXi.jpg
26image: https://images.unsplash.com/photo-1523413184730-e85dbbd04aba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=8027materials:false28service: Tile Installation/Repair
29time:12030-id:431description: Installation or repairs of dry-wall surfaces
32hourlyRate:8033illustration: http://clipart-library.com/img1/505759.jpg
34image: https://images.unsplash.com/photo-1628901551715-7234d14fb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=8035materials:true36service: Drywall Installation/Repair
37time:12038-id:539description: Repairs to bathroom rails, toilets, etc
40hourlyRate:9041illustration: http://clipart-library.com/new_gallery/53-530190_black-and-white-toilet-png.png
42image: https://images.unsplash.com/photo-1585313647787-7a061b5a85a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1423&q=8043materials:true44service: Bathroom Repairs
45time:6046-id:647description: Painting as required. Paint and tools not provided
48hourlyRate:7049illustration: http://clipart-library.com/img/853166.jpg
50image: https://images.unsplash.com/photo-1562259949-e8e7689d7828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1431&q=8051materials:false52service: Painting Services
53time:12054-id:755description: Repairs to fences. Tools and items not included
56hourlyRate:9057illustration: http://clipart-library.com/img/18345.gif
58image: https://images.unsplash.com/photo-1583805978118-ba9a81ac1399?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=8059materials:false60service: Fence Installation/Repair
61time:6062-id:863description: Removal of graffiti and painting. Paint and brushes not included in cost
64hourlyRate:11065illustration: http://clipart-library.com/images/6cy5aL5gi.jpg
66image: https://images.unsplash.com/photo-1581850518616-bcb8077a2336?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=8067materials:false68service: Removal of Graffiti
69time:12070-id:971description: Repairs to cupboard doors
72hourlyRate:6073illustration: http://clipart-library.com/img1/1605140.jpg
74image: https://images.unsplash.com/photo-1522791465802-47616431a4cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1451&q=8075materials:true76service: Cupboard Door Repairs
77time:6078-id:1079description: Plumbing issues and repairs
80hourlyRate:9081illustration: http://clipart-library.com/images_k/plumbing-silhouette/plumbing-silhouette-6.png
82image: https://images.unsplash.com/photo-1591804774220-c1db3673d05b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=8083materials:true84service: Plumbing
85time:60
List-item with right badge
This example shows badges that are displayed based on a certain input. Badges always use the primary color. You cannot change the color of the badge.
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8rightElement:9element: badge
10isHidden: =(@ctx.current.item.indoor) = 'TRUE' ? true :false
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.
1datasources:2team-tasks:3type: datasource.sqlite
4options:5provider: DATA_PROVIDER_DYNAMIC
6entities:7-entity: default/tasks
8query:|9 SELECT
10 id,
11 JSON_EXTRACT(task.data, '$.taskAssignee') AS taskAssignee,
12 JSON_EXTRACT(task.data, '$.taskName') AS taskName,
13 JSON_EXTRACT(task.data, '$.taskCost') AS taskCost,
14 JSON_EXTRACT(task.data, '$.taskId') AS taskId,
15 JSON_EXTRACT(task.data, '$.taskStatus') AS taskStatus,
16 JSON_EXTRACT(task.data, '$.team') AS team,
17 JSON_EXTRACT(task.data, '$.Profile') AS Profile,
18 JSON_EXTRACT(task.data, '$.priority') AS priority,
19 COUNT(JSON_EXTRACT(task.data, '$.taskId')) AS taskCount
20 FROM [default/tasks] AS task
21 GROUP BY priority
22 ORDER BY priority DESC2324priority:25type: datasource.static
26options:27data:28-id:129name: Closed
30icon: check-2-alternate
31-id:232name: Urgent
33icon: double-exclamation-mark-2-formatting
34-id:335name: High
36icon: arrow-double-up
37-id:438name: Low
39icon: arrow-double-down
40-id:441name: Medium
42icon: equal-math-symbol-circle
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8rightElement:9element: button
10title: Press Me
11onPress:12type: action.go-back
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.time & 'minutes for task completion'
8rightElement:9element: icon
10icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
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)
1# Data configured to use datasource (static) 2data: =@ctx.datasources.repair-services-static
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8rightElement:9element: switch
10initialValue: =(@ctx.current.item.materials = true ? true:false)
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.
list-with-right-elements (static)
list-with-right-elements (dynamic)
datasource (static)
datasource (dynamic)
1title: List with Right Value (Dynamic Data)
2description: A list to display values in list items
3type: jig.list
4icon: task-list
56header:7type: component.jig-header
8options:9height: medium
10children:11type: component.image
12options:13source:14uri: https://images.unsplash.com/photo-1618038483079-bfe64dcb17f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=8015# Data configured to use datasource (dynamic) 16data: =@ctx.datasources.cleaning-services-dynamic
17item:18type: component.list-item
19options:20title: =@ctx.current.item.service
21subtitle: =@ctx.current.item.description
22rightElement:23element: value
24text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
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)
1# Data configured to use datasource (dynamic) 2data: =@ctx.datasources.cleaning-services-dynamic
3item:4type: component.list-item
5options:6title: =@ctx.current.item.service
7subtitle: =@ctx.current.item.description
8leftElement:9element: icon
10icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
11rightElement:12element: value
13text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
14swipeable:15right:16-onPress:17type: action.go-to
18options:19linkTo: action-list-onPress
20label: Primary Action
21icon: alarm-bell
22color: primary
23# note that the secondary action is only for demo purposes, you can stop at the primary action24-onPress:25type: action.go-to
26options:27linkTo: action-list-onPress
28label: Secondary Action
29icon: alert-triangle
30color: warning
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)
1children:2-type: component.entity
3options:4children:5-type: component.entity-field
6options:7label: Current User
8value: =@ctx.user.displayName
9-type: component.list
10options:11hasActiveItem:true12# Data configured to use datasource (dynamic) 13data: =@ctx.datasources.cleaning-services-dynamic
14item:15type: component.list-item
16options:17title: =@ctx.current.item.service
18subtitle: =@ctx.current.item.time & ' mins'
19leftElement:20element: image
21text:''22uri: =@ctx.current.item.image
23rightElement:24element: value
25text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $string(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $string(@ctx.current.item.onceoffrate) & ' once-off'
26onPress:27type: action.set-state
28options:29state: =@ctx.solution.state.hasActiveItem
30value:true
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)
1children:2-type: component.entity
3options:4children:5-type: component.entity-field
6options:7label: Current User
8value: =@ctx.user.displayName
9-type: component.list
10options:11sections:12-title: Indoor Services
13# Data configured to use datasource (dynamic) 14data: =@ctx.datasources.cleaning-services-dynamic[indoor='TRUE']15-title: Outdoor Services
16# Data configured to use datasource (dynamic) 17data: =@ctx.datasources.cleaning-services-dynamic[indoor='FALSE']18item:19type: component.list-item
20options:21title: =@ctx.current.item.service
22subtitle: =@ctx.current.item.time & ' mins'
23leftElement:24element: image
25text:''26uri: =@ctx.current.item.image
27rightElement:28element: value
29text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & @ctx.current.item.hourlyrate & ' p/hr':'$ ' & @ctx.current.item.onceoffrate & ' ' & 'once-off'
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.
1title: List with items wrapped in a card
2description: A list displaying images on list items styled in a card
3type: jig.list
4icon: task-list
5# Change the list to a horizontal list by uncommenting the isHorizontal line below6# isHorizontal: true78header:9type: component.jig-header
10options:11height: medium
12children:13type: component.image
14options:15source:16uri: https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=801718data: =@ctx.datasources.repair-services-static
19item:20type: component.list-item
21options:22isContained:true23title: =@ctx.current.item.service
24subtitle: =@ctx.current.item.description
25leftElement:26element: image
27text: =@ctx.current.item.service
28uri: =@ctx.current.item.image
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
1title: List of cleaning services with ratings
2type: jig.default
3description: A list displaying ratings with values
4icon: notes-paper-approve
56header:7type: component.jig-header
8options:9height: medium
10children:11type: component.image
12options:13source:14uri: https://images.unsplash.com/photo-1529220502050-f15e570c634e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1829&q=801516children:17-type: component.list
18instanceId: rating-list
19options:20data: =@ctx.datasources.cleaning-services-static
21item:22type: component.list-item
23options:24isContained:true25title: =@ctx.current.item.service
26subtitle: =@ctx.current.item.area
27label:28title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
29leftElement:30element: image
31text: =$substring($substringBefore(@ctx.current.item.service, " "),1, 1) &
32 $substring($substringAfter(@ctx.current.item.service, " ") ,1, 1)
33uri: =@ctx.current.item.image
34# Rating uses a value from the datasource with accompanying text.35# By default, a single rating-star icon in the primary color is shown. 36rating:37value: =@ctx.current.item.rating
38text: =@ctx.current.item.ratingText
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.
1title: Manufacturing quality control
2description: List with a percentage rating
3type: jig.default
45header:6type: component.jig-header
7options:8height: medium
9children:10type: component.image
11options:12source:13uri: https://images.unsplash.com/photo-1700727448575-6f1680cd7d75?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cXVhbGl0eSUyMGNvbnRyb2x8ZW58MHx8MHx8fDA%3D1415children:16-type: component.list
17options:18data: =@ctx.datasources.control-stats
19maximumItemsToRender:820item:21type: component.list-item
22options:23isContained:true24title: =@ctx.current.item.stat
25subtitle: =@ctx.current.item.description
26# Rating uses a percentage defined in the datasource.27# By default, a single star icon in the primary color is shown. 28rating:29percentage: =@ctx.current.item.percentage
30leftElement:31element: icon
32icon: =@ctx.current.item.icon
33isDuotone:true
This example sets up a product review 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.
1title: Product Review
2description: List with percentage rating and icons
3type: jig.default
45header:6type: component.jig-header
7options:8height: medium
9children:10type: component.image
11options:12source:13uri: https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2R1Y3QlMjBleHBlcmllbmNlfGVufDB8fDB8fHww1415children:16-type: component.list
17options:18data: =@ctx.datasources.product-review
19maximumItemsToRender:820item:21type: component.list-item
22options:23title: =@ctx.current.item.title
24subtitle: =@ctx.current.item.subtitle
25description: =@ctx.current.item.thirdLine
26isContained:true27label:28title: =@ctx.current.item.label
29leftElement:30element: avatar
31text:""32uri: =@ctx.current.item.productImage
33# Rating uses a percentage from the datasource, the rating icon and color is customized.34# By configuring the maximum property sets the number of icons required.35# By configuring the current property colors the number of icons specified in the maximum36# property with the value to create the rating. 37rating:38percentage: =@ctx.current.item.rating
39ratingIcon:40color: color7
41current: =@ctx.current.item.rating*542icon: thumb-up-like
43maximum:5
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.
1title: Cleaning Services
2description: List showing available Cleaning Services
3type: jig.default
45header:6type: component.jig-header
7options:8height: medium
9children:10type: component.image
11options:12source:13uri: https://images.unsplash.com/photo-1628177142898-93e36e4e3a50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=801415children:16-type: component.list
17options:18data: =@ctx.datasources.cleaning-services-dynamic
19maximumItemsToRender:820item:21type: component.list-item
22options:23title: =@ctx.current.item.service
24subtitle: ='Duration of ' & @ctx.current.item.time & ' mins'
25horizontalItemSize: large
26# Wrap each list-item in a card. 27isContained:true28# Rating uses a value from the datasource, the rating icon and color is customized.29# By configuring the maximum property sets the number of icons required.30# By configuring the current property colors the number of icons specified in the maximum31# property with the value to create the rating. 32rating:33ratingIcon:34icon: thumb-up-like
35color: color7
36value:37current: =@ctx.current.item.rating
38maximum:539# Add multiple tags to the list-items.40# Each tag can have its own color.41# Tags are shown in the order they configured. 42tags:43-text: =('$' & @ctx.current.item.hourlyrate)
44color: color14
45-text: =@ctx.current.item.area
46color: color14
47leftElement:48element: image
49text:''50uri: =@ctx.current.item.image
51rightElement:52# The badge will display with the number of service,53# the count is configured in the datasource. 54element: badge
55value: =@ctx.current.item.quantity
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key
Press space bar to start a drag.
When dragging you can use the arrow keys to move the item around and escape to cancel.
Some screen readers may require you to be in focus mode or to use your pass through key