Passing data using inputs

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, pre-populating 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 jig's input property.

• In another jig 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 jig. Configure the data you want to pass to that jig. Example: size: "1x1" jigId: application-form inputs: name: [email protected]

Input: In the receiving jig 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 jig 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 jig configure the component to receive 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 jig (sending jig) with the input used in the receiving jig.

• The parameter and input work in conjunction with each other.

• The parameter requires a parameterName and a data value that is available in that jig.

• Multiple parameters can be passed through at once.

• The receiving jig configuration uses the format [email protected]. Use IntelliSense (ctrl+space) to assist with configuration.

• In a jig, you can access all data sent from other jigs 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 jig to its children jigs.

• 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

Jig input definitions are configured directly in the jig and the input values are defined in the index.jigx file. The values from the index file are directly returned to the jig.

Input definitions

jig-inputs-direct.jigx

title: Jig input defintions
description: Inputs directly received from index.jigx
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1516542076529-1ea3854896f2?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
# Add the jig's input defintion to the jig file
inputs:
  name:
    type: string
    required: true
  alternate-name:
    default: Placeholder
    required: false
    type: string
  number:
    type: number
  boolean:
    type: boolean
    required: true
  array:
    type: array
    required: true
  object:
    type: object
    properties:
      obj-name:
        type: string
      obj-age:
        type: number
      obj-member:
        type: boolean

children:
  - type: component.entity
    options:
      isCompact: true
      children:
        - type: component.entity-field
          options:
            label: Name (string)
            # Reference the input using the inputs name
            value: [email protected]
        - type: component.entity-field
          options:
            label: Alternate Name (string-default)
            # Reference the input using the inputs name
            # No input is added in index.jigx so the default is shown
            value: [email protected]
        - type: component.entity-field
          options:
            label: contact number (number)
            # Reference the input using the inputs name
            value: [email protected]
        - type: component.entity-field
          options:
            label: Member (Boolean)
            # Reference the input using the inputs name
            value: [email protected]
        - type: component.entity-field
          options:
            label: Other members (array)
            # Reference the input using the inputs name
            # Specify the elements in the array to be returned
            # In this instance it is name
            # In the expression specific the item must be a string
            value: =$string(@ctx.jig.inputs.array.name)
        - type: component.entity-field
          options:
            label: Other members (array-item)
            # Reference the input using the inputs name
            # Specify the element in the array to be returned
            # Specify that only one item in the array must be returned
            # In this instance it is name
            value: [email protected][1].name
        - type: component.entity-field
          options:
            label: Object
            # Reference the input using the inputs name
            # Specify the object to be returned
            # All parameters in the object are returned
            value: =$string(@ctx.jig.inputs.object)
        - type: component.entity-field
          options:
            label: Name (object)
            # Reference the input using the inputs name
            # Specify the one parameter in the object to be returned
            # All parameters in the object are returned
            # In this instance the name parameter
            value: [email protected]
        - type: component.entity-field
          options:
            label: Age (object)
            # Reference the input using the inputs name
            # Specify the one parameter inthe object to be returned
            # All parameters in the object are returned
            # In this instance the age parameter
            value: [email protected]
        - type: component.entity-field
          options:
            label: Member (Object)
            # Reference the input using the inputs name
            # Specify the one parameter in the object to be returned
            # All parameters in the object are returned
            # In this instance the member parameter
            value: [email protected]

index.jigx

Dynamically pass data from another jig's components

Jig input definitions are configured directly in the jig and the input values returned from components configured in another jig. In the example below a form captures the student details, the Student Details form links to the Student Card jig and uses parameters to pass the values required in the Student Card inputs.

Dynamic input

input-student-card.jigx

title: Student Card
type: jig.default
# Define inputs for the jig
inputs:
  studentName:
    type: string
    required: true
  studentContact:
    type: number
    required: true
  studentAddress:
    type: object
    required: false
  studentPhoto:
    type: string
    required: true
  studentAllergies:
    type: array
    required: true
  studentResident:
    type: boolean
    required: true
    default: false

children:
  - type: component.card
    options:
      color: color9
      children:
        - type: component.avatar
          options:
            align: center
            size: large
            title: [email protected]
            uri: [email protected]

        - type: component.entity
          options:
            isCompact: true
            children:
              - type: component.entity-field
                options:
                  label: Name
                  value: [email protected]
              - type: component.entity-field
                options:
                  label: Contact number
                  value: [email protected]
              - type: component.entity-field
                options:
                  label: Address
                  value: =(@ctx.jig.inputs.studentAddress.streetAddress & ', ' & @ctx.jig.inputs.studentAddress.cityAddress & ', ' & @ctx.jig.inputs.studentAddress.countryAddress)
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Residence
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Allergies
                        value: =$string(@ctx.jig.inputs.studentAllergies.allergen)

input-student-details.jigx

Passing data from one jig to another

In this example, the sending jig 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 jig 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 similar 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]

Receiving Jig

Create a jig.default for the receiving jig. 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!

Passing data from a jig to a composite jig

In this example, three jigs contain various information for all customers, namely:

1. customer-list.jigx - A list of customers.

2. customer-contact.jigx - A list of the customer contact person.

3. 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 jig 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 jig is called customer-overview.jigx.

Send and receiving jigs

To achieve this configure the following:

1. Create the composite jig and include the JigIds for the customer-contact.jigx and customer-orders.jigx.

2. 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.

3. Add parameters to the customer list that include the customerId and customerName.

Sending Jig

Sending Jig with parameters

Create a list jig 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]

Supporting Jigs

Create two basic list jigs one for customer-contacts and the other for the customer-orders.

1. For the data property in both jig 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.

2. In the customer-contacts.jigx also add the customerName as an input with the type string.

customer-contacts.jigx

title: Customer Contacts
type: jig.list

inputs:
  customerId:
    type: string
    required: true
  customerName:
    type: string
    required: true

datasources:
  contacts:
    type: datasource.static
    options:
      data:
        - customerId: 1
          name: Jane Stevens
        - customerId: 1
          name: Jenny Smith
        - customerId: 2
          name: Mark Miller
        - customerId: 2
          name: Luke Meyer
        - customerId: 3
          name: Terry Anderson
        - customerId: 3
          name: Laura Peterson

data: [email protected][customerId = @ctx.jig.inputs.customerId]
item:
  type: component.list-item
  options:
    isContained: true
    title: [email protected]
    subtitle: [email protected]

customer-orders.jigx

Receiving jig (composite)

Receiving composite Jig

The receiving jig is a composite jig 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]