# jig.composite

{% columns %}
{% column %}
The composite jig is a jig made up of several parts or elements. In this case, a jig is made up of several jigs. This jig allows you to display multiple jigs on one list where you would otherwise be unable to combine the functionality in the same way.
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FVE4R3Zqk93OpvOhjZkmc%2Fcomposite.png?alt=media&#x26;token=1c96f451-6ad8-480b-85a1-8ecce1268c2c" alt="Jig Composite Preview" width="188"><figcaption><p>Jig Composite Preview</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Configuration options

Some properties are common to all jig types, see [Common jig type properties](https://docs.jigx.com/examples/readme/jig-types/jig_composite) for a list and their configuration options.

<table><thead><tr><th width="148.98828125">Core Structure</th><th></th></tr></thead><tbody><tr><td><code>jigId</code></td><td>The core structure includes two <code>jigId</code> or more (depends on how many jigs you are connecting).</td></tr></tbody></table>

<table><thead><tr><th width="150.23828125">Other options</th><th></th></tr></thead><tbody><tr><td><code>icon</code></td><td>The icon will be displayed on the widget of this jig. Start typing the name of the icon to invoke the available list in IntelliSense. See <a href="jig_composite">Jigx icons</a> for information on working with icons.</td></tr><tr><td><code>inputs</code></td><td>If you are setting up a <code>jig.composite</code> where jigs rely on input to display or otherwise interact with very specific data, you'll need to use <code>inputs</code>. Here you set the data you would like to transfer to the composite jig. There are 2 options to make data available for input: 1) Set them in <code>output</code> inside the jig. 2) Set them as a <code>global</code> variable by using <code>set-state action</code>.</td></tr><tr><td><code>isTitleHidden</code></td><td>The boolean value allows you to hide the title of your jig in the composite jig. Even if the jig's title is set to <code>true</code> , because the title is a mandatory property.</td></tr><tr><td><code>when</code></td><td>The ability to include or exclude a jig for display on a composite jig. If set to <code>true</code> the jig is included, if set to <code>false</code> the jig will not appear on the composite jig. Dynamically set this property by using expressions.</td></tr></tbody></table>

## Considerations

* When calling a jig in a composite jig for example, `jigId: personal-details`, you can add an `instanceId` on the composite jig. This allows you to interact with the referenced jig, such as saving or calling a control on the referenced jig. If no `instanceId` exists, IntelliSense cannot show it in the composite jig configuration.

{% code title="composite.jigx" %}

```yaml
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  
```

{% endcode %}

## Examples and code snippets

{% hint style="success" %}
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](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples) and follow the instructions in [Setting up your solution](https://docs.jigx.com/examples/readme/jig-types/jig_composite).
{% endhint %}

### Composite Jig without any form of input

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FNFpxugRBQg6i6zJqJ46n%2Fcomposite-example1.png?alt=media&#x26;token=4c84bf34-c669-48ad-a2c7-a5f9735eef72" alt="Basic Composite jig" width="188"><figcaption><p>Basic Composite jig</p></figcaption></figure>
{% endcolumn %}

{% column %}
This example shows the simplest way in which a `Composite Jig` can be set up - referencing two separate jigs and displaying them on one without having to filter the content.

**Examples:**

See the composite jig code example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jig-types/jig-composite/jig-composite.jigx%22). See the [location](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/components/location/static-data/location-with-address.jigx) code and [country list](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jig-types/jig-list/simple-lists/static-data/country-list-sd.jigx) code examples in GitHub. See the static country datasource code example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/examples/country-data-static.jigx). See the index.jigx code below to add the jig to the Home Hub.
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="composite-jig.jigx" %}

```yaml
#This file is added under the jig folder
title: Composite Jig
description: Composite Jig without input
type: jig.composite

children:
  - jigId: location-with-address
  - jigId: country-list-sd
```

{% endtab %}

{% tab title="location-with-address.jigx" %}

```yaml
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
```

{% endtab %}

{% tab title="country-list-sd.jigx" %}

```yaml
title: Country List
description: List of countries and their flags
type: jig.list
icon: world

data: =@ctx.datasources.country-data-static
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.title
    subtitle: =@ctx.current.item.value
    leftElement: 
      element: icon
      name: =@ctx.current.item.icon// Some code
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="datasource" %}

```yaml
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
```

{% endtab %}

{% tab title="index.jigx" %}

```yaml
name: location
title: location with country list
category: personal
tabs:
  home:
    jigId: composite-jig
    icon: home-apps-logo
```

{% endtab %}
{% endtabs %}

### Composite Jig with input

This example shows how a Composite jig can be used to only display certain data based on the input received.

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2Fycl80nuBT1W7jNUePUgi%2Fcomposite-inputs.png?alt=media&#x26;token=5e89bcb0-a378-4f4e-a7fa-5b00874014b8" alt="Composite jig with inputs" width="188"><figcaption><p>Composite jig with inputs</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FdNDSYv7eJQIthneRIYXe%2Fcomposite-inputs2.png?alt=media&#x26;token=1e88434c-5b5a-485c-ae74-932c122581cd" alt="composite with inputs" width="188"><figcaption><p>Composite with inputs</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**Examples:** See the full composite jig input code example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jig-types/jig-composite/inputs/service-details-comp.jigx). See the folder with supporting files in [GitHub](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples/jigs/jig-types/jig-composite/inputs/supporting-files). See the datasource code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/datasources/services/cleaning-services-dynamic.jigx).

See the default.jigx code snippet with the database table defined below.

{% hint style="success" %}
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](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/csv/cleaning-services.csv) and upload it via the [Data](https://docs.jigx.com/examples/readme/jig-types/jig_composite) configuration in Jigx Management.
{% endhint %}

{% tabs %}
{% tab title="service-details-comp.jigx" %}

```yaml
type: jig.composite
title: Cleaning Services

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1512314889357-e157c22f938d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aW5mb3JtYXRpb258ZW58MHx8MHx8&auto=format&fit=crop&w=900&q=60

children:
  - jigId: cleaning-serv-horizon-list-dd
    instanceId: cleaning
# Instance Id is required for a composite jig exposing outputs
# To be accessed by another jig 
    
  - jigId: service-details
    instanceId: service_deets
# Add inputs to receive the outputs-keys, reference the instanceId
# Which renders the selected data    
    inputs:
      id: =@ctx.jigs.cleaning.outputs.output-key
```

{% endtab %}

{% tab title="cleaning-serv-horizon-list-dd.jigx" %}

```yaml
title: List of available services
type: jig.list
icon: contact 
isHorizontal: true
isCollapsible: false
isInitiallyCollapsed: true
hasActiveItem: true
isSelectable: true

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1628177142898-93e36e4e3a50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80

outputs:
  output-key: =@ctx.solution.state.servicesId
  
data: =@ctx.datasources.cleaning-services-dynamic
item:
  
  type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.description
    horizontalItemSize: large
    
    progress: =@ctx.current.item.id = @ctx.solution.state.servicesId ? 1 :0
    color:
      - when: =@ctx.current.item.id = @ctx.solution.state.servicesId ? true :false
        color: color2
    leftElement: 
      element: image
      text: ''
      uri: =@ctx.current.item.image
    label:
      title: =@ctx.current.item.time & ' minutes'
    rightElement:
      element: value
      text: =(@ctx.current.item.hourlyrate) != 'NA' ? '$ ' & $number(@ctx.current.item.hourlyrate) & ' p/hr':'$ ' & $number(@ctx.current.item.onceoffrate) & ' once off'
    onPress: 
      type: action.action-list
      options:
        actions:
 # set the solution state and the value as id of the current selected item       
          - type: action.set-state
            options:
              state: =@ctx.solution.state.servicesId
              value: =@ctx.current.item.id
```

{% endtab %}

{% tab title="service-details.jigx" %}

```yaml
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
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="datasources" %}

```yaml
datasources:
  cleaning-services-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/cleaning-services
      query: |
        SELECT 
          id, 
          '$.id' as sqlid, 
          '$.area', 
          '$.description', 
          '$.hourlyrate', 
          '$.illustration', 
          '$.image', 
          '$.indoor', 
          '$.onceoffrate', 
          '$.service', 
          '$.pressed', 
          '$.time',
          '$.quantity'
        FROM [default/cleaning-services] WHERE '$.hourlyrate' IS NOT NULL ORDER BY id DESC
```

{% endtab %}

{% tab title="default.jigx" %}

```yaml
databaseId: default
tables:
  cleaning-services: null 
```

{% endtab %}

{% tab title="index.jigx" %}

```yaml
name: cleaning-service
title: cleaning service
category: personal
tabs:
  home:
    jigId: service-details-comp
    icon: home-apps-logo
```

{% endtab %}
{% endtabs %}

## See also

* [Jigs (screens)](https://docs.jigx.com/examples/readme/jig-types/jig_composite)
* [Related examples (Github)](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples/jigs/jig-types/jig-composite)