list

Whenever a list jig is configured either in the list , or list-item component, the list is automatically populated on the surface of the widget without needing additional configuration. There is also the option to extend the list widget by using the Extend List Widget property, which reuses the list jig configuration and its data to extend or override some of the properties in the widget. The item data is called from [email protected].

There are, instances when you want to create a list widget on a jig that is not a list jig, such as a jig.default. This is primarily where the list widget is used.

List widgets

Configuration options

A list widget can be used on any type of jig, i.e. list, default, composite, calendar and document.

Core options
item	The item property includes the setup options of: Product-item List-item

Other options
badge	Add a badge to the list 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 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.
bottom	The component will be added to the bottom of the widget.
data	Provide the datasource for the list. For example: data: [email protected]
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
placeholders	Specify a placeholder text to display if there is no data, for example - title: No data to display.
top	The component will be added to the top of the widget.

State Configuration	Key	Notes
[email protected].	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.
[email protected].	amount checked	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.

Configuration options for extended list widget

The Extended List Widget can only be used on a list jig . The purpose of using this widget is to customize what shows in the widget on the Home Hub rather than showing its automatic list display. The Extended List Widget must be configured with a size 2x2 or greater. Reuse the data in the list jig , for example, [email protected] or [email protected].

Core options
item	The item property includes the setup options of: expander Stage Product-item List-item pie-chart

Examples and code snippets

Automatic widget display because of list jig type (Simple)

Automatic list widget

When using a jig.list and any size widget larger than 1x1 the list will automatically be displayed without additional configurations. This is visible in this example.

In this example, the list on the widget is the same as the jig.list once the widget has been accessed.

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

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

list-widget (Static)

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]

list-widget (dynamic)

grid-item

Automatic widget display because of list jig type (UI elements)

When using a jig.list and any size widget larger than 1x1 the list will automatically be displayed without additional configurations.

In this example, the list on the widget is exactly the same as the jig.list once the widget has been accessed.

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

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

list-with-left-element (static)

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false

list-with-left-element (dynamic)

grid-item

List widget with stage component items

This example is for list items that have a left and right element and shows a start-and-end. An example of this is flight schedules, however, this can be used for many different use cases as you can choose a different icon. Here a slightly different setup is used to that in the actual list to show you the widget configuration.

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

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

stage-list-widget (static)

widgets:
  stageStatic-2x2:
    type: widget.list
    options:
      data: [email protected]
      item: 
        type: component.stage
        options:
          icon: plane-1
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected]

stage-list-widget (dynamic)

grid-item

List widget with product items

2x2 product- item list widget

This example shows product items with their images and respective prices.

Examples: See the complete example using static data in GitHub See the complete example using dynamic data in GitHub

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

list-product-widget (static)

widgets:
  productStatic-2x2:
    type: widget.list
    options:
      data: [email protected]
      item:
        type: component.product-item
        options:
          title: [email protected]
          image: 
            uri: [email protected]
          price:
            value: [email protected]
            format:
              numberStyle: currency

list-product-widget (dynamic)

grid-item

List widget with list items

This example shows a basic component.list-item setup.

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

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

2x2 list-item basic widget

list-items-widget (static)

widgets:
  listitemStatic-2x2:
    type: widget.list
    options:
      data: [email protected]
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]

list-items-widget (dynamic)

grid-item

Extended list widget 2x4, 4x2, 4x4

Extended widgets

This example shows how the Extend List Widget reuses the data from a single jig.list to customize the widget's appearance. In the image above:

1. The first widget is the default 2x2 widget that is automatically displayed.

2. The second widget is a 2x4 using the Extend List widget to only show the titles in the list.

3. The third widget is a 4x2 using the Extend List Widget with a component.stage configuration.

4. The fourth widget is a 4x4 using the Extend List Widget to show a customized leftElement and RightElement.

extended-list-widget (2x4)

data: [email protected]
item:
  type: component.list-item
  options:
    divider: solid
    title: [email protected]
    subtitle: [email protected]
    description: [email protected]
    leftElement:
      element: avatar
      text: [email protected]
      uri: [email protected]
    rightElement:
      element: icon
      icon: arrow-right

widgets:
 # "2x2" automatically populates a list on the widget without needing additional configurations 
  extend-2x4: 
    item: 
      type: component.list-item
      options:
        title: [email protected]

extended-list-widget (4x2)

extended-list-widget (4x4)

datasource (static)

datasources:
  users:
    type: datasource.static
    options:
      data:
        - title: John
          subtitle: Manager
          description: HR
          avatar-text: N/A
          avatar: https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80
        - title: Mary
          subtitle: Accountant
          description: Finance
          avatar-text: N/A
          avatar: https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80
        - title: Paul
          subtitle: Auditor
          description: External
          avatar-text: N/A
          avatar: https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80
        - title: Bob
          subtitle: Accountant
          description: Finance
          avatar-text: N/A
          avatar: https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bWVuJTIwYXZhdGFyc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60
        - title: Jane
          subtitle: HR specialist
          description: HR
          avatar-text: N/A
          avatar: https://images.unsplash.com/photo-1678346496584-e81410d1e697?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60
        - title: Fiona
          subtitle: Data capturer
          description: Finance
          avatar-text: N/A
          avatar: https://plus.unsplash.com/premium_photo-1690407617686-d449aa2aad3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8d29tYW4lMjBhdmF0YXJzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60
     

grid-item

Group list widgets

See the following examples under groups:

• Group with chart and list (size: 4x4, split: horizontal)

• Group with chart and list (size: 4x4, split: vertical)

• Group with avatar and list (size: 4x2)

• Group with value and bar-chart (size: 2x4)

See also

• State