Jig Types
jig.list

17min
A list is a changeable, ordered sequence of elements and related values. They enable you to keep data together that belongs together, condense your code, and perform the same methods and operations on multiple values at once.
Jig List Preview
﻿
This type is very 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 that is inside a list is called an item.
As a List Jig, this component allows 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 Default Jig where the list﻿ component is configured along with other content or components. 
If the widget size exceeds 1x1 and no other widget types have been specified, the list will automatically appear on the widget with the specified elements 
﻿Configuration options﻿
The List Jig can be configured in many various 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 of expander﻿ 
As a list of stage﻿﻿
As a list of product-item﻿﻿
As a list of bar-chart﻿﻿
As a list of pie-chart﻿﻿
Looking to add a shopping cart or product list to your app? The Product-Item List comes with awesome out-of-the-box features that make it easy to build/achieve. Why not go check it out? 😎
We will also take a look at additional configurations available for the List Jig:
Horizontal lists - isHorizontal property
Ability to search and/or filter lists - isSearchable or filter properties
As selectable items - isSelectable property
As active items - hasActiveItem property
List with sections - sections property
﻿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 ﻿.
simple-list-dd.jigx
datasources
default.jigx
index.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: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.area
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: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.area
﻿
Lists with styles
List style
﻿
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 static data in GitHub.
list-with-styles-sd.jigx
datasources
index.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: =@ctx.datasources.styles
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: =@ctx.current.item.subtitle
    label:
      title: =@ctx.current.item.label-title
      color:
        - when: true
          color: color14

    divider: solid
    horizontalItemSize: regular

    style:
      isPositive: =@ctx.current.item.isPositive
      isHighlighted: =@ctx.current.item.isHighlighted
      isStrikeThrough: =@ctx.current.item.isStrikeThrough
      isError: =@ctx.current.item.isError
      isWarning: =@ctx.current.item.isWarning
      isDisabled: =@ctx.current.item.isDisabled

    leftElement:
      element: icon
      icon: =@ctx.current.item.icon
      isContained: =@ctx.current.item.isContained
      isDuotone: =@ctx.current.item.isDuotone

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: =@ctx.datasources.styles
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: =@ctx.current.item.subtitle
    label:
      title: =@ctx.current.item.label-title
      color:
        - when: true
          color: color14

    divider: solid
    horizontalItemSize: regular

    style:
      isPositive: =@ctx.current.item.isPositive
      isHighlighted: =@ctx.current.item.isHighlighted
      isStrikeThrough: =@ctx.current.item.isStrikeThrough
      isError: =@ctx.current.item.isError
      isWarning: =@ctx.current.item.isWarning
      isDisabled: =@ctx.current.item.isDisabled

    leftElement:
      element: icon
      icon: =@ctx.current.item.icon
      isContained: =@ctx.current.item.isContained
      isDuotone: =@ctx.current.item.isDuotone
﻿
List with Expanders (using Titles)
List with expander
﻿
﻿
List with expander
﻿
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 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 employees. You can use the employees.csv file in GitHub and upload it via the Data﻿ configuration in ﻿.
list-with-expander-title-dd.jigx
datasources
default.jigx
index.jigx
|
datasources:
  expander-on-list-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/employees
      query: | 
        SELECT 
          id,
          '$.firstname',
          '$.lastname', 
          '$.email',
          '$.phone', 
          '$.position', 
          '$.address', 
          '$.category' 
        FROM [default/employees] WHERE '$.category' = 'employees-expander'
datasources:
  expander-on-list-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/employees
      query: | 
        SELECT 
          id,
          '$.firstname',
          '$.lastname', 
          '$.email',
          '$.phone', 
          '$.position', 
          '$.address', 
          '$.category' 
        FROM [default/employees] WHERE '$.category' = 'employees-expander'
﻿
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 ﻿.
list-with-stage-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  flight-schedule: null
databaseId: default
tables:
  flight-schedule: null
﻿
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﻿ configuration in ﻿.
list-with-product-item-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  products: null
databaseId: default
tables:
  products: null
﻿
List with Avatars
List with avatars
﻿
﻿
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 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 ﻿.
list-with-avatars-dd.jigx
datasources
default.jigx
index.jigx
|
datasources:
  groups:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/employees
      query: |
        SELECT 
          id, 
          '$.group',
          '$.groupId',
          '$.category'
        FROM [default/employees] WHERE '$.category' = "employees" and '$.groupId' IS NOT NULL
        
  avatars:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/avatar
      query: |
        SELECT 
          id, 
          '$.name',
          '$.photo',
          '$.groupId',
          '$.category'
        FROM [default/avatar] WHERE '$.category' = "avatars"
datasources:
  groups:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/employees
      query: |
        SELECT 
          id, 
          '$.group',
          '$.groupId',
          '$.category'
        FROM [default/employees] WHERE '$.category' = "employees" and '$.groupId' IS NOT NULL
        
  avatars:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/avatar
      query: |
        SELECT 
          id, 
          '$.name',
          '$.photo',
          '$.groupId',
          '$.category'
        FROM [default/avatar] WHERE '$.category' = "avatars"
﻿
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
datasources
index.jigx
|
datasources:
  components:
    type: datasource.static
    options:
      data:
        - title: 25%
          subtitle: As
          data:
            - 25
            - y: 75
              color: transparent
        - title: 45%
          subtitle: Brno
          data:
            - 45
            - y: 55
              color: transparent
        - title: 33%
          subtitle: Prague
          data:
            - 33
            - y: 67
              color: transparent
datasources:
  components:
    type: datasource.static
    options:
      data:
        - title: 25%
          subtitle: As
          data:
            - 25
            - y: 75
              color: transparent
        - title: 45%
          subtitle: Brno
          data:
            - 45
            - y: 55
              color: transparent
        - title: 33%
          subtitle: Prague
          data:
            - 33
            - y: 67
              color: transparent
﻿
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.
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 ﻿.
Other examples:
See more code samples for horizontal lists in GitHub.
Horizontal list
﻿
Horizontal list
﻿
list-horizontal-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
Lists with Search functionality
List with search
﻿
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 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 ﻿.
list-with-search-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
Lists with Filter functionality
List with filter
﻿
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 ﻿.
list-filter-label-dd.jigx
datasources
default.jigx
index.jigx
|
title: Filter List (Dynamic)
description: A dynamic list displaying filter options
type: jig.list
icon: notes-paper-approve

filter: 
  - title: All
    value: ''
  - 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

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 '$.indoor' LIKE @filter or @filter IS NULL
      queryParameters:
        filter: =@ctx.jig.state.filter
        
  
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.area
    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: =@ctx.current.item.image
title: Filter List (Dynamic)
description: A dynamic list displaying filter options
type: jig.list
icon: notes-paper-approve

filter: 
  - title: All
    value: ''
  - 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

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 '$.indoor' LIKE @filter or @filter IS NULL
      queryParameters:
        filter: =@ctx.jig.state.filter
        
  
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.area
    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: =@ctx.current.item.image
﻿
Lists with Search and Filter functionality
List search and filter
﻿
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 ﻿.
list-filter-search-label-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
Selectable lists
Selectable list
﻿
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 ﻿.
list-selectable-dd.jigx
datasources
Default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
Lists with active items
List with active items
﻿
List 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. 
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 ﻿.
list-with-active-item-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
List with Sections
List with sections
﻿
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 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 ﻿.
list-with-sections-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  cleaning-services: null
databaseId: default
tables:
  cleaning-services: null
﻿
See also
Developer reference
﻿list-item﻿,
﻿R﻿elated examples (Github)﻿
﻿
Updated 19 Sep 2023
Did this page help you?
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Simple List
Lists with styles
List with Expanders (using Titles)
List with Stages
List with Product-items
List with Avatars
List with Pie Charts
Horizontal list
Lists with Search functionality
Lists with Filter functionality
Lists with Search and Filter functionality
Selectable lists
Lists with active items
List with Sections
jig.list

﻿Configuration options﻿

﻿Examples and code snippets ﻿

Simple List

Lists with styles

List with Expanders (using Titles)

List with Stages

List with Product-items

List with Avatars

List with Pie Charts

Horizontal list

Lists with Search functionality

Lists with Filter functionality

Lists with Search and Filter functionality

Selectable lists

Lists with active items

List with Sections

See also

Configuration options

Examples and code snippets
