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.
- This 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 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.
The jig.list can be configured in the following ways within the :
- As a normal list (this is the main type - refer to the list-item component section for unique formatting options)
Other 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 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, when opening the the default filter tab 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:
For true/false values that are saved as boolean ensure the filter has a boolean value. For true/false values that are saved as string ensure the filter has a string value. |
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:
|
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.
Ratings can set up in the following ways:
|
rightElement | Set an element to the right of the list. The following elements are available:
|
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.
Tags can be set up in three ways:
|
State configuration | Key | Notes |
|---|---|---|
=@ctx.jig.state. | activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value |
|
=@ctx.current.state. | amount checked |
|
=@ctx.solution.state. | activeItemId now |
|
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.
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.
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.
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.
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.
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 .
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.
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.
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 will be displayed.
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.
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
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.
In this example, there are three tabs to filter on. By default we want the 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.
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.
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.
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.
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.
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.
Create a product review 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.
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.
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.
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.
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.
