jig.list

Use the jig.list to create a list from a datasource and style that list to your requirements. A list is a changeable, ordered sequence of elements and related values. They enable you to keep data that belongs together, condense your code, and perform the same methods and operations on multiple values at once. Looking to add a shopping cart or product list to your app? The product-item list comes with great out-of-the-box features that make it easy to build.

Jig List Preview

Considerations

• This jig type is similar to the component List, with the only exception that list components is a component that you use on a Default jig with other items, whereas the List jig is a jig dedicated to a list only.

• Each item in a list can be called individually through indexing. Lists are a compound data type made up of smaller parts and are very flexible because they can have values added, removed, and changed.

• When you need to store a lot of values or iterate over values, and you want to be able to readily modify those values, you’ll likely want to work with list data types.

• Each element or value inside a list is called an item.

• A jig.list component allows for a few configuration options and is automatically added as a list on a widget if the sizing of the widget exceeds 1x1. See the list for information on the list widget. This component can also be added to a jig.default where the list component is configured along with other content or components.

• When using the value property for filtering, it's recommended to use simple values such as strings or numbers (e.g., 'today', '7d', '14d'). Avoid using objects, as the filter logic is designed for strict equality checks. Instead, derive complex data like date ranges elsewhere based on the selected value. See the When using a filter best practice.

Configuration options

The jig.list can be configured in the following ways within the Jigx Builder:

• As a normal list (this is the main type - refer to the list-item component section for unique formatting options)

• As a list with expanders

• As a list with stages

• As a list of product-items

• As a list shown as a bar-chart

• As a list shown as a pie-chart

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

badge	Add a badge to the list that displays on the widget to highlight critical information and capture the user's attention, ensuring key updates or notifications are easily noticeable within the app. The badge can be configured at the root level of the jig file: To display as a red dot using the empty value. A red dot with a number using an expression to perform a count. For example, counting the number of tasks in the list.
filter	initialValue - Predefine the default selected tab for a filter on the list, so that when opening the default filter tab, it is displayed. data - define the filter tabs using: title - Give the filter a name. The text that will be displayed in the tab, for example, in stock. value - The value that the list filter returns. Use the following expressions to return this value: [email protected] (for a list in a default jig) [email protected](for a list jig) For true/false values that are saved as a boolean ensure the filter has a boolean value. For true/false values that are saved as strings ensure the filter has a string value. When using the value property for filtering, it's recommended to use simple values such as strings or numbers (e.g., 'today', '7d', '14d'). Avoid using objects, as the filter logic is designed for strict equality checks. Instead, derive complex data, such as date ranges elsewhere, based on the selected value. See the When using a filter best practice.
hasActiveItem	When set to true the list has an active item state.
isHorizontal	Set to true displays the list horizontally, while false displays the list vertically. The default list is displayed vertically.
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 and component.list-item.
isSearchable	Set to true adds a search field to the list. The default list is displayed without a search field.
isSelectable	When set to true the ability to select individual and multiple items in the list is available. Click the Select link in the top right of the screen. The default list is displayed without selection options.
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
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 descriptive text that displays next to 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.
sections	Used for styling a list, when set to true each item in the list displays in its own section, divided by a line. The default is false.
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'
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.

product-rating-value

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

user-rating-percentage

rating-star-ratingicon

State Configuration	Key	Notes
[email protected].	activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value	State is set by the creator in the YAML. State applies to the jig
[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].	activeItemId now	Global state variable that can be used throughout the solution.

Best Practice

When using a filter

• Use simple, semantic values for filters - Instead of using complex date objects or calculated values directly in your filter configuration, use simple, semantic string values that clearly represent the user's intent.

filter:
  initialValue: today
  data:
    - title: All
      value: all
    - title: Today
      value: today
    - title: Last 7 Days
      value: last-7-days
    - title: Last 30 days
      value: last-30-days

• Create transformation functions as shared expressions

  Transform simple filter values into complex business logic using shared expressions.

expressions:
  getDateRangeByFilter: |
    =$function($filterValue) {
       if ($filterValue = 'today') {
         return $now()
       }

       if ($filterValue = 'last-7-days') {
         return $utils.getSOListSQLiteDateFilter('thisweek', @ctx.system.timezone.offset)
       }
     }

  getTitleByFilter: |
    =$function($filterValue) {
       if ($filterValue = 'today') {
         return "Today"
       }

       if ($filterValue = 'last-7-days') {
         return "Last Week"
       }
     }

• Avoid empty strings and falsy values for "All" options Safer SQLite query operations: ... WHERE @filter IS "all" is more reliable than checking for empty strings. Code clearly shows what "all" means versus an empty value. Falsy values (NULL, false, '') can cause unexpected behavior in conditionals. Better debugging, explicit values are easier to trace and debug.

Examples and code snippets

The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution.

Simple List

Simple List

This example displays the list in its most basic form without any additional properties or elements configured. Scroll down for more examples of how you can implement lists.

Examples: See the full code sample using static data local and global in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

simple-list-dd.jigx

title: Simple List (Dynamic Data)
description: A simple list to display dynamic data
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-1563453392212-326f5e854473?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
          
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]

datasources

default.jigx

index.jigx

Lists with styles

List style

This is a very basic example to guide you on the various styles available to you. This is not only useful to see your options but also to see how these options compare to one another.

Examples: See the full example using GitHub in GitHub.

list-with-styles-sd.jigx

title: List styles
type: jig.list
# isHorizontal: true
# isHorizontalScrollIndicatorHidden: true

actions:
  - children:
      - type: action.go-back
        options:
          title: Primary Action
      - type: action.go-back
        options:
          title: Secondary action 1
          icon: home
      - type: action.go-back
        options:
          title: Secondary action 2
          icon: hourglassactions:
  - children:
      - type: action.go-back
        options:
          title: Primary Action
      - type: action.go-back
        options:
          title: Secondary action 1
          icon: home
      - type: action.go-back
        options:
          title: Secondary action 2
          icon: hourglass
          
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    label:
      title: [email protected]
      color:
        - when: true
          color: color14

    divider: solid
    horizontalItemSize: regular

    style:
      isPositive: [email protected]
      isHighlighted: [email protected]
      isStrikeThrough: [email protected]
      isError: [email protected]
      isWarning: [email protected]
      isDisabled: [email protected]

    leftElement:
      element: icon
      icon: [email protected]
      type: [email protected]

datasources

index.jigx

List with Expanders (using Titles)

This example shows a list of Expanders that have used titles component as the header element.

Expanders are ideal for displaying additional information without having to navigate away to another page.

Examples: See the full code sample using GitHub in GitHub. See the full code sample using GitHub

Datasources:

See the full datasource code sample for static data. See the full datasource code sample for dynamic data in Github.

List with expander

Using the code below requires data in the database, the jigx.sample solution has the data provided for employees. You can use the employees.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-with-expander-title-dd.jigx

title: Work Team
description: List with Expander and Title as Header Element (Centre)
type: jig.list

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

data: [email protected]
item:
  type: component.expander
  options:
    header:
      centerElement: 
        type: component.titles
        options:
          title: [email protected] & ' ' & @ctx.current.item.lastname
          subtitle: [email protected]
          icon: person
          align: left
    children:
      - type: component.entity
        options:
          children:
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Phone
                      value: [email protected]
                  - type: component.entity-field
                    options:
                      label: Email
                      value: [email protected]
            - type: component.entity-field
              options:
                label: Address
                value: [email protected]

datasources

default.jigx

index.jigx

List with Stages

List with stages

This example is for list items that would have a left and right element and would typically show a start-and-end concept. A common use of this is usually flight schedules, however, this can be used for a multitude of different uses as you can choose a different icon.

This is very often used in the header component of the expander. See the list example for the expander above for comparisons.

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

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

Using the code below requires data in the database, the jigx.sample solution has the data provided for flight-schedule. You can use the flight-schedule.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-with-stage-dd.jigx

title: Flight Schedule
description: List with Stage
type: jig.list
icon: plane-1

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1490430657723-4d607c1503fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmxpZ2h0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60

data: [email protected]
item:
  type: component.stage
  options:
    icon: plane-1
    right:
      title: [email protected]
      subtitle: [email protected]
    left:
      title: [email protected]
      subtitle: [email protected]
          
widgets:
  flights:
    type: widget.list
    options:
      data: [email protected]
      item: 
        type: component.stage
        options:
          icon: plane-1
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected]

datasources

default.jigx

index.jigx

List with Product-items

List with product items

This example displays the built-in functionality of displaying product items in a way that allows for impact yet does not require intricate setups.

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

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

Using the code below requires data in the database, the jigx.sample solution has the data provided for products. You can use the products.csv file in <GitHub and upload it via the [Data](https://docs.jigx.com/administration/solutions/data configuration in Jigx Management.

list-with-product-item-dd.jigx

title: List with Product Item (Dynamic)
description: Example of List with Product Item
type: jig.list

icon: delivery-truck-5

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dGVjaG5vbG9neSUyMHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60


data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    image:
      uri: [email protected]
    discount: [email protected]
    price:
      value: [email protected]
      format:
        numberStyle: currency
    tag: [email protected]

datasources

default.jigx

index.jigx

List with Avatars

List with avatars

This example displays the list items in a way that allows for impact yet does not require intricate setups. Avatars are displayed for each list item.

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

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

Using the code below requires data in the database, the jigx.sample solution has the data provided for avatars and employees. You can use the avatar.csv and employees.csv files in GitHub and upload it via the Data configuration in Jigx Management.

list-with-avatars-dd.jigx

title: List with Avatars (Dynamic)
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-1597423498219-04418210827d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHJlcGFpcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=900&q=60

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: ='Group id:'& ' ' & @ctx.current.item.groupId 
    avatars:  [email protected][groupId = @ctx.current.item.groupId].{"text":name,"uri":photo}[] 

datasources

default.jigx

index.jigx

List with right numbered badges

This example displays a list of task priorities, with the number of tasks in each priority shown in a badge on the right. Badges always use the primary color. You cannot change the color of the badge.

Examples: See the full example in GitHub.

List with numbered badge

list-with-right-number-badge.jigx

title: Team task priorties
description: A list displaying priorities, with a numbered badge for each. 
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-1557426272-fc759fdf7a8d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHRlYW0lMjBzdGF0c3xlbnwwfHwwfHx8MA%3D%3D

  priority: 
    type: datasource.static
    options:
      data:
        - id: 1
          name: Closed
          icon: check-2-alternate
        - id: 2
          name: Urgent
          icon: double-exclamation-mark-2-formatting
        - id: 3
          name: High
          icon: arrow-double-up
        - id: 4
          name: Low
          icon: arrow-double-down
        - id: 4
          name: Medium
          icon: equal-math-symbol-circle
              
data: [email protected]    
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]
    leftElement:
      element: icon
      icon: [email protected][name = @ctx.current.item.priority].icon
      type: duotone
    rightElement: 
      element: badge
# The badge will display with the number of priorities per priority,
# the count is configured in the datasource query.      
      value: [email protected]

datasource (dynamic)

List with Pie Charts

Pie Chart list

This is a simple example of how pie charts can also be displayed on a list - this is great for visual representation of information.

Examples: See full code sample using static data in GitHub

list-with-pie-charts-sd.jigx

title: List with Pie Charts
type: jig.list

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

datasources

index.jigx

Horizontal list

Horizontal list

This provides an example of a horizontal list with some UI elements like an image and values configured. Horizontal lists are especially helpful when used on a Composite Jig with other Jigs.

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

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Other examples:

See more code samples for horizontal lists in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

Horizontal lists cannot be used with the section component as an empty white jig will be displaye

list-horizontal-dd.jigx

title: Cleaning Services
description: List of available Cleaning Services
type: jig.list
icon: contact 
isHorizontal: true
isHorizontalScrollIndicatorHidden: false

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


data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: ='Duration of ' & @ctx.current.item.time & ' mins'
    horizontalItemSize: large
    leftElement: 
      element: image
      text: ''
      uri: [email protected]
    rightElement:
      element: value
      text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'

datasources

default.jigx

index.jigx

Lists with Search functionality

List with search

This example displays the search functionality of a basic List Jig that allows the user to filter a list with tons of data instantaneously based on certain keywords they have entered.

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

Datasources: See the full datasource code sample forstatic data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-with-search-dd.jigx

title: Search List (Dynamic)
description: A dynamic list displaying search functionality
type: jig.list
icon: notes-paper-approve
isSearchable: true

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

datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
  
      entities:
        - entity: default/cleaning-services-dynamic
  
      query: SELECT id, '$.area', '$.description', '$.hourlyrate', '$.illustration', '$.image', '$.indoor', '$.onceoffrate', '$.service', '$.time' FROM [default/cleaning-services] WHERE '$.service' LIKE '%'||@search||'%' OR @search IS NULL
      queryParameters:
        search: [email protected]
  
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    

datasources

default.jigx

index.jigx

Lists with Filter functionality

List with filter

This example helps to categorically filter the data to create meaningful sections or split the data for ease of use for the users.

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

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-filter-label-dd.jigx

title: Filter List (Dynamic)
description: A dynamic list displaying filter options
type: jig.list
icon: notes-paper-approve

filter: 
  data: 
  - title: All
    value: "All"
  - title: Indoor
    value: "TRUE"
  - title: Outdoor
    value: "FALSE"
  
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
        
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    label:
      title: =(@ctx.current.item.indoor = "TRUE" ? 'Indoor' :'Outdoor')
    leftElement: 
      element: avatar
      text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: [email protected]

datasources

default.jigx

index.jigx

Lists with Search and Filter functionality

List search and filter

To further enhance the search and filter capabilities for the user, there is also an option to combine the search and filter functionality as can be seen in this example.

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

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource for code sample dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-filter-search-label-dd.jigx

title: Filter & Search List (Dynamic)
description: A dynamic list displaying filter and searching
type: jig.list
icon: notes-paper-approve
isSearchable: true

filter: 
  data: 
  - title: All
    value: "All"
  - title: Indoor
    value: "TRUE"
  - title: Outdoor
    value: "FALSE"
  
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
  
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    label:
      title: =(@ctx.current.item.indoor = "TRUE" ? 'Indoor':'Outdoor')
    
    leftElement: 
      element: avatar
      text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: [email protected]

datasources

default.jigx

index.jigx

Filtered list with default tab set

In this example, there are three tabs to filter on. By default we want the jig to open on the second tab (Team B). This is achieved by adding an initialValue property to the filter property.

Example: See the example in GitHub.

Filtered list with default tab

list-with-initialvalue.jigx

title: Filter List with default tab
description: A dynamic list displaying filter options opening with a default tab showing tasks Team B
type: jig.list
icon: filter-1
  
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

filter:
# Set the jig to open with teamB tab open as default
    initialValue: teamB
    data: 
      - title: Team A
        value: teamA
      - title: Team B
        value: teamB
      - title: Team C
        value: teamC 
  
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    label:
      color:
        - when: true
          color: color1
      title: [email protected]
    leftElement: 
      element: avatar
      text: [email protected]
      uri: [email protected]

datasources

Selectable lists

Selectable list

This example shows functionality that allows users to select one or numerous list items for quick actioning, saving them the time and effort of having to perform numerous repetitive manual tasks. Examples: See the full code sample using static data in GitHub. See the full code sample using dynamic data in GitHub.

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-selectable-dd.jigx

title: Selectable List (Dynamic Data)
description: A simple, selectable list with labels
type: jig.list
icon: task-list
isSelectable: true

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1482449609509-eae2a7ea42b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNsZWFuaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    progress: [email protected] = true ? 1 :0
    color:
      - when: [email protected] = true ? true :false
        color: color2
    label:
      title: [email protected] & ' mins'

datasources

Default.jigx

index.jigx

Lists with active items

This allows the user to see when they are interacting with a specific list item. Whilst interacting, the list item changes slightly making it clear to the user that they are interacting with this item.

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

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

List with active items

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-with-active-item-dd.jigx

title: List with Active Item(s) (Dynamic Data)
description: A simple list that shows when list item is activated
type: jig.list
icon: task-list
hasActiveItem: true

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1482449609509-eae2a7ea42b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNsZWFuaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    progress: [email protected] = @ctx.solution.state.activeItemId ? 1 :0
    color:
      - when: [email protected] = @ctx.solution.state.activeItemId ? true :false
        color: color2
    label:
      title: [email protected] & ' mins'
    onPress: 
      type: action.action-list
      options:
        actions:
          - type: action.set-state
            options:
              state: [email protected]
              value: [email protected]

datasources

default.jigx

index.jigx

List with Sections

This functionality allows you to split your lists into more meaningful sections.

Examples: See the full code sample using static data in GitHub. See the full code sample usingdynamic datain GitHub.

Datasources: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data configuration in Jigx Management.

list-with-sections-dd.jigx

title: Simple List with Sections  (Dynamic Data)
description: A simple list to display lists in various sections
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-1482449609509-eae2a7ea42b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGNsZWFuaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60

sections:
    - title: Indoor Services
      data: [email protected][indoor='TRUE']
    - title: Outdoor Services
      data: [email protected][indoor='FALSE']
item:
    type: component.list-item
    options:
      title: [email protected]
      subtitle: [email protected]
      label:
        title: [email protected] & ' mins'

datasources

default.jigx

index.jigx

List with 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 items contained 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
# 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:
    isContained: true
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: image
      text: [email protected]
      uri: [email protected]

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

list-with-rating-value.jigx

title: List of cleaning services with ratings
type: jig.list
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
    
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 star icon in the primary color is shown.        
    rating: 
      value: [email protected]
      text: [email protected]

cleaning-services-static (datasource)

List with ratings with a value, minimum, maximum and icon

Create a product review jig that provides a rating using a value, an icon representing the value, rating icons with color. The list is styled by wrapping the items in a card using the isContained property. A verified label is added to the right while the product image is added as an avatar to the left.

Examples: See the full example in GitHub.

List with ratings and icons

list-with-rating-value-max.jigx

title: Product Review
description: List rating with value and icon
type: jig.list
icon: contact

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1682309642428-3f8b37637434?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cmF0aW5nc3xlbnwwfHwwfHx8MA%3D%3D
    
data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    avatars: [email protected][product =
      @ctx.current.item.id].{"text":text,"uri":avatars}[]
    description: [email protected]
    isContained: true
    label:
      title: [email protected]
    leftElement:
      element: avatar
      text: ""
      uri: [email protected]
# 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:
      value: [email protected]
      ratingIcon:
        color: color3
        current: [email protected]
        icon: rating-star-1
        maximum: 5

product-review.jigx

product-users.jigx

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

list-with-rating-percentage.jigx

title: Manufacturing quality control
description: List with a percentage rating
type: jig.list
icon: contact

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

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

control-stats (datasource)

List 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 with percentage ratings and icons

list-with-rating-percentage-max.jigx

title: Product Review
description: List percentage rating and icons
type: jig.list
icon: contact

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
    
data: [email protected]
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

product-review.jigx

product-users.jigx

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

list-with-tags-multiple.jigx

title: Team task list with mulitple tags
description: List items display multiple tags 
type: jig.list

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

data: [email protected]
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]

datasource

List with ratings and tags

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.

List with ratings & tags

list-with-tags-rating.jigx

title: Cleaning Services
description: List of available Cleaning Services
type: jig.list
icon: contact 

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

data: [email protected]
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]

cleaning-services-dynamic.jigx

See also

• Jigs (screens)

• list-item

• Related examples (Github)

• State