website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components

list

10min

This component is very similar to the List J; seeith the only exception that this is a list component that you use on a jig.default with other items, whereas the jig.list is a Jig dedicated to a list only. With this component, you can typically combine a list with other components.

List item

Product item

Stage

As far as the functionality goes, the same list options are available as with the List Jig where the list itself can either be a list of values with list items or it can be one of the following:

  1. List item
  2. Bar charts
  3. Expander
  4. Pie charts
  5. Product item
  6. Stage

This functionality is similar to the List Jig, with two exceptions. A List Jig is dedicated to a list display only, whereas a list on a Default Jig can be combined with other components. Another difference is that List Jigs automatically display lists on the widget, which is not the case with lists on a Default Jig.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core Structure

Details

data

The items you want to show in the list

maximumItemsToRender

The number of items you would like to display in your list

item

There is a list of components available to use:

  • list-item
  • bar-chart
  • expander
  • pie-chart
  • product-item
  • stage

If you are using the list component in jig.composite maximum of displayed items is 8. If you set the maximumItemsToRender to a higher number, the rest of the list will display after clicking on the 'Show more' option.

Other options

Details

isSearchable

The boolean value which allows you to add a search bar on the top of your list

isHorizontal

The boolean value that transforms the list into a horizontal one

filter

Allows you to create lists filtered by a key/value

onShowMorePress

Action to be performed when you press on the show more button. This is type: action.go-to with a linkTo: option.

List functionality 

List with Search functionality

Document image


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 example using static data in GitHub. See the full example using dynamic data in GitHub.

By design, search functionality is automatically disabled when using it on a Composite Jig

Datasource:

See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

search (static)
search (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: cleaning_serv_items
    options:
      data: =$filter(@ctx.datasources.repair-services-static, function($v){$contains($string($v.service),$string(@ctx.components.cleaning_serv_items.state.searchText != null ? @ctx.components.cleaning_serv_items.state.searchText:''))})[]
      isSearchable: true
      maximumItemsToRender: 50
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.description


List with Filter functionality

Document image


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 example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

filter-label (static)
filter-label (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      # data: =$filter(@ctx.datasources.cleaning-services-static, function($v, $a, $i) { @ctx.components.filter-list.state.filter = 'all' or $v.status = @ctx.components.filter-list.state.filter })[]        
      data: =$filter(@ctx.datasources.cleaning-services-static, function($v){$contains($string($v.status), $string(@ctx.components.filter-list.state.filter != null ? @ctx.components.filter-list.state.filter:'')) })[]
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          label:
            title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
          leftElement: 
            element: avatar
            text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
            uri: =@ctx.current.item.image


List with Search and Filter functionality

Document image


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 example using static data in GitHub. See the full example using dynamic data in GitHub.

By design, search functionality is automatically disabled when using it on a Composite Jig.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

search-filter (static)
search-filter (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.list
    instanceId: search-filter-list
    options:
      filter: 
        - title: All
          value: ''
        - title: Indoor
          value: indoor
        - title: Outdoor
          value: outdoor
      isSearchable: true
      data: =$filter($filter(@ctx.datasources.cleaning-services-static, function($v){$contains($string($v.service),$string(@ctx.components.search-filter-list.state.searchText != null ? @ctx.components.search-filter-list.state.searchText:'')) }), function($v){$contains($string($v.status), $string(@ctx.components.search-filter-list.state.filter != null ? @ctx.components.search-filter-list.state.filter:'')) })[]                                                                                                                                                                                                
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.area
          label:
            title: =(@ctx.current.item.status = "indoor" ? 'Indoor' :'Outdoor')
          leftElement: 
            element: avatar
            text: =$substring($substringBefore(@ctx.current.item.service, " "), 1, 1) & $substring($substringAfter(@ctx.current.item.service, " ") , 1, 1)
            uri: =@ctx.current.item.image


Horizontal list

Document image


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 or like in this case where it can be combined with other components on a Default Jig

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

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

horizontal-list (static)
horizontal-list (dynamic)
datasources (static)
datasources (dynamic)
|
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      isHorizontal: true
      isHorizontalScrollIndicatorHidden: false
      data: =@ctx.datasources.repair-services-static
      item: 
        type: component.list-item
        options:
          title: =@ctx.current.item.service
          subtitle: =@ctx.current.item.time & ' mins'
          divider: solid
          horizontalItemSize: large
          leftElement: 
            element: image
            text: ''
            uri: =@ctx.current.item.image


See also

  • Developer reference
  • Related examples (Github)



Updated 19 Sep 2023
Did this page help you?
PREVIOUS
interactive-image-item
NEXT
list-item
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Core Structure
Other options
List functionality
List with Search functionality
List with Filter functionality
List with Search and Filter functionality
Horizontal list
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service