Jig Types
jig.default
6min
Type jig.default is the most versatile allowing you to create a with various setup options such as:
- Used with a combination of different components and actions.
Jig Default Preview
Core structure | |
children | Add the UI elements (Components) under the children property, for example, component.form. Use Intellisense (ctrl+space) to select a component from the available list. |
title | Provide the name of the screen. If you do not want to show a title in a use title: ' ' or add an expression. |
The jig.default is the most versatile available allowing you to create a variety of screens. Many options are available for configuration on this , see jig-default-specification for a list of the additional options.
Jig.default as a Form
Form jig
default-form.jigx
datasources
default.jigx
index.jigx
datasources:
employees:
type: datasource.sqlite
options:
provider: DATA_PROVIDER_DYNAMIC
entities:
- entity: default/employees
query: |
SELECT
id
FROM [default/employees]
Jig.default as a List
Default jig as a list
default-list-dynamic.jigx
datasources
default.jigx
datasources:
prods:
type: datasource.sqlite
options:
provider: DATA_PROVIDER_DYNAMIC
entities:
- entity: default/products
query: |
SELECT
id,
'$.title',
'$.uri',
'$.tag',
'$.price',
'$.category',
'$.sale'
FROM [default/products]
WHERE '$.category' = 'product' AND '$.sale' IS NULL
sales:
type: datasource.sqlite
options:
provider: DATA_PROVIDER_DYNAMIC
entities:
- entity: default/products
query: |
SELECT
id,
'$.title',
'$.uri',
'$.tag',
'$.price',
'$.category',
'$.discount',
'$.sale'
FROM [default/products]
WHERE '$.sale' = 'true'
Other examples of jig.default
Employee default jig
employee-detail-dynamic.jigx
datasources
default.jigx
title: Employee detail
type: jig.default
children:
- type: component.avatar
options:
title: ''
uri: [email protected]-detail-dynamic.photo
size: large
align: center
- type: component.entity
options:
children:
- type: component.section
options:
title: Personal information
children:
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Birth date
value: [email protected]-detail-dynamic.birthdate
- type: component.entity-field
options:
label: Gender
value: [email protected]-detail-dynamic.gender
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Email
value: [email protected]-detail-dynamic.email
contentType: email
- type: component.entity-field
options:
label: Phone
value: [email protected]-detail-dynamic.phone
contentType: phone
- type: component.section
options:
title: Address
children:
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Street
value: [email protected]-detail-dynamic.street
- type: component.entity-field
options:
label: City
value: [email protected]-detail-dynamic.city
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: State
value: [email protected]-detail-dynamic.state
- type: component.entity-field
options:
label: Country
value: [email protected]-detail-dynamic.country
- type: component.list
options:
data: [email protected]
isHorizontal: true
item:
type: component.pie-chart
options:
chart:
title:
text: [email protected]
verticalAlign: center
subtitle:
text: [email protected]
verticalAlign: center
width: 140
height: 140
isAnimated: true
legend:
isHidden: true
series:
- data: [email protected]
default-product-detail-dynamic.jigx
datasources
default.jigx
index.jigx
title: Name
type: jig.default
header:
type: component.jig-header
options:
height: medium
children:
type: component.image
options:
title: [email protected]-detail-dynamic.title
subtitle: [email protected]-detail-dynamic.price
source:
uri: [email protected]-detail-dynamic.uri
summary:
children:
type: component.summary
options:
layout: default
title: Add to cart
leftIcon:
element: icon
name: shopping-cart-empty-1
children:
- type: component.entity
options:
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.overview
- type: component.expander
options:
header:
centerElement:
type: component.titles
options:
title: Details
children:
- type: component.entity
options:
children:
- type: component.section
options:
title: Bluetooth 4.0 connection
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.bluetooth-detail
- type: component.section
options:
title: Fast, Precise Tracking
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.precise-detail
- type: component.section
options:
title: Rechargeable Type-C Port
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.recharge-detail
- type: component.section
options:
title: Modern, Ergonomic Design
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.design-detail
- type: component.expander
options:
header:
centerElement:
type: component.titles
options:
title: Tech Specs
children:
- type: component.entity
options:
children:
- type: component.section
options:
title: Compatible Devices
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.compatible-detail
- type: component.entity
options:
children:
- type: component.section
options:
title: Weight
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.weight-detail
- type: component.entity
options:
children:
- type: component.section
options:
title: Guarantee
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.guarantee-detail
- type: component.expander
options:
header:
centerElement:
type: component.titles
options:
title: Shipping & Returns
children:
- type: component.entity
options:
children:
- type: component.entity-field
options:
label: ""
isMultiline: true
value: [email protected]-detail-dynamic.shipping-detail
- Developer Reference
Updated 07 Mar 2024
Did this page help you?