Navigation

4min
Navigation allows you to flow through the app. Whenever you go-to﻿ a , the  is added to the history, this allows you to go back and visit the s you visited before, and either show the history (data) on the UI or a new (clear) . This is helpful in complex flows, for example, adding multiple lines to an invoice and then submitting the invoice, or adding the details for each guest in a booking.
The go-to﻿ action is used to configure the flow of s in the app using the behaviour property. With the behaviour you determine if you want to push the screen into the app history, by using the new value, or show the one you already have in history by using the existing value.
New - creates a sequential stack showing the progression of navigation. Presents a new screen you are navigating to, allowing you to capture the next data set to add to the stack currently in the history. Typically, this would be used to capture the next line in an invoice.
State Navigation- New
﻿
Existing - jumps to previously visited screens by recognizing existing instances. Displays the data of the existing screen you are navigating to, typically used when you want to review the captured lines in an invoice before submitting.
State Navigation- Existing
﻿
How to configure navigation
1
In the go-to﻿ action use the behaviour property to select new or existing.
2
Configure the LinkTo property with the  name you want to open next.
3
Configure inputs if you are wanting to pass data between s. 
Considerations: 
By adding an instanceId to the go-to action, you choose if you want to create a new state or you want to reuse the existing state of a . Do not confuse this with the behaviour property's functionality. 
If no inputs and instanceId are specified, the instanceId of the  is set to no-inputs.
If an instanceId is specified, but inputs are not, then the instanceId uses the one specified.
If an instanceId and inputs are specified the instanceId uses the one specified.
If no instanceId is specified and inputs are specified the instanceId is hash (uuid) of the inputs.
Example and code snippets
In this example, three s are configured to create a stack of data for each guest, including their Name, Age, and Address. Each '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 , 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  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
﻿
Review guests
﻿
jig-a.jigx
jig-b.jigx
jig-c.jigx
title: Address
type: jig.default

# Use inputs from the first jig in the stack. 
inputs:
  fullName: 
    type: string
    required: true

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

children:
  - type: component.form
    instanceId: form-a
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: address
          options:
            isMultiline: true
            label: Address
            
actions:
  - children:
  
      - type: action.go-to
        options:
          inputs:
            fullName: =@ctx.jig.inputs.fullName
          # In this go-to action we go back to start capturing the next stack
          # in the data set.           
          title: Add another guest
          # Select new to push the jig into the app history,
          # this allows you to capture the next set of data for a new stack.           
          behaviour: new
          # Open the first jig in the stack to start capturing the new stack of data.           
          linkTo: jig-a
     # Add a second go-to action that will create a secondary button, 
     # allowing you to review the existing data set in the stack.
     # Add existing to behaviour which will cycle through all the jigs in the history,
     # showing the jig with the data for each jig. 
     # Note the jigs will cycle through the screens for each capture, 
     # meaning if you captured 3 sets in the stack, all 3 stacks are shown.  
      - type: action.go-to
        options:
          title: Review details
          # Select existing to return and display the jig data
          # that is held in the app history.          
          behaviour: existing
          # Open the first jig in the stack to start cycling through the data
          # for each stack captured.        
          linkTo: jig-a 
title: Address
type: jig.default

# Use inputs from the first jig in the stack. 
inputs:
  fullName: 
    type: string
    required: true

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

children:
  - type: component.form
    instanceId: form-a
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: address
          options:
            isMultiline: true
            label: Address
            
actions:
  - children:
  
      - type: action.go-to
        options:
          inputs:
            fullName: =@ctx.jig.inputs.fullName
          # In this go-to action we go back to start capturing the next stack
          # in the data set.           
          title: Add another guest
          # Select new to push the jig into the app history,
          # this allows you to capture the next set of data for a new stack.           
          behaviour: new
          # Open the first jig in the stack to start capturing the new stack of data.           
          linkTo: jig-a
     # Add a second go-to action that will create a secondary button, 
     # allowing you to review the existing data set in the stack.
     # Add existing to behaviour which will cycle through all the jigs in the history,
     # showing the jig with the data for each jig. 
     # Note the jigs will cycle through the screens for each capture, 
     # meaning if you captured 3 sets in the stack, all 3 stacks are shown.  
      - type: action.go-to
        options:
          title: Review details
          # Select existing to return and display the jig data
          # that is held in the app history.          
          behaviour: existing
          # Open the first jig in the stack to start cycling through the data
          # for each stack captured.        
          linkTo: jig-a 
﻿
﻿
﻿
﻿
State
Validation
Navigation

How to configure navigation

Considerations:

Example and code snippets

go-to using new & existing behaviour

﻿
