Jig Types
jig.default
5min
Type jig.default allows you to create a with various setup options:
- Combination of different components and actions

Jig Default Preview
The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution.
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: =@ctx.datasources.employee-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: =@ctx.datasources.employee-detail-dynamic.birthdate - type: component.entity-field options: label: Gender value: =@ctx.datasources.employee-detail-dynamic.gender - type: component.field-row options: children: - type: component.entity-field options: label: Email value: =@ctx.datasources.employee-detail-dynamic.email contentType: email - type: component.entity-field options: label: Phone value: =@ctx.datasources.employee-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: =@ctx.datasources.employee-detail-dynamic.street - type: component.entity-field options: label: City value: =@ctx.datasources.employee-detail-dynamic.city - type: component.field-row options: children: - type: component.entity-field options: label: State value: =@ctx.datasources.employee-detail-dynamic.state - type: component.entity-field options: label: Country value: =@ctx.datasources.employee-detail-dynamic.country - type: component.list options: data: =@ctx.datasources.quartal isHorizontal: true item: type: component.pie-chart options: chart: title: text: =@ctx.current.item.title verticalAlign: center subtitle: text: =@ctx.current.item.subtitle verticalAlign: center width: 140 height: 140 isAnimated: true legend: isHidden: true series: - data: =@ctx.current.item.data

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: =@ctx.datasources.product-detail-dynamic.title subtitle: =@ctx.datasources.product-detail-dynamic.price source: uri: =@ctx.datasources.product-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: =@ctx.datasources.product-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: =@ctx.datasources.product-detail-dynamic.bluetooth-detail - type: component.section options: title: Fast, Precise Tracking children: - type: component.entity-field options: label: "" isMultiline: true value: =@ctx.datasources.product-detail-dynamic.precise-detail - type: component.section options: title: Rechargeable Type-C Port children: - type: component.entity-field options: label: "" isMultiline: true value: =@ctx.datasources.product-detail-dynamic.recharge-detail - type: component.section options: title: Modern, Ergonomic Design children: - type: component.entity-field options: label: "" isMultiline: true value: =@ctx.datasources.product-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: =@ctx.datasources.product-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: =@ctx.datasources.product-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: =@ctx.datasources.product-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: =@ctx.datasources.product-detail-dynamic.shipping-detail



Updated 19 Sep 2023
Did this page help you?