Building Apps with Jigx
...
UI
Jigs (screens)

Passing data using outputs

4min

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.

Outputs

Output and inputs
Output and inputs


Outputs are configured in a and are then used as an input in a composite to pass data between the s in the composite . 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 s works both ways.

Considerations

  • An instanceId is required for the that is exposing an output in order to access the output via state from another .
  • The data from configuring outputs can only be used in composite s.
  • Using the output property must be reciprocated with an input property in the composite .
  • The output requires an output-key and a data value that is available in that .
  • The receiving 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 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

In this example, cleaning services are listed, initally 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
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 state for the active item [email protected]

Available services list
Available services list

cleaning-serv-horizon-list-dd.jigx
cleaning-services-dynamic.jigx


Jig - service details

Service detail jig
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


Composite jig - combining output with input

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

composite jig
composite jig


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

composite.jigx