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
title: Location with address
type: jig.default

isCollapsible: true

datasources:
  address: 
    type: datasource.static
    options:
      data:
        - street: 768 5th Ave
          city: New York
          country: US

children:
  - type: component.location
    options:
      address: [email protected] & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
title: Location with address
type: jig.default

isCollapsible: true

datasources:
  address: 
    type: datasource.static
    options:
      data:
        - street: 768 5th Ave
          city: New York
          country: US

children:
  - type: component.location
    options:
      address: =@ctx.datasources.address.street & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
﻿
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
name: cleaning-service
title: cleaning service
category: personal
tabs:
  home:
    jigId: service-details-comp
    icon: home-apps-logo
name: cleaning-service
title: cleaning service
category: personal
tabs:
  home:
    jigId: service-details-comp
    icon: home-apps-logo
﻿
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.