Jig Types
jig.composite

7min
The composite  is a  made up of several parts or elements. In this case, a  is made up of several s. This  allows you to display multiple s on one list where you would otherwise be unable to combine the functionality in the same way. 
Jig Composite Preview
﻿
﻿Configuration options﻿
composite.jigx
title: My leave  
type: jig.composite

children: 
    - jigId: Profile
      when: false # use expression to dynamically define this field
      isTitleHidden: true
    - jigId: leave-form
    - jigId: leave-list
title: My leave  
type: jig.composite

children: 
    - jigId: Profile
      when: false # use expression to dynamically define this field
      isTitleHidden: true
    - jigId: leave-form
    - jigId: leave-list
﻿
Core Structure
﻿
jigId
The core structure includes: jigId 2x or more (depends on how many jigs you are connecting).
Other options
﻿
icon
The icon will be displayed on the widget﻿ of this . Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons﻿ for information on worknig with icons.
inputs
If you are setting up a jig.composite where s rely on input to display or otherwise interact with very specific data, you'll need to use inputs. Here you set the data you would like to transfer to the composite jig. There are 2 options to make data available for input:
Set them in output inside the  .
Set them as a global variable by using set-state action.
isTitleHidden
The boolean value allows you to hide the title of your  in the composite jig. Even if the 's title is set to true , because the title is a mandatory property.
when
The ability to include or exclude a  for display on a composite . If set to true the  is included, if set to false the  will not appear on the composite . Dynamically set this property by using expressions.
Considerations
When calling a  in a composite  for example, jigId: personal-details, you can add an instanceId on the composite . This allows you to interact with the referenced , such as saving or calling a control on the referenced .   If no instanceId exists, IntelliSense cannot show it in the composite  configuration. 
composite.jigx
children:
  - jigId: personal-details
    instanceId: personalDetails
    inputs:
      inputName: My details
  - jigId: work-details
    instanceId: workDetails
  - jigId: employee-details
    instanceId: hrInfo
    
actions:
  - children:
      # you can choose an action to save the data as an object
      - type: action.execute-entity
        options: 
          title: Create my details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/personal
          method: create
          data: [email protected]-details.state.data

     # or

      # you can choose an action to save individual fields    
      - type: action.execute-entity
        options: 
          title: Create my work details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/work
          method: create
          data: 
            employee-position: [email protected]-position.state.value
            employee-startWork: [email protected]-startWork.state.value
                  
      # or

      # you can choose an action to save individual fields from Multiple jigs  
      - type: action.execute-entity
        options: 
          title: Create Employee details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/employees
          method: create
          data: 
            id: [email protected]-id.state.value
            employee-first-name: [email protected]-first-name.state.value   
            employee-surname: [email protected]-surname.state.value
            employee-position: [email protected]-position.state.value
            employee-contract: [email protected]-contract.state.value  
children:
  - jigId: personal-details
    instanceId: personalDetails
    inputs:
      inputName: My details
  - jigId: work-details
    instanceId: workDetails
  - jigId: employee-details
    instanceId: hrInfo
    
actions:
  - children:
      # you can choose an action to save the data as an object
      - type: action.execute-entity
        options: 
          title: Create my details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/personal
          method: create
          data: =@ctx.jigs.personalDetails.components.my-details.state.data

     # or

      # you can choose an action to save individual fields    
      - type: action.execute-entity
        options: 
          title: Create my work details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/work
          method: create
          data: 
            employee-position: =@ctx.jigs.workDetails.components.work-position.state.value
            employee-startWork: =@ctx.jigs.workDetails.components.work-startWork.state.value
                  
      # or

      # you can choose an action to save individual fields from Multiple jigs  
      - type: action.execute-entity
        options: 
          title: Create Employee details
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/employees
          method: create
          data: 
            id: =@ctx.jigs.hrInfo.components.employee-id.state.value
            employee-first-name: =@ctx.jigs.personalDetails.components.my-first-name.state.value   
            employee-surname: =@ctx.jigs.personalDetails.components.my-surname.state.value
            employee-position: =@ctx.jigs.workDetails.components.work-position.state.value
            employee-contract: =@ctx.jigs.hrInfo.components.employee-contract.state.value  
﻿
﻿Examples and code snippets ﻿
﻿
Composite jig
﻿
This example shows the simplest way in which a Composite Jig can be set up - referencing two separate s and displaying them on one without having to filter the content. 
Examples:
See the compsite  code example in GitHub.
See the location code and country list code examples in GitHub.
See the static country datasource code example in GitHub.
See the index.jigx code below to add the  to the .
﻿
composite-jig.jigx
location-with-address.jigx
country-list-sd.jigx
datasources
index.jigx
datasources:
  country-data-static:
    type: datasource.static
    options:
      data:
      - title: Afghanistan
        value: AF
        icon: af
        iconType: flag
      - title: Albania
        value: AL
        icon: al
        iconType: flag
      - title: Algeria
        value: DZ
        icon: dz
        iconType: flag
      - title: American Samoa
        value: AS
        icon: as
        iconType: flag
      - title: Andorra
        value: AD
        icon: ad
        iconType: flag
      - title: Angola
        value: AO
        icon: ao
        iconType: flag
      - title: Anguilla
        value: AI
        icon: ai
        iconType: flag
      - title: Antigua And Barbuda
        value: AG
        icon: ag
        iconType: flag
      - title: Argentina
        value: AR
        icon: ar
        iconType: flag
      - title: Armenia
        value: AM
        icon: am
        iconType: flag
      - title: Aruba
        value: AW
        icon: aw
        iconType: flag
      - title: Australia
        value: AU
        icon: au
        iconType: flag
      - title: Austria
        value: AT
        icon: at
        iconType: flag
      - title: Azerbaijan
        value: AZ
        icon: az
        iconType: flag
      - title: Bahamas
        value: BS
        icon: ar
        iconType: flag
      - title: Bahrain
        value: BH
        icon: bh
        iconType: flag
      - title: Bangladesh
        value: BD
        icon: bd
        iconType: flag
      - title: Barbados
        value: BB
        icon: bb
        iconType: flag
      - title: Belarus
        value: BY
        icon: by
        iconType: flag
      - title: Belgium
        value: BE
        icon: be
        iconType: flag
datasources:
  country-data-static:
    type: datasource.static
    options:
      data:
      - title: Afghanistan
        value: AF
        icon: af
        iconType: flag
      - title: Albania
        value: AL
        icon: al
        iconType: flag
      - title: Algeria
        value: DZ
        icon: dz
        iconType: flag
      - title: American Samoa
        value: AS
        icon: as
        iconType: flag
      - title: Andorra
        value: AD
        icon: ad
        iconType: flag
      - title: Angola
        value: AO
        icon: ao
        iconType: flag
      - title: Anguilla
        value: AI
        icon: ai
        iconType: flag
      - title: Antigua And Barbuda
        value: AG
        icon: ag
        iconType: flag
      - title: Argentina
        value: AR
        icon: ar
        iconType: flag
      - title: Armenia
        value: AM
        icon: am
        iconType: flag
      - title: Aruba
        value: AW
        icon: aw
        iconType: flag
      - title: Australia
        value: AU
        icon: au
        iconType: flag
      - title: Austria
        value: AT
        icon: at
        iconType: flag
      - title: Azerbaijan
        value: AZ
        icon: az
        iconType: flag
      - title: Bahamas
        value: BS
        icon: ar
        iconType: flag
      - title: Bahrain
        value: BH
        icon: bh
        iconType: flag
      - title: Bangladesh
        value: BD
        icon: bd
        iconType: flag
      - title: Barbados
        value: BB
        icon: bb
        iconType: flag
      - title: Belarus
        value: BY
        icon: by
        iconType: flag
      - title: Belgium
        value: BE
        icon: be
        iconType: flag
﻿
This example shows how a Composite  can be used to only display certain data based on the input received.
Composite jig with input
﻿
Composite jig with input
﻿
Examples:
See the full composite  input code example in GitHub.
See the folder with supporting files in GitHub.
See the datasource code sample in GitHub. 
See the default.jigx code snippet with the database table defined below.
Using the code below requires data in the database, the jigx.sample solution has the data provided for cleaning -services. You can use the cleaning-services.csv file in GitHub and upload it via the Data﻿ configuration in .
service-details-comp.jigx
cleaning-serv-horizon-list-dd.jigx
service-details.jigx
datasources
default.jigx
index.jigx
title: [email protected] != null ? "Service details":" "
type: jig.default
placeholders:
  - title: Please choose a service
    when: [email protected] != null ? false:true
    icon: loading-data
      
datasources:
  cleaningServices:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
  
      entities:
        - entity: default/cleaning-services
      queryParameters:
        servId: [email protected]
  
      query: | 
        SELECT 
          id,
          '$.area', 
          '$.description',
          '$.hourlyrate',
          '$.illustratuion',
          '$.image',
          '$.indoor',
          '$.onceoffrate',
          '$.service',
          '$.time' 
        FROM [default/cleaning-services] WHERE id = @servId

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: [email protected]

children:
  - type: component.entity
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Service
                  value: [email protected]
              - type: component.entity-field
                options:
                  label: Area
                  value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Time
                  value: [email protected] & ' minutes'
              - type: component.entity-field
                options:
                  label: Indoor
                  value: [email protected]
                  contentType: checkbox
        - type: component.entity-field
          options:
            label: Description
            value: [email protected]
            isMultiline: true
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Hourly Rate
                  value: =(@ctx.datasources.cleaningServices.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.datasources.cleaningServices.hourlyrate):'NA'
              - type: component.entity-field
                options:
                  label: Once Off Rate
                  value: ='$ ' & $number(@ctx.datasources.cleaningServices.onceoffrate)
                  isHidden: =(@ctx.datasources.cleaningServices.onceoffrate) = null ? true:false
title: =@ctx.datasources.cleaningServices.service != null ? "Service details":" "
type: jig.default
placeholders:
  - title: Please choose a service
    when: =@ctx.datasources.cleaningServices.service != null ? false:true
    icon: loading-data
      
datasources:
  cleaningServices:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
  
      entities:
        - entity: default/cleaning-services
      queryParameters:
        servId: =@ctx.solution.state.servicesId
  
      query: | 
        SELECT 
          id,
          '$.area', 
          '$.description',
          '$.hourlyrate',
          '$.illustratuion',
          '$.image',
          '$.indoor',
          '$.onceoffrate',
          '$.service',
          '$.time' 
        FROM [default/cleaning-services] WHERE id = @servId

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: =@ctx.datasources.cleaningServices.image

children:
  - type: component.entity
    options:
      children:
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Service
                  value: =@ctx.datasources.cleaningServices.service
              - type: component.entity-field
                options:
                  label: Area
                  value: =@ctx.datasources.cleaningServices.area
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Time
                  value: =@ctx.datasources.cleaningServices.time & ' minutes'
              - type: component.entity-field
                options:
                  label: Indoor
                  value: =@ctx.datasources.cleaningServices.indoor
                  contentType: checkbox
        - type: component.entity-field
          options:
            label: Description
            value: =@ctx.datasources.cleaningServices.description
            isMultiline: true
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Hourly Rate
                  value: =(@ctx.datasources.cleaningServices.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.datasources.cleaningServices.hourlyrate):'NA'
              - type: component.entity-field
                options:
                  label: Once Off Rate
                  value: ='$ ' & $number(@ctx.datasources.cleaningServices.onceoffrate)
                  isHidden: =(@ctx.datasources.cleaningServices.onceoffrate) = null ? true:false
﻿
See also 
﻿Jigs (screens)﻿﻿
﻿Related examples (Github)﻿
﻿
Core Structure
jigId	The core structure includes: jigId 2x or more (depends on how many jigs you are connecting).
Other options
icon	The icon will be displayed on the widget of this . Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons for information on worknig with icons.
inputs	If you are setting up a jig.composite where s rely on input to display or otherwise interact with very specific data, you'll need to use inputs. Here you set the data you would like to transfer to the composite jig. There are 2 options to make data available for input: Set them in output inside the . Set them as a global variable by using set-state action.
isTitleHidden	The boolean value allows you to hide the title of your in the composite jig. Even if the 's title is set to true , because the title is a mandatory property.
when	The ability to include or exclude a for display on a composite . If set to true the is included, if set to false the will not appear on the composite . Dynamically set this property by using expressions.