Widgets

list

9min

 Whenever a list  is configured either in the jig.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  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  that is not a list , such as a jig.default. This is primarily where the list widget is used. 
List widgets
﻿
List widgets
﻿
﻿Configuration options﻿
A list widget can be used on any type of , i.e. list, default, composite, calendar and document.
Core options
﻿
item 
The item property includes the setup options of:
﻿Stage﻿
﻿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  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 titles 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 titles 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  . The purpose of using this widget is to customize what shows in the widget on the  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  , for example, [email protected] or [email protected].
Core options
﻿
item
The item property includes the setup options of:
﻿bar-chart﻿﻿
﻿expander﻿﻿
﻿Stage﻿
﻿Product-item﻿
﻿List-item﻿
﻿pie-chart﻿﻿
﻿Examples and code snippets ﻿
2x2 list
﻿
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)
list-widget (dynamic)
data: [email protected]-services-dynamic
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
data: =@ctx.datasources.cleaning-services-dynamic
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.area
﻿
2x2 list with avatar
﻿
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)
list-with-left-element (dynamic)
data: [email protected]-services-static
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false
data: =@ctx.datasources.repair-services-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    leftElement:
      element: checkbox
      initialValue: =(@ctx.current.item.materials) = true ? true :false
﻿
2 stage list widget
﻿
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)
stage-list-widget (dynamic)
widgets:
  2x2:
    type: widget.list
    options:
      data: [email protected]-schedule-static
      item: 
        type: component.stage
        options:
          icon: plane-2
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected]
widgets:
  2x2:
    type: widget.list
    options:
      data: =@ctx.datasources.flight-schedule-static
      item: 
        type: component.stage
        options:
          icon: plane-2
          right:
            title: =@ctx.current.item.toabrv
            subtitle: =@ctx.current.item.to
          left:
            title: =@ctx.current.item.fromabrv
            subtitle: =@ctx.current.item.from
﻿
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) 
list-product-widget (dynamic)
widgets:
  2x2:
    type: widget.list
    options:
      data: [email protected]-dynamic
      item:
        type: component.product-item
        options:
          title: [email protected]
          image: 
            uri: [email protected]
          price:
            value: [email protected]
            format:
              numberStyle: currency
widgets:
  2x2:
    type: widget.list
    options:
      data: =@ctx.datasources.products-dynamic
      item:
        type: component.product-item
        options:
          title: =@ctx.current.item.title
          image: 
            uri: =@ctx.current.item.uri
          price:
            value: =@ctx.current.item.price
            format:
              numberStyle: currency
﻿
2x2 list-item basic widget
﻿
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. 
list-items-widget (static)
list-items-widget (dynamic)
widgets:
  2x2:
    type: widget.list
    options:
      data: [email protected]-data-dynamic
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          label:
            title: [email protected]
          divider: solid
          leftElement: 
            element: avatar
            text: ''
            uri: [email protected]
widgets:
  2x2:
    type: widget.list
    options:
      data: =@ctx.datasources.calendar-data-dynamic
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.title
          subtitle: =@ctx.current.item.location
          label:
            title: =@ctx.current.item.title
          divider: solid
          leftElement: 
            element: avatar
            text: ''
            uri: =@ctx.current.item.avatar
﻿
Extended list widget
﻿
This example shows how the Extend List Widget reuses the data from a single jig.list to customize the widget's appearance on the . In the image above:
 The first widget is the default 2x2 widget that is automatically displayed. 
The second widget is a 2x4 using the Extend List widget to only show the titles in the list.
The third widget is a 4x2 using the Extend List Widget with a component.stage configuration. 
The fouth widget is a 4x4 using the Extend List Widget to show a customized leftElement and RightElement.
extended-list-widget (2x4)
extended-list-widget (4x2)
extended-list-widget (4x4)
datasource (static)
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]-text
      uri: [email protected]
    rightElement:
      element: icon
      icon: arrow-right

widgets: 
 # "2x2" automatically populates a list on the widget without needing additional configurations      
  "4x4": 
    item: 
      type: component.list-item
      options:
        title: [email protected]
        leftElement: 
          element: avatar
          text: [email protected]
          uri: [email protected]
        rightElement: 
          element: switch
          initialValue: " "
data: =@ctx.datasources.users
item:
  type: component.list-item
  options:
    divider: solid
    title: =@ctx.current.item.title
    subtitle: =@ctx.current.item.subtitle
    description: =@ctx.current.item.description
    leftElement:
      element: avatar
      text: =@ctx.current.item.avatar-text
      uri: =@ctx.current.item.avatar
    rightElement:
      element: icon
      icon: arrow-right

widgets: 
 # "2x2" automatically populates a list on the widget without needing additional configurations      
  "4x4": 
    item: 
      type: component.list-item
      options:
        title: =@ctx.current.item.title
        leftElement: 
          element: avatar
          text: =@ctx.current.item.avatar
          uri: =@ctx.current.item.avatar
        rightElement: 
          element: switch
          initialValue: " "
﻿
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﻿﻿
﻿

Core options
item	The item property includes the setup options of: Stage 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 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 titles 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 titles 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.