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
actions:
  - children:
      - type: action.go-to
        options:
          title: Go to
          linkTo: default-employee-detail

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.

item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: avatar
      text: " "
      uri: [email protected]
    rightElement:
      element: button
      title: Go to
      onPress:
        type: action.go-to
        options:
          linkTo: default-employee-detail

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-rightElement.jigx
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: avatar
      text: " "
      uri: [email protected]
    rightElement:
      element: button
      title: Go to
      onPress:
        type: action.go-to
        options:
          linkTo: default-employee-detail

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-onSuccess.jigx
actions:
  - children:
      - type: action.action-list
        options:
          title: Sign and go to detail
          isSequential: true
          actions:
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/form
                method: create
                data:
                  signature: [email protected]
                onSuccess:
                  title: Succesfully signed
                  actions:
                    - type: action.go-to
                      options:
                        title: Go to employee detail
                        linkTo: default-employee-detail
            - type: action.go-back

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
title: Go To action
type: jig.list

data: [email protected]
item:
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    leftElement:
      element: avatar
      text: " "
      uri: [email protected]
    rightElement:
      element: button
      title: Go to
      onPress:
        type: action.go-to
        options:
          # When navigating to the jig, the jig opens as a modal,
          # specifying false will open as a normal jig.
          isModal: true
          linkTo: default-employee-detail

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
title: Name
type: jig.default

onFocus:
  type: action.reset-state
  options:
    state: [email protected]

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1521336575822-6da63fb45455?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFkdmVudHVyZXxlbnwwfHwwfHx8MA%3D%3D

children:
  - type: component.form
    instanceId: form-a
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: fullName
          options:
            label: Name

actions:
  - children:
      - type: action.action-list
        options:
          title: NEXT
          isSequential: true
          actions:
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_LOCAL
                entity: guests
                method: save
                data:
                  fullName: [email protected]
            # The go-to action is configured to open the next jig in the stack.
            - type: action.go-to
              options:
                # Set the parameters to use the value held in the state,
                # this will be used as an input throughout the stack.
                inputs:
                  fullName: [email protected]
                # Select new to push the jig into the app history,
                # this allows you to capture the next jig's data in the stack.
                behaviour: new
                # Configure which jig must open next.
                linkTo: jig-b

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
title: Personal Details
type: jig.default
# Navigate to another jig with go-to action.
actions:
  - numberOfVisibleActions: 1
    children:
      - type: action.go-to
        options:
          title: Get details
          linkTo: values
          isModal: true
          # Specify an instanceID for the target jig (Jig B-target jig)
          instanceId: MyDetails

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Name
            value: [email protected]
        - type: component.entity-field
          options:
            label: Date of Birth
            # Use the expression in the format 
            # [email protected].[isntance-id-of-the-jig].outputs.[key-of-output],
            # to display the output of the target jig. 
            value: [email protected]
        - type: component.entity-field
          options:
            label: Phone number
            # Display the output of the target jig.
            value: [email protected]
Previousgo-backNextinfo-modal

Last updated

Was this helpful?