Passing data using inputs
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, pre-populating the customer's details. This is accomplished by utilizing inputs and outputs.
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.
Properties | Values |
|---|---|
default | Add a value that will display as the default if nothing is specified. This property is optional. |
required |
|
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 YAML format for specifying the array can be one of the following:
|
| boolean - input must be true or false. |
| number - input must be of type number, for example, 45 or 350.88. |
- 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]
- If you are in a list-item component, you don't need to list all the parameters, simply use: parameters: customer: [email protected]
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 .
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.
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 Jig
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]
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".
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.
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
Create a list 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 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.
Receiving jig (composite)
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.
