System StatusSamples on GitHub

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

  • 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
Input definitions

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
Dynamic input

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 and receiving jig

Sending Jig

Sending jig with parameters
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]

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
Input- receiving jig

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

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.

Receiving jig (composite)

Receiving composite Jig
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.

PreviousJigs (screens)NextPassing data using outputs

Last updated

Was this helpful?