Jig Types
jig.default

6min
Type jig.default is the most versatile 
﻿ allowing you to create a 
﻿ with various setup options such as: 
A form﻿﻿
A list﻿﻿
The 
﻿ which can be a part of the jig.composite﻿ 
Used with a combination of different components and actions.
﻿
Jig Default Preview
﻿
Configuration options
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.
Other options
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.
﻿Examples and code snippets ﻿
﻿
Jig.default as a Form
Form jig
﻿
Examples:
See the full default-form.jigx code example in GitHub. 
Datasource:
See the full datasource code example for dynamic data in GitHub.
﻿
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] 
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
﻿
Examples:
See the full code sample with static data in GitHub.
See the full code sample with dynamic data in GitHub.
﻿
Datasource:
See the full code sample for datasource for static data in GitHub.
See the full datasource code samples for dynamic data for product and sales in GitHub.
﻿
Using the code below requires data in the database, the jigx.sample solution has the data provided for products. You can use the products.csv file in GitHub and upload it via the Data﻿ configuration in 
﻿.
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'
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
﻿
Examples:
See the full code sample with static data in GiltHub. See the full code sample with dynamic data in GitHub. 
Datasource:
See the full datasource code sample for static data in GitHub. 
See the full datasource code samples for dynamic data in GitHub. 
Using the code below requires data in the database, the jigx.sample solution has the data provided for employees. You can use the employee.csv file in GitHub and upload it via the Data﻿ configuration in 
﻿.
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]
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
﻿
﻿
﻿
Examples:
See full code sample with static data in GitHub. 
See full code sample with dynamic data in GitHub.
Datasource:
See the full datasource code sample for static data in GitHub.
See the full datasource code sample for dynamic data in GitHub.
Using the code below requires data in the database, the jigx.sample solution has the data provided for products. You can use the products.csv file in GitHub and upload it via the Data﻿ configuration in 
﻿.
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
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
﻿
See also
﻿Jigs (screens)﻿﻿
﻿Related examples (Github)﻿
﻿
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.