jig.composite

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.

Configuration options

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

Core Structure

jigId

The core structure includes two jigId or more (depends on how many jigs you are connecting).

Other options

icon

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 Jigx icons for information on working with icons.

inputs

If you are setting up a jig.composite where jigs 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: 1) Set them in output inside the jig. 2) Set them as a global variable by using set-state action.

isTitleHidden

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 true , because the title is a mandatory property.

when

The ability to include or exclude a jig for display on a composite jig. If set to true the jig is included, if set to false the jig will not appear on the composite jig. Dynamically set this property by using expressions.

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.

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]

     # 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]
            employee-startWork: [email protected]
                  
      # 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]
            employee-first-name: [email protected]   
            employee-surname: [email protected]
            employee-position: [email protected]
            employee-contract: [email protected]

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.

Composite Jig without any form of input

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. 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 jig to the Home Hub.

#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

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: Country List
description: List of countries and their flags
type: jig.list
icon: world

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: icon
      name: [email protected]// Some code

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

Composite Jig with input

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

Examples: See the full composite jig 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 Jigx Management.

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: [email protected]

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: [email protected]
  
data: [email protected]
item:
  
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    horizontalItemSize: large
    
    progress: [email protected] = @ctx.solution.state.servicesId ? 1 :0
    color:
      - when: [email protected] = @ctx.solution.state.servicesId ? true :false
        color: color2
    leftElement: 
      element: image
      text: ''
      uri: [email protected]
    label:
      title: [email protected] & ' 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: [email protected]
              value: [email protected]

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

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

Good afternoon

jig.composite

Configuration options

Considerations

Examples and code snippets

Composite Jig without any form of input

Composite Jig with input

See also