Passing data using outputs

Often, you need to transfer or pass data between jigs 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 jig and are then used as an input in a composite jig to pass data between the jigs in the composite jig. 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 jigs works both ways.

Considerations

• An instanceId is required for the jig that is exposing an output in order to access the output via state from another jig.

• The data from configuring outputs can only be used in composite jigs.

• Using the output property must be reciprocated with an input property in the composite jig.

• The output requires an output-key and a data value that is available in that jig.

• The receiving jig 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 jig 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, initially 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 jig state for the active item [email protected]

Available services list

cleaning-serv-horizon-list-dd.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]
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]

cleaning-services-dynamic.jigx

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

Composite jig - combining output with input

Create a jig.composite and add the jigIds for both jigs above. Give the jig configured with the output an instanceId and the jig that receives the output an input property.

You have to provide an instanceId for the jig that is exposing an output in order to access the output via state from another jig.

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]