System StatusSamples on GitHub

go-to

This action redirects you to another jig. The go-to action can be used with elements like swipeable and rightElement or combined with another action. When paired with another action, it is triggered after the main action to navigate to a specified screen, for example, saving a date in a form and then opening a list of customers. go-to helps configure navigation, ensuring a seamless app flow. See Navigation for more information.

Configuration option

A go-to action can be set up in various ways:

  1. As a separate action or in the action list.

  2. As an associated action in the action list.

  3. As a swipeable action in the left or right direction.

  4. As rightElement in the list.

  5. Use the go-to to open a jig as a modal using the isModal property set to true. Set to false opens navigates to the specified jig.

  6. Use the behaviour property to determine if you want to push the jig into the history of navigation, by using the new value, or reuse the one you already have in history by using the existing value.

  7. When you navigate to a jig using the action.go-to or open it as a bottom modal (by setting isModal: true), you can access the outputs from that jig by referencing its instanceId in your context expressions. In the originating jig, use the syntax [email protected].[isntance-id-of-the-jig].outputs.[key-of-output] to retrieve specific output values. See the Accessing jig outputs from a modal example.

Considerations

  • Current known limitations when using the isModal property include:

    • Unable to send a value from the jig modal to the parent jig.

      • Depending on the device used different behavior can be expected, such as the jig will slide from the bottom to top, but the entire screen will be covered. This applies to:

        • On any Android device (phones and tablets).

        • On an iPad in landscape mode:

          1. When the drawer is open, it will only open in the jig panel.

          2. When the drawer is closed, it will cover the entire screen, but it will not display as a modal.

Examples and code snippets

go-to as an action

go-to action
go-to action

The simplest example of using a go-to action is to use it as a separate action. When configured, a button will appear at the bottom, redirecting us to the details page when pressed.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

go-to swipeable left/right

go-to with swipeable
go-to with swipeable

This example uses the go-to action as a swipeable property. We can choose the swipe direction left or right. After pressing the button, it will redirect to the details of the person.

Examples left: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Examples right: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

go-to right button element

go-to button
go-to button

In this example, we use the go-to action as the rightElement in the list-item component. There is a button for each item.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

go-to onSuccess

go-to onSuccess
go-to onSuccess

In this example, the go-back action is associated with the submit-form action. After we enter the signature and press the "Sign" button, the submit-form action is performed and then the go-to action redirects us to the next page.

Examples: See the full example using dynamic data in GitHub.

go-to open a jig as a modal

In this example, we use the go-to action as the rightElement in the list-item component. There is a button for each item. When tapped the go-to will open the jig as a modal when the isModal property is set to true.

Examples: See the full example using dynamic data in GitHub.

Open jig in a modal
Open jig in a modal

go-to using new & existing behaviour

In this example, three jigs are configured to create a stack of data for each guest, including their Name, Age, and Address. Each jig's go-to action is set with the behaviour property as new, enabling new guest details to be pushed into the app history. In the final jig, a secondary go-to action is added. This action introduces a button to review each guest's data by setting the behaviour property to existing and linking to the first jig in the stack via the linkTo property. The review process will cycle through each guest's details in the stack before completing.

Go-to new guest
Go-to new guest
Review guests
Review guests

Accessing jig outputs from a modal

When you navigate to a jig using the action.go-to or open it as a bottom modal (by setting isModal: true), you can access the outputs from that jig by referencing its instanceId in your context expressions. In the originating jig, use the syntax [email protected].[isntance-id-of-the-jig].outputs.[key-of-output] to retrieve specific output values. The instanceId must match the one specified in the instanceId field of your navigation action, and the key corresponds to the specific output field you want to access from the target jig. This allows for seamless data flow between jigs, whether they're opened as full-screen navigations or modal overlays, enabling you to capture user interactions and form submissions from the modal jig and use them in the parent jig's logic or display.

go-to action with outputs
go-to action with outputs
Previousgo-backNextinfo-modal

Last updated

Was this helpful?