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
default.jigx is the database where the Dynamic Data table is defined.
sqlite datasource calls the Dynamic Data provider, using an SQL query to return the data.
jig.list is the type of jig we will use to list the data.
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.
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
