Passing data using inputs

10min
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﻿.
Inputs
Passing data using inputs
﻿
The input data is configured in one of the following:
In the index.jigx file under each 
﻿'s input property.
In another 
﻿ under the parameters property.
You can define the following for inputs:
The data type
Whether the input is required or not
A default value if no input is provided. 
﻿Configuration options﻿
Properties
Values
default
Add a value that will display as the default if nothing is specified. This property is optional.
required
true - a value for the input is required
false - value is optional; if no value is specified, the default value is shown if provided; otherwise, the input value is empty.
type
string - input must be of type string, for example, Mary.
﻿
object - input must be an object with properties defined. 
The full object can be returned using [email protected]
Individual properties can be returned using [email protected]
﻿
array - input must be an array.
The full array can be returned using [email protected]
Single elements in an array can be returned using [email protected]
Individual items in an array can be returned using [email protected][1].element
The YAML format for specifying the array can be one of the following:
array: [{name: John, age: 30}, {name: Melany, age: 35}, {name: Scott, age: 21}]
array:
   - [John, Melany, Mel, 1234, true]
array:
   - John
   - Melany
   - Mel
   - 1234
   - true
﻿
boolean - input must be true or false.
﻿
number - input must be of type number, for example, 45 or 350.88.
YAML code for index.jigx to jig
Index.jigx: 
In the index.jigx file configure the input under the widget configuration for the 
﻿.  Configure the data you want to pass to that 
﻿. 
Example:
size: "1x1"
jigId: application-form
inputs:
 name: [email protected]
Input:
In the receiving 
﻿ configure the input type and specify the data in the field or data property using an expression. 
Example of the input type:
inputs:
  name: 
    default: Placeholder
    type: string
    required: true
Example of an input expression:
title: [email protected]
YAML code for jig to jig
Parameter: 
In the 
﻿ containing the data you want to transfer, and configure the various parameters to be passed.
Example:
parameters: 
  packageDate: [email protected]
    packageName: [email protected]
Input:
In the receiving 
﻿ configure the component to recieve the data from the parameter.
Example: 
title: [email protected]
Considerations
You can specify a default value that can be used as a placeholder if no input value is found in the configuration. Use the default property when defining the input types.
With inputs, parameters are configured in the first 
﻿ (sending 
﻿) with the input used in the receiving 
﻿. 
The parameter and input work in conjunction with each other. 
The parameter requires a parameterName and a data value that is available in that 
﻿.  
Multiple parameters can be passed through at once.
The receiving 
﻿ configuration uses the format [email protected]. Use IntelliSense (ctrl+space) to assist with configuration. 
In a 
﻿, you can access all data sent from other 
﻿s using the expression @ctx.jig.inputs.[parameter], for example, [email protected][customerId = @ctx.jig.inputs.customerId]
Inputs can be used for passing values from a composite﻿ 
﻿ to its children 
﻿s. 
If you are in a list-item component, you don't need to list all the parameters, simply use:
parameters:                     
    customer: [email protected]
Examples
Passing data directly from index.jigx to a 
﻿ 
Jig input definitions are configured directly in the 
﻿ and the input values are defined in the index.jigx file. The values from the index file are directly returned to the 
﻿.
Input definitions
﻿
jig-inputs-direct.jigx
index.jigx
name: simple-list
title: simple-list
category: business         

widgets:
# Add inputs
  - size: "1x1"
    jigId: new-input
    inputs:
      name: [email protected]
      number: 350
      boolean: true
    # The array can be in the following YAML format - option 1
      array: [{name: john, age: 30}, {name: melany, age: 35}, {name: scott, age: 21}]
    # Array YAML format - option 2
        # - [john, melany, mel, 1234, true]
    # Array YAML format - option 3 
        # - john
        # - melany
        # - mel
        # - 1234
        # - true
      object: 
        obj-name: Gigi
        obj-age: 50
        obj-member: false
name: simple-list
title: simple-list
category: business         

widgets:
# Add inputs
  - size: "1x1"
    jigId: new-input
    inputs:
      name: =@ctx.user.displayName
      number: 350
      boolean: true
    # The array can be in the following YAML format - option 1
      array: [{name: john, age: 30}, {name: melany, age: 35}, {name: scott, age: 21}]
    # Array YAML format - option 2
        # - [john, melany, mel, 1234, true]
    # Array YAML format - option 3 
        # - john
        # - melany
        # - mel
        # - 1234
        # - true
      object: 
        obj-name: Gigi
        obj-age: 50
        obj-member: false
﻿
Dynamically pass data from another jig's components
Jig input definitions are configured directly in the 
﻿ and the input values returned from components configured in another 
﻿. In the example below a form captures the student details, the Student Details form links to the Student Card 
﻿ and uses parameters to pass the values required in the Student Card inputs. 
Dynamic input
﻿
input-student-card.jigx
input-student-details.jigx
title: Student Details
description: The values captured in the form are used as the input to create a student card jig
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D    

datasources:
  allergies: 
    type: datasource.static
    options:
      data:
        - id: 1
          allergen: none
          icon: smiley-happy
        - id: 2
          allergen: nuts
          icon: food-allergic-peanut-2
        - id: 3
          allergen: shellfish
          icon: shellfish-lobster
        - id: 4
          allergen: milk
          icon: food-allergic-daily-milk-product-3
        - id: 5
          allergen: eggs
          icon: animal-products-eggs
        - id: 6
          allergen: wheat   
          icon: food-allergic-gluten-2   
  
children:
  - type: component.section
    options:
      title: Student Details
      children: 
        - type: component.form
          instanceId: inputValues
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  label: Fist name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  label: Mobile number
              - type: component.checkbox
                instanceId: resident
                options:
                  label: Are you in a residence hall?
                  isRequired: false
                  isOptionalLabelHidden: true
                
              - type: component.dropdown
                instanceId: studentAllergies
                options:
                  isMultiple: true
                  label: Do you have any allergies?
                  data: [email protected]
                  item:
                    type: component.dropdown-item
                    options:
                      leftElement: 
                        element: icon
                        icon: [email protected]
                      title: [email protected]
                      value: [email protected]
             
  - type: component.section
    options:
      title: Personal Details
      children:
        - type: component.form
          instanceId: personalDetails
          options:
            children:
              - type: component.text-field
                instanceId: streetAddress
                options:
                  label: Street address
              - type: component.text-field
                instanceId: cityAddress
                options:
                  label: City
              - type: component.text-field
                instanceId: countryAddress
                options:
                  label: Country   
              - type: component.media-field
                instanceId: sutdentPhoto
                options:
                  label: Selfie
                  mediaType: image
actions:
  - children:
      - type: action.go-to
        options:
          title: Create card
          linkTo: input-student-card
          parameters:
            studentName: [email protected]
            studentContact: [email protected]
            studentAddress: [email protected]
            studentPhoto: [email protected]
            studentAllergies: [email protected]
            studentResident: [email protected]
             
title: Student Details
description: The values captured in the form are used as the input to create a student card jig
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D    

datasources:
  allergies: 
    type: datasource.static
    options:
      data:
        - id: 1
          allergen: none
          icon: smiley-happy
        - id: 2
          allergen: nuts
          icon: food-allergic-peanut-2
        - id: 3
          allergen: shellfish
          icon: shellfish-lobster
        - id: 4
          allergen: milk
          icon: food-allergic-daily-milk-product-3
        - id: 5
          allergen: eggs
          icon: animal-products-eggs
        - id: 6
          allergen: wheat   
          icon: food-allergic-gluten-2   
  
children:
  - type: component.section
    options:
      title: Student Details
      children: 
        - type: component.form
          instanceId: inputValues
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  label: Fist name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  label: Mobile number
              - type: component.checkbox
                instanceId: resident
                options:
                  label: Are you in a residence hall?
                  isRequired: false
                  isOptionalLabelHidden: true
                
              - type: component.dropdown
                instanceId: studentAllergies
                options:
                  isMultiple: true
                  label: Do you have any allergies?
                  data: =@ctx.datasources.allergies
                  item:
                    type: component.dropdown-item
                    options:
                      leftElement: 
                        element: icon
                        icon: =@ctx.current.item.icon
                      title: =@ctx.current.item.allergen
                      value: =@ctx.current.item.allergen
             
  - type: component.section
    options:
      title: Personal Details
      children:
        - type: component.form
          instanceId: personalDetails
          options:
            children:
              - type: component.text-field
                instanceId: streetAddress
                options:
                  label: Street address
              - type: component.text-field
                instanceId: cityAddress
                options:
                  label: City
              - type: component.text-field
                instanceId: countryAddress
                options:
                  label: Country   
              - type: component.media-field
                instanceId: sutdentPhoto
                options:
                  label: Selfie
                  mediaType: image
actions:
  - children:
      - type: action.go-to
        options:
          title: Create card
          linkTo: input-student-card
          parameters:
            studentName: =@ctx.components.firstName.state.value
            studentContact: =@ctx.components.phoneNumber.state.value
            studentAddress: =@ctx.components.personalDetails.state.data
            studentPhoto: =@ctx.components.sutdentPhoto.state.value
            studentAllergies: =@ctx.components.studentAllergies.state.selected
            studentResident: =@ctx.components.resident.state.value
             
﻿
 Passing data from one jig to another 
In this example, the sending 
﻿ list called Island Holiday Packages is configured with parameters for the package date, price, and time. When tapping on a specific package, the parameters are sent to the receiving 
﻿ that uses the inputs in the title property to show the selected package, the date is used in the expiresAt property for the countdown component that counts down to the date, and the price is used in the action title displayed on the buy package button at the bottom of the screen.
Sending and receiving jig
﻿
Sending Jig 
Sending jig with parameters
﻿
Create a jig.list with list.items for the name, description of the holiday package and add a rightElement: button for the date with an onPress action. Then add parameters:
packageName, packageDate, and packagePrice. Add an expression for each similiar to [email protected]
﻿
Holiday-packages.jigx
title: Island Holiday Packages
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1440778303588-435521a205bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aG9saWRheXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60
# Static datasource 
# With the name, escription, date and price of each package          
datasources:
  packages:
    type: datasource.static
    options:
      data:
        - name: Thailand
          date: "2024-12-14"
          description: "10 days in luxury accomodation"
          Price: "$ 1500"
        - name: Phuket
          date: "2024-11-25"
          description: "7 days experience cultural activities"
          Price: "$ 1000"
        - name: Mauritius
          date: "2024-05-04"
          description: "8 days includes watersports"   
          Price: "$ 2350"
        - name: Bali
          date: "2024-09-20" 
          description: "15 days all-inclusive experience"
          Price: "$ 3760"
data: [email protected]
item:
# List of all the available packages showing the name and description
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
# Right button showing the start date of the holiday    
    rightElement: 
      element: button
      title: [email protected]
# An action to press on the button and go to the next jig    
      onPress: 
        type: action.go-to
        options:
          linkTo: selected-package
# Define the parameters that are transfered to the next jig.        
          parameters:
            packageDate: [email protected]
            packagePrice: [email protected]
            packageName: [email protected]
title: Island Holiday Packages
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1440778303588-435521a205bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aG9saWRheXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60
# Static datasource 
# With the name, escription, date and price of each package          
datasources:
  packages:
    type: datasource.static
    options:
      data:
        - name: Thailand
          date: "2024-12-14"
          description: "10 days in luxury accomodation"
          Price: "$ 1500"
        - name: Phuket
          date: "2024-11-25"
          description: "7 days experience cultural activities"
          Price: "$ 1000"
        - name: Mauritius
          date: "2024-05-04"
          description: "8 days includes watersports"   
          Price: "$ 2350"
        - name: Bali
          date: "2024-09-20" 
          description: "15 days all-inclusive experience"
          Price: "$ 3760"
data: =@ctx.datasources.packages
item:
# List of all the available packages showing the name and description
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: =@ctx.current.item.description
# Right button showing the start date of the holiday    
    rightElement: 
      element: button
      title: =@ctx.current.item.date
# An action to press on the button and go to the next jig    
      onPress: 
        type: action.go-to
        options:
          linkTo: selected-package
# Define the parameters that are transfered to the next jig.        
          parameters:
            packageDate: =@ctx.current.item.date
            packagePrice: =@ctx.current.item.Price
            packageName: =@ctx.current.item.name
﻿
Receiving Jig
Create a jig.default for the receiving 
﻿. In the title: property configure the input using  =@ctx.jig.inputs.packageName, in the component.countdown: expiresAt property add the input expression [email protected] and in the action-confirm: title property add the input expression [email protected] & " - BUY". 
﻿
Input- receiving jig
﻿
selected-package.jigx
# Use the parameter for package name as an input for the title 
title: [email protected]
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1675989167596-915a77b361e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGhvbGlkYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60
        
children:                                
  - type: component.countdown
    options:
      size: extra-large
 # Use the packageDate parameter as the date to use in the countdown        
      expiresAt: [email protected]
      
actions:
  - children:
      - type: action.confirm
        options:
# Use the packagePrice parameter as an input
# This displays the cost of the package on the Buy button        
          title: [email protected] & " - BUY"
          isConfirmedAutomatically: false
          onConfirmed: 
            type: action.go-back
          modal:
            title: Let the countdown begin!
# Use the parameter for package name as an input for the title 
title: =@ctx.jig.inputs.packageName
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1675989167596-915a77b361e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGhvbGlkYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60
        
children:                                
  - type: component.countdown
    options:
      size: extra-large
 # Use the packageDate parameter as the date to use in the countdown        
      expiresAt: =@ctx.jig.inputs.packageDate
      
actions:
  - children:
      - type: action.confirm
        options:
# Use the packagePrice parameter as an input
# This displays the cost of the package on the Buy button        
          title: =@ctx.jig.inputs.packagePrice & " - BUY"
          isConfirmedAutomatically: false
          onConfirmed: 
            type: action.go-back
          modal:
            title: Let the countdown begin!
﻿
Passing data from a jig to a composite jig 
In this example, three 
﻿s contain various information for all customers, namely:
customer-list.jigx - A list of customers.
customer-contact.jigx - A list of the customer contact person.
customer-orders.jigx - A list of orders.
When you click on a customer in the list (1) shown on the left screen below, a new 
﻿ opens combining the details from contact (2) and orders (3) into one screen (composite jig), shown on the right screen below and filters the data to show the selected customer's details. The composite 
﻿ is called customer-overview.jigx.  
Send and receiving jigs
﻿
To achieve this configure the following:
Create the composite 
﻿ and include the JigIds for the customer-contact.jigx and customer-orders.jigx.
Add the customerId and customerName input values transfered from the parameters in the customer-list.jigx to the jigId properties for the customer-contacts.jigx; and add customerId to the jigId for the customer-order.jigx. The result is that only the selected customer's contact person and orders will display.
Add parameters to the customer list that include the customerId and customerName.

Sending Jig
Sending Jig with paramaters
﻿
Create a list 
﻿ called customer-list.jigx, use the datasource to list customer names and ids. Add parameters for the customerName and customerId.
customer-list.jigx
title: Customer List
type: jig.list
icon: list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1464618663641-bbdd760ae84a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        title: Customer List
        
datasources:
  customers:
    type: datasource.static
    options:
      data:
        - customerId: 1
          name: Island shop
        - customerId: 2
          name: Sea Depot
        - customerId: 3
          name: Beach accessories

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: "='Customer ID: ' & @ctx.current.item.customerId"
    rightElement: 
      element: button
      title: Contact
      onPress: 
        type: action.go-to
        options:
          linkTo: customer-overview
  # Add parameters to use as input values in the composite jig      
          parameters:
            customerId: [email protected]
            customerName: [email protected]

title: Customer List
type: jig.list
icon: list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1464618663641-bbdd760ae84a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        title: Customer List
        
datasources:
  customers:
    type: datasource.static
    options:
      data:
        - customerId: 1
          name: Island shop
        - customerId: 2
          name: Sea Depot
        - customerId: 3
          name: Beach accessories

data: =@ctx.datasources.customers
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: "='Customer ID: ' & @ctx.current.item.customerId"
    rightElement: 
      element: button
      title: Contact
      onPress: 
        type: action.go-to
        options:
          linkTo: customer-overview
  # Add parameters to use as input values in the composite jig      
          parameters:
            customerId: =@ctx.current.item.customerId
            customerName: =@ctx.current.item.name
﻿
Supporting Jigs 
Create two basic list 
﻿s one for customer-contacts and the other for the customer-orders. 
For the data property in both 
﻿ s add the customerId as an input
data:
 [email protected][customerId = @ctx.jig.inputs.customerId]. Define the input type as string under the inputs property. 
In the customer-contacts.jigx also add the customerName as an input with the type string.
customer-contacts.jigx
customer-orders.jigx
title: Customer orders
type: jig.list

inputs:
  customerId: 
    type: string
    required: true
    
datasources:
  beachItems: 
    type: datasource.static
    options:
      data:
        - customerId: 1
          order: paddle-board
          amount: 4
          icon: paddle-board    
        - customerId: 1
          order: surf-board
          amount: 10
          icon: skiing-board-slide
        - customerId: 2
          order: wetsuit
          amount: 15
          icon: surfing
        - customerId: 2
          order: hat
          amount: 20
          icon: hat
        - customerId: 3
          order: umbrella
          amount: 7
          icon: rain-umbrella-sun
        - customerId: 3
          order: sandcastle bucket
          amount: 6
          icon: color-bucket

data: [email protected][customerId = @ctx.jig.inputs.customerId]
item: 
  type: component.list-item
  options:
    isContained: true
    title: [email protected]
    subtitle: [email protected]
    leftElement: 
      element: icon
      icon: [email protected]
    rightElement: 
      element: value
      text: [email protected] 
      
title: Customer orders
type: jig.list

inputs:
  customerId: 
    type: string
    required: true
    
datasources:
  beachItems: 
    type: datasource.static
    options:
      data:
        - customerId: 1
          order: paddle-board
          amount: 4
          icon: paddle-board    
        - customerId: 1
          order: surf-board
          amount: 10
          icon: skiing-board-slide
        - customerId: 2
          order: wetsuit
          amount: 15
          icon: surfing
        - customerId: 2
          order: hat
          amount: 20
          icon: hat
        - customerId: 3
          order: umbrella
          amount: 7
          icon: rain-umbrella-sun
        - customerId: 3
          order: sandcastle bucket
          amount: 6
          icon: color-bucket

data: =@ctx.datasources.beachItems[customerId = @ctx.jig.inputs.customerId]
item: 
  type: component.list-item
  options:
    isContained: true
    title: =@ctx.current.item.order
    subtitle: =@ctx.current.item.order
    leftElement: 
      element: icon
      icon: =@ctx.current.item.icon
    rightElement: 
      element: value
      text: =@ctx.current.item.amount 
      
﻿
Receiving jig (composite)
Receiving composite Jig
﻿
The receiving 
﻿ is a composite 
﻿ with two children (customer-contacts and customer-orders). In this example, we pass the inputs (customerId and customerName) to the children. The children can then access all parameters and render only the selected customers contact and order details.
﻿
customer-overview.jigx
# Reference the customer name in the title
# Using the input from the parameter in the customer-list
title: ='Customer -' & @ctx.jig.inputs.customerName
type: jig.composite

# Specify the input's type and if the input is required or not
inputs:
  customerId: 
    type: string
    required: true
  customerName: 
    type: string
    required: true

header:
  type: component.jig-header
  options:
    height: small
    children:  
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmVhY2h8ZW58MHx8MHx8fDA%3D
      
children:
  - jigId: customer-contacts
# Reference the customerId & Name in the jigId 
# Using the input from the parameter in the customer-list
# Returns the contact person for the customer
    inputs:
      customerId: [email protected]
      customerName: [email protected]
  - jigId: customer-orders
# Reference the customerId in the jigId
# Using the input from the parameter in the customer-list
# Returns the orders for that customer
    inputs:
      customerId: [email protected]
# Reference the customer name in the title
# Using the input from the parameter in the customer-list
title: ='Customer -' & @ctx.jig.inputs.customerName
type: jig.composite

# Specify the input's type and if the input is required or not
inputs:
  customerId: 
    type: string
    required: true
  customerName: 
    type: string
    required: true

header:
  type: component.jig-header
  options:
    height: small
    children:  
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmVhY2h8ZW58MHx8MHx8fDA%3D
      
children:
  - jigId: customer-contacts
# Reference the customerId & Name in the jigId 
# Using the input from the parameter in the customer-list
# Returns the contact person for the customer
    inputs:
      customerId: =@ctx.jig.inputs.customerId
      customerName: =@ctx.jig.inputs.customerName
  - jigId: customer-orders
# Reference the customerId in the jigId
# Using the input from the parameter in the customer-list
# Returns the orders for that customer
    inputs:
      customerId: =@ctx.jig.inputs.customerId
﻿
﻿
Updated 05 Aug 2024
Did this page help you?
Jigs (screens)
Passing data using outputs
Docs powered by Archbee
TABLE OF CONTENTS
Inputs
Configuration options
YAML code for index.jigx to jig
YAML code for jig to jig
Considerations
Examples
Passing data directly from index.jigx to a jig
Dynamically pass data from another jig's components
Passing data from one jig to another
Passing data from a jig to a composite jig
Properties	Values
default	Add a value that will display as the default if nothing is specified. This property is optional.
required	true - a value for the input is required false - value is optional; if no value is specified, the default value is shown if provided; otherwise, the input value is empty.
type	string - input must be of type string, for example, Mary.
	object - input must be an object with properties defined. The full object can be returned using [email protected] Individual properties can be returned using [email protected]
	array - input must be an array. The full array can be returned using [email protected] Single elements in an array can be returned using [email protected] Individual items in an array can be returned using [email protected][1].element The YAML format for specifying the array can be one of the following: array: [{name: John, age: 30}, {name: Melany, age: 35}, {name: Scott, age: 21}] array: - [John, Melany, Mel, 1234, true] array: - John - Melany - Mel - 1234 - true
	boolean - input must be true or false.
	number - input must be of type number, for example, 45 or 350.88.
Passing data using inputs

Inputs

﻿Configuration options﻿

YAML code for index.jigx to jig

YAML code for jig to jig

Considerations

Examples

Passing data directly from index.jigx to a ﻿

Dynamically pass data from another jig's components

Passing data from one jig to another

Passing data from a jig to a composite jig

Configuration options

Passing data directly from index.jigx to a
