Reading Dynamic Data

In this example, we read the employee data records we created in the employee Dynamic Data table (Creating Dynamic Data), to create a list of the employees and their details.

Datasources, jig & component

1. default.jigx is the database where the Dynamic Data table is defined.

2. sqlite datasource calls the Dynamic Data provider, using an SQL query to return the data.

3. jig.list is the type of jig we will use to list the data.

4. expander component to show the Dynamic Data in.

Examples and code snippets

This example uses the Dynamic Data table, columns, and data records created in the Creating Dynamic Data example to create a list of employees with their details.

Reading Dynamic Data

Here is what the data table employee resembles in Data in Jigx Management.

Employee Dynamic Data

list-employees.jigx

title: Employee list
type: jig.list
icon: list-stars

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1531545514256-b1400bc00f31?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
# Use onfocus action to sync the data from the provider everytime the jig is opened
onFocus:
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.sync-entities
        options:
          # The dynamic provider has the employee table and records that must sync when the jig is opened
          provider: DATA_PROVIDER_DYNAMIC
          entities:
            - default/employee

datasources:
  my-employees:
    # Use the SQLite data source to write a select query to return the exact data from the solution's Dynamic Data employee table to be used in the jig
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC

      entities:
        - default/employee

      query: SELECT
        id,
        '$.first_name',
        '$.last_name',
        '$.job_title',
        '$.email',
        '$.start_date',
        '$.department',
        '$.contact'
        FROM
        [default/employee]

# Reference the datasource above to use as the data in the expander component
data: [email protected]
item:
  type: component.expander
  options:
    header:
      centerElement:
        type: component.titles
        options:
          # expressions are used to combine data from two columns to show in the list
          title: =(@ctx.current.item.first_name & ' ' & @ctx.current.item.last_name)
          subtitle: [email protected]_title
          icon: person

    children:
      - type: component.entity
        options:
          children:
            - type: component.entity-field
              options:
                label: Position
                value: [email protected]_title
            - type: component.entity-field
              options:
                label: Department
                value: [email protected]
            - type: component.entity-field
              options:
                label: Contact
                value: [email protected]
                contentType: phone
            - type: component.entity-field
              options:
                label: Email
                value: [email protected]
                contentType: email

default.jigx

index.jigx