Components
list

list-item

18min

The list-item component serves as the child component whenever any list-related item has been called, as discussed in the jig.list and list sections. The component determines how the list items are returned, allowing you to customize the data returned and add UI elements to the lists.

Configuration options

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



Core structure



title

Add a title for the list-item. You can use an expression and datasource to set the title. The title must fit the line, as the text will not wrap to the next line.

Other options



color

The color of the list item changes based on conditions. The first evaluating to true will be used.

description

The subtitle or description should be displayed with the list-item title. You can format the text of these properties if you select the "Text With Format" option in the builder help (ctrl + space).

divider

Set the space between two items in the list.

  • none - No divider is shown between items. Set by default.
  • transparent - Sets a 1pt margin between two items.
  • solid - Displays a colored line between two items. When the list-item is contained in a card, this property will be ignored.

isContained

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

leftElement

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

  • avatar
  • checkbox
  • icon
  • image
  • progress

progress

Add a colorful visualization (background color of your choice) of the list item's progress. The color displays from left to right, and the range of the allowed values is from 0 to 1.

rightElement

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

  • amountControl
  • badge - can be a solid colored badge or a badge with a number in it. Badges always use the primary color.
  • button
  • checkbox
  • icon
  • switch
  • value

rating

Displays a rating as either a numerical value or a percentage. This property is highly flexible, with options to configure the ratingIcon, color, and accompanying descriptive text. By default, the rating property has only one icon showing a rating-star in the primary color.

  • value- Rating with numerical value.
    • The value of the rating, which can be a simple number.
    • The number of icons is calculated based on this value unless overridden in the icon configuration.
    • Configuring the current and maximum values, shows the value as a fraction, for example 7/10.
  • percentage - Rating with a percentage. The percentage value for the rating, where the value ranges between 0 and 1, for example 0.75 is 75%.
  • ratingIcon - By default the rating-star icon in the primary color is displayed.
    • icon - Add an icon to represent the rating. A list of icons is available. See Jigx icons for more information.
    • color- Sets the color of the icon, choose a color from the provided color palette. Default color is primary if the property is not specified in the YAML. See the list of available colors in Jigx color palette.
    • current and maximum values - Where maximum is the number of icons to display and current the number of icons to color.
  • text - Add a descriptive text that displays next to the rating.

Ratings can set up in the following ways:

  1. Example of value for a product rating: rating: value: 4.5 text: based on 1,200 reviews
  2. Example of a user rating shown in a percentage: rating: percentage: 0.75 text: expectations exceeded
  3. Example of value rating showing 2.5/5 as a rating with single star icon: rating: value: current: 2.5 maximum: 5 ratingIcon: icon: rating-star

subtitle

The subtitle or description should be displayed together with the title on the list-item. You can format the text of these properties if you select the Text With Format option in the IntelliSense (ctrl + space).

tags

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

  • text - The text content displayed within the tag.
  • color - Sets the color of the tags, choose a color from the provided color palette. The default is primary. See the list of available colors in Jigx color palette.

Tags can be set up in three ways:

  1. Using a dynamic expression from a datasource: tags: =@ctx.datasources.product-tags[product = @ctx.current.item.id].{"text":tags, "color":color}
  2. Using a dynamic expression from a list item: tags: =@ctx.current.item.tags.{"text":$, "color":"primary"}
  3. Using static, predefined tags tags: - text: =@ctx.current.item.rating > 0.75 ? 'Great' color: positive - text: =@ctx.current.item.rating >= 0.5 ? 'Good' color: warning - text: =@ctx.current.item.rating < 0.5 ? 'Bad' color: negative

Actions



onPress

The action is available with the swipeable action and is triggered when pressing an item in the list. Use IntelliSense (ctrl+space) to see the list of available actions.

swipeable

Use the swipeable property to add the onPress action. The action will appear and become pressable by swiping the list-item to the left or right.

State Configuration

Key

Notes

=@ctx.current.state.

amount checked

  • Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The =@ctx.current.state is the state of the current object in the array.

=@ctx.component.state.

amount checked

  • State is the variable of the component.

=@ctx.solution.state.

activeItemId now

  • Global state variable that can be used throughout the solution.

Examples and code snippets 

Simple list
Simple list


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

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

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

simple-list (static)
simple-list (dynamic)
datasources (static)
datasources (dynamic)

Simple list Simple list with dividers
Simple list with dividers


This example shows only a slight variation from the previous example, by having a divider : solid properly configured.

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

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

list-w-divider (static)
list-w-divider (dynamic)
datasources (static)
datasources (dynamic)

List with colored progress
List with colored progress


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

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

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

progress-list (static)
progress-list (dynamic)
datasources (static)
datasources (dynamic)

List with pie charts
List with pie charts


This example shows pie charts displayed on a list - this is great for a visual representation of information.

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

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

pie-chart-list (static)
pie-chart-list (dynamic)
datasources (static)
datasources (dynamic)

List with bar charts
List with bar charts


This example shows bar charts displayed on a list as a visual representation of information.

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

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

bar-chart-list (static)
bar-chart-list (dynamic)
datasources (static)
datasources (dynamic)

List with avatars
List with avatars


This example shows a list of avatars grouped by titles and returns all avatars in the array. In this example, the static datasource has been configured to use the uri and text properties that are required for avatars in a list. This makes it easy to configure in the by simply using the expression: avatars: =@ctx.current.item.people

The following expression can be used if your datasource uses different names for uri and text, for example: avatars: =@ctx.current.item.people.{"text":name,"uri":image}[]

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

list-avatars (static)
datasources (static)

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


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

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

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

left-avatar-list (static)
left-avatar-list (dynamic)
datasources (static)
datasources (dynamic)




List with checkboxes
List with checkboxes


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

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

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

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

left-checkbox-list (static)
left-checkbox-list (dynamic)
datasources (static)
datasources (dynamic)

List with icons
List with icons


This example displays icons to the left of the list.

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

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

left-icon-list (static)
left-icon-list (dynamic)
datasources (static)
datasources (dynamic)

List with image
List with image


This example displays a list with an image to left of the list-item for visual representation.

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

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

left-image-list (static)
left-image-list (dynamic)
datasources (static)
datasources (dynamic)

List with progress
List with progress


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

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

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

left-progress-list-dynamic (static)
left-progress-list (dynamic)
datasources (static)
datasources (dynamic)

Swipeable list
swipeable list

Swipeable list
Swipeable list


This example shows using the swipeable action to access the onPress action as well as setting up a primary and secondary action.

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

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

swipeable-list (static)
swipeable-list (dynamic)
datasources (static)
datasources (dynamic)

List with amountControl
List with amountControl

List with amountControl
List with amountControl


Examples:

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

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

amount-control-list (static)
amount-control (dynamic)
datasources (static)
datasources (dynamic)

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


This example shows badges that are displayed based on a certain input. Badges always use the primary color. You cannot change the color of the badge.

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

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

list-badges (static)
list-badges (dynamic)
datasources (static)
datasources (dynamic)


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

Examples: See the example in GitHub.

List-item with numbered badge
List-item with numbered badge

default-w-number-badge-list.jigx
datasource




List-item with button
List-item with button


This example shows a list with actionable buttons.

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

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

list-with-right-button (static)
list-with-right-button (dynamic)
datasources (static)
datasources (dynamic)

List-item with right icons
List-item with icons


This example shows icons to the right of the list-items.

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

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

right-icon-list (static)
right-icon-list (dynamic)
datasources (static)
datasources (dynamic)

List-item with switch
List-item with switch


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

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

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

switch-list (static)
switch-list (dynamic)
datasources (static)
datasources (dynamic)

List-item with right values
List-item with right values


This example shows the right values on a list populated dynamically based on input, and additional configuration using expressions were used to concatenate values.

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

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

list-with-right-elements (static)
list-with-right-elements (dynamic)
datasource (static)
datasource (dynamic)

Swipeable list-item
Swipeable list-item

Swipeable list-item
Swipeable list-item


This example shows the swipeable action configured to swipe right for each list-item. We show how to set up a primary and secondary action.

Examples:

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

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

swipable-right-list (static)
swipable-right-list (dynamic)
datasources (static)
datasources (dynamic)


This allows you to see when you are interacting with a specific list-item. Whilst interacting, the list item changes slightly making it clear which item you are interacting with.

List with active item
List with active item

List with active item
List with active item


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

active-item-list (static)
active-item-list (dynamic)
datasources (static)
datasources (dynamic)

List with sections
List with sections


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

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

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

section-list (static)
section-list (dynamic)
datasources (static)
datasources (dynamic)


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

Examples: See the full example in GitHub.

List-item in a card
list-item in a card

list-item-contained.jigx


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 rating - value
List-item with rating - value

list-item-rating-value.jigx
cleaning-services-static (datasource)


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

Examples: See the full example in GitHub.





List-item with percentage rating
List-item with percentage rating

list-with-rating-percentage.jigx
control-stats (datasource


This example sets up a product review that displays:

  • A rating as a percentage.
  • An icon and color customized to represent the rating percentage visually.
  • A styled list where each item is displayed within a card format, achieved by enabling the isContained property.
  • A verified label placed on the right side of the item.
  • A product image shown as an avatar on the left side.

Examples: See the full example in GitHub.





List-item with customized percentage rating
List-item with customized percentage rating

list-item-rating-percentage-max.jigx
product-review.jigx
product-users.jigx


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

  • A styled list where each item is displayed within a card format, achieved by enabling the isContained property.
  • The tags show the assigned team, priority, and status.
  • A product image shown as an avatar on the left side.

Examples: See the full example in GitHub.





List-item with multiple tags
List-item with multiple tags

list-with-tags-multiple.jigx
datasource


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-item with rating, tags & badges
List-item with rating, tags & badges

list-with-tags-rating.jigx
cleaning-services-dynamic.jigx


See also



Updated 07 Nov 2024
Doc contributor
Did this page help you?
Yes
No