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 ﻿
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﻿.
﻿
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
name: form
title: default form
category: business

tabs:
  home:
    jigId: defaut-form
    icon: home-apps-logo
name: form
title: default form
category: business

tabs:
  home:
    jigId: defaut-form
    icon: home-apps-logo
﻿
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'
﻿
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: =@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
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
name: default-product-detail
title: default form
category: business

tabs:
  home:
    jigId: defaut-product-detail-dynamic
    icon: home-apps-logo
name: default-product-detail
title: default form
category: business

tabs:
  home:
    jigId: defaut-product-detail-dynamic
    icon: home-apps-logo
﻿
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.