website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
list

list-item

19min

This component serves as the child component whenever any list-related item has been called (as discussed in the jig.list and list sections. There is not much to add to this section that has not already been mentioned. The component focuses on the way in which the list items are returned, allowing the creator the ability to customize the data returned as well as add fun, beautiful 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.



The core structure includes: title

Other options

subtitle, description - The subtitle or description that 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 builder help (ctrl + space).

progress, color - This will add a colorful visualization (background color of your choice) of the progress of the actual list-item. It goes from left to right side and the range of the allowed values is from 0 - 1

divider - Space between two items in the list.

  • none - Set by default
  • transparent - This one will make 1pt "margin" between two items
  • solid - This one displays a colored line

leftElement -The element to the left of the list

  • Avatar
  • Checkbox
  • Icon
  • Image
  • Progress

rightElement - The element to the right of the list

  • Amount Control
  • Badge
  • Button
  • Checkbox
  • Icon
  • Switch
  • Value

Actions:

onPress - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.

swipeable - This property will allow you to add the onPress action. This action will appear (and become pressable) by swiping the list-item to the left or right.

Examples and code snippets 

Simple List

Document image


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

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

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

simple-list (static)
simple-list (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC


Simple list with Dividers

Document image


This example shows only a slight variation from the previous where this example has a solid divider properly configured. You also have the option to configure a transparent divider type too.

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

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

list-w-divider (static)
list-w-divider (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC


List with colored Progress Bars

Document image


This example showcases two additional properties that have been configured, the progress bars and colors. Here we can see how we can use the data along with some expressions to manipulate data to create meaningful list displays.

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

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

progress-list (static)
progress-list (dynamic)
datasources (static)
datasources (dynamic)
|
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC


List with Charts

Document image


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

Pie chart examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

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

pie-chart-list (static)
pie-chart-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.pie-chart-list-dynamic
item:
        type: component.pie-chart
        options:
          chart:
            title:
              text: =@ctx.current.item.title
              verticalAlign: center
            subtitle:
              text: =@ctx.current.item.subtitle
              verticalAlign: center
            width: 100
            height: 100
          legend:
            isHidden: true
          series:
            - data: =@ctx.current.item.data
              layout: pie
              color: =@ctx.current.item.color

Document image


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

Bar chart example: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

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

bar-chart-list (static)
bar-chart-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.finance-charts
# isHorizontal: true
item:
  type: component.bar-chart
  options:
    yAxis:
      max: 2000
      min: 200
    xAxis:
      categories: =@ctx.datasources.finance-charts.x
    series:
      - data: =@ctx.datasources.finance-charts.y
        color: =@ctx.datasources.finance-charts.color


List with Avatars

Document image


This example is ideal for displaying a list of users associated with a single list item.

Examples: See the full example using static data in GitHub.

avatars-list (static)
datasources (static)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    avatars:
      - uri: https://images.unsplash.com/photo-1591084728795-1149f32d9866?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80
        text: ""
      - uri: https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
        text: ""
      - uri: https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
        text: ""
      - uri: https://images.unsplash.com/photo-1548449112-96a38a643324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80
        text: ""


List with left Avatar

Document image


This example showcases the list of items with an avatar to the left.

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

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

left-avatar-list (static)
left-avatar-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: avatar
      text: $substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
      uri: =@ctx.current.item.illustration




List with left Checkboxes

Document image


This example showcases a list with checkboxes to the left. This can be done with preset values or can just be empty for the user to select themselves.

Examples: See the full example using static data in GitHub.  See the e full example using dynamic data in GitHub. 

Specifying initialValue will determine the value when the list is loaded, however, specifying the value presets the value itself. The latter is handy when you want to display details that don't require much intervention from the user or if you wish to make it easier and faster so they only have to review the current selections for instance.

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

left-checkbox-list (static)
left-checkbox-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false




List with the left Icons

Document image


This example displays the use of icons to the left of the list

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

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

left-icon-list (static)
left-icon-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.time & 'minutes for task completion'
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor) = "TRUE" ? 'home' :'car-garage'


List with the left Image

Document image


This example displays a list with a left image to left for visual representation or appeal

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

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

left-image-list (static)
left-image-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: image
      text: =@ctx.current.item.service
      uri: =@ctx.current.item.image


List with left Progress

Document image


This example displays a list with visual progress elements to the left of the list items.

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

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

left-progress-list-dynamic (static)
left-progress-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: progress
      title: Time
      value:  =@ctx.current.item.time/120


Swipeable List (left)

Document image

Document image


This example demonstrates functionality that allows you to perform any of the action components with the context of the relevant list item in mind. We have demonstrated how you can set up a single primary action as well as setting up primary and secondary actions too.

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

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

swipeable-list (static)
swipeable-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: ='$ ' & $number(@ctx.current.item.hourlyRate)
    swipeable:
      left:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning


List with the right Amount Control

Document image

Document image


Examples:

See the full example of amount control options in GitHub. See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

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

amount-control-list (static)
amount-control (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    style:
      isDisabled: =@ctx.current.state.amount = 5
    rightElement:
      element: amount-control
      value: 1
      step: 1
      minimum: 2
      maximum: 5


List with the right Badges

Document image


This example shows badges that are displayed based on a certain input.

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

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

list-badges (static)
list-badges (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: badge
      isHidden: =(@ctx.current.item.materials) = true ? true :false


List with right Buttons

Document image


This example displays a list with actionable buttons.

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

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

list-with-right-button (static)
list-with-right-button (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: button
      title: Press Me
      onPress: 
        type: action.go-back


List with the right Icons

Document image


This example displays the use of 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.

right-icon-list (static)
right-icon-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: icon
      icon: =(@ctx.current.item.materials = true ? 'attachment' :'alert-triangle')


List with the right Switch

Document image


This example displays a list with switches/toggle functionality - based on a certain input.

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

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

switch-list (static)
switch-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    rightElement: 
      element: switch
      initialValue: =(@ctx.current.item.materials = true ? true:false)


List with the right Value

Document image


This example demonstrates the right values on a list populated dynamically based on input. In this example, additional concatenation took place too.

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

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

Swipeable list (right)

Document image

Document image


This example demonstrates functionality that allows you to perform any of the action components with the context of the relevant list item in mind. We have demonstrated how you can set up a single primary action as well as setting up primary and secondary actions too.

Examples:

See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

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

swipable-right-list (static)
swipable-right-list (dynamic)
datasources (static)
datasources (dynamic)
|
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement: 
      element: icon
      icon: =(@ctx.current.item.indoor = "TRUE" ? 'home' :'car-garage')
    rightElement: 
      element: value
      text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
    swipeable:
      right:
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Primary Action
          icon: alarm-bell
          color: primary
          # note that the secondary action is only for demo purposes, you can stop at the primary action
        - onPress: 
            type: action.go-to
            options:
              linkTo: action-list-onPress
          label: Secondary Action
          icon: alert-triangle
          color: warning


List with active Item

This allows 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.

Document image

Document image


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 example using static data in GitHub. See the full example using dynamic data in GitHub. Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

active-item-list (static)
active-item-list (dynamic)
datasources (static)
datasources (dynamic)
|
  children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      data: =@ctx.datasources.repair-services-static
      hasActiveItem: true
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.time & ' mins'
          leftElement: 
            element: image
            text: ''
            uri: =@ctx.current.item.image
          rightElement: 
            element: value
            text: ='$ ' & @ctx.current.item.hourlyRate & ' p/hr'
          onPress: 
            type: action.set-state
            options:
              state: =@ctx.solution.state.hasActiveItem
              value: true


List with Sections

Document image


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

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

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

section-list (static)
section-list (dynamic)
datasources (static)
datasources (dynamic)
|
 children:
  - type: component.list
    options:
      sections:
      - title: Services incl Materials
        data: =@ctx.datasources.repair-services-static[materials=true]
      - title: Services excl Materials
        data: =@ctx.datasources.repair-services-static[materials=false]
        
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.description
          label:
            title: =@ctx.current.item.time & ' mins'


See also

  • Developer reference
    • component.list-item
    • list
    • jig.listjig.list
    • list
  • Related examples (Github)



Updated 19 Sep 2023
Did this page help you?
PREVIOUS
list
NEXT
product-item
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Simple List
Simple list with Dividers
List with colored Progress Bars
List with Charts
List with Avatars
List with left Avatar
List with left Checkboxes
List with the left Icons
List with the left Image
List with left Progress
Swipeable List (left)
List with the right Amount Control
List with the right Badges
List with right Buttons
List with the right Icons
List with the right Switch
List with the right Value
Swipeable list (right)
List with active Item
List with Sections
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service