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.
- As a normal list (this is the main type - refer to the list-item component section for unique formatting options)
Other options | |
|---|---|
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 only be used with vertical 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. |
isSelecatable | When set to true the abililty 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. |
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. |
State configuration | Key | Notes |
|---|---|---|
activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value | ||
amount checked |
| |
activeItemId now |
|
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.
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 static data 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 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 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.
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.
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 .
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 will be displayed.
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 for static 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 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 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 items contained in a card (styling)
This example use the isContained property set to true to style each item by wrapping it in a card.
Examples: See the full example in GitHub.
