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.
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.listcomponent 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 ajig.defaultwhere the list component is configured along with other content or components.When using the
valueproperty 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
emptyvalue.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 thecolor,size,text,uri, andonPressevent.checkboxicon- the iconsize,color,shape,type,isSubtle(low opacity), andonPressevent is configurable.image- the imagesize,shape,resizeMode, andonPressevent 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:
amountControlbadge- can be a solid colored badge or a badge with a number in it. Badges always use the primary color.buttoncheckboxicon- the iconsize,color,shape,type,isSubtle(low opacity), andonPressevent is configurable.switchvalue- When usingtext, the option to change itscoloris 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 tagstags: - 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.
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
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.
Best Practice
When using a filter
Use simple, semantic values for filters - Instead of using complex date objects or calculated values directly in your
filterconfiguration, use simple, semantic string values that clearly represent the user's intent.
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
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.
Lists with styles
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 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 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.
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.
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 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 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 Pie Charts
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
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.
Horizontal lists cannot be used with the section component as an empty white jig will be displaye
Lists with Search functionality
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.
Lists with Filter functionality
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.
Lists with Search and Filter functionality
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.
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.
Selectable lists
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.
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 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.
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 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 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 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 ratings with a percentage, minimum, maximum and icon
This example sets up a product review jig that displays:
A
ratingas a percentage.An
iconandcolorcustomized to represent the rating percentage visually.A styled list where each item is displayed within a card format, achieved by enabling the
isContainedproperty.A verified
labelplaced on the right side of the item.A product image shown as an
avataron the left side.
Examples: See the full example in GitHub.
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
isContainedproperty.The
tagsshow the assigned team, priority, and status.A product image shown as an
avataron the left side.
Examples: See the full example in GitHub.
List with ratings and tags
This example show a list of cleaning services that displays:
A
ratingas avalue.An
iconandcolorcustomized to represent the rating value visually.Multiple
tagsshowing the hourly rate and cleaning area category.A styled list where each item is displayed within a card format, achieved by enabling the
isContainedproperty.A numbered
badgein therightElementof the item shows the number of services available.
Examples: See the full example in GitHub.
See also
Last updated
Was this helpful?