Passing data using outputs

4min
Often, you need to transfer or pass data between 
﻿s to provide context and data, for example, when pressing on a customer in a list, the customer ID is passed to the order form, prepopulating the customer's details. This is accomplished by utilizing inputs﻿ and outputs.
Outputs 
Output and inputs 
﻿
Outputs are configured in a 
﻿ and are then used as an input in a composite 
﻿ to pass data between the 
﻿s in the composite 
﻿. This configuration is suitable for creating master detail screens, clicking on a component in one jig, populates the components and data in the next screen. Passing data values between 
﻿s works both ways.
Considerations
 An instanceId is required for the 
﻿ that is exposing an output in order to access the output via state from another 
﻿.
The data from configuring outputs can only be used in composite 
﻿s. 
Using the output property must be reciprocated with an input property in the composite 
﻿.
The output requires an output-key and a data value that is available in that 
﻿.
The receiving 
﻿ configuration uses the format similar to  [email protected]. Use IntelliSense  (ctrl+space) to assist with configuration. 
YAML code
The output and input work in conjunction with each other. 
Output:
In the 
﻿ containing the data you want to transfer, configure the output-key. Example:
outputs:
  output-key: [email protected]
Input:
In the receiving jig.composite﻿ configure the input for the data. Example:

inputs:
   id: [email protected]
Examples
Passing data via outputs to connect two jigs data in a composite jig
In this example, cleaning services are listed, initally the service details are blank showing a placeholder. Once the service is selected from the List of available services the service details for that specific service populates. 
Passing data using outputs
﻿
Output Jig - available services
Create a horizontal jig.list to show the available services with a leftElement for the image and rightElement for the text values. Add the output: output-key property and use the 
﻿ state for the active item
[email protected]
Available services list
﻿
cleaning-serv-horizon-list-dd.jigx
cleaning-services-dynamic.jigx
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]-services-dynamic
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: 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
﻿
 Jig - service details 
Service detail jig
﻿
Create a default jig with component.entity to display the various details such as service name, time, and cost. Define the datasource and configure a queryParameters:
servId: [email protected]
service-details.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
﻿
Composite jig - combining output with input
Create a jig.composite and add the jigIds for both 
﻿s above. Give the 
﻿ configured with the output an instanceId and the 
﻿ that receives the output an input property.
composite jig
﻿
You have to provide an instanceId for the 
﻿ that is exposing an output in order to access the output via state from another 
﻿.
composite.jigx
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
# InstanceId 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, use the instanceId of the output jig
# Which renders the selected data    
    inputs:
      id: [email protected]-key
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
# InstanceId 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, use the instanceId of the output jig
# Which renders the selected data    
    inputs:
      id: =@ctx.jigs.cleaning.outputs.output-key
﻿
﻿