Space TimelineSpace Timeline

Configuring Conditional Navigation Buttons

Click on Images to Expand Them

In a Docupace Start wizard a button with an Action Type "Perform Transition Action" is used to navigate to a specific wizard page based on conditions, such as data entered into wizard fields or any other conditions. This allows to skip pages, that are not necessary for the end-user. For example, if a page collects data about additional account stakeholders, but the user has previously marked that he is the sole entity owner, then it is not useful to show him the additional stakeholders page. He needs to proceed directly to the next steps of the wizard.

If the page contains several Action buttons that use different transitions, you must define a separate transition with a different name for each button in the Page Settings. In the simple example below, the wizard will navigate to one of three pages based on the radio button selected by the user. Proceed as follows:

To configure a button for conditional navigation, you will need to:

  • place on the wizard's page the data field(s) that will be used as conditions

  • create and configure the "Perform Transition Action" button

  • define the transition action itself and its condition rules in the Page Settings.

Step 1: Create a New Wizard

Adding three pages to a wizard

Step 2: Add a Field to pageOne

Field Settings for a Single Selection field

Field

Value

Details

Field

Value

Details

Field Label

Which page do you want to go to?

This is the name of the field that is visible to the user and is displayed above the field.

Meta Field Name

pageChoice

This is the unique name for the data held within the field. It will be used to define the conditions for the transition action.

Display Type

Radio list

This will show the choices as radio buttons.

Layout

Vertical

The radio buttons will be placed vertically, as a bulleted list.

Choices

Add the following choices by clicking +Add button:

  • Stay here

  • Second page

  • Third page

 

Required

Selected

The user will be required to fill in this field. This is a built-in validation. An asterisk will be displayed next to the field label.

Size by content

Selected

The field will take up only as much space as its text. The Column Span and Horizontal Alignment settings in this case will be ignored.

Step 3: Add an Action.

Adding an Action field

Field Settings for an Action field

Field

Value

Details

Field

Value

Details

Field Label

Go to the selected page >

This is the name that is displayed on top of the Action button.

Navigate only if the form is valid

Selected

When the user clicks this button, Docupace Start will check whether Single Selection field is filled out. If no radio button is selected, an error message will appear, and the user will need to correct the issue before navigating away from this page.

Action Type

Perform Transition Action

 

Action Value

pageSelectAction

This is the name of the Action as it will be defined in Page Settings.

Size by content

Selected

The button will take up only as much space as its text. It will be located right next to the Single Selection field. The Column Span and Horizontal Alignment settings in this case will be ignored.

Step 4: Configure pageOne Transition Settings

Setting

Description

Details

Setting

Description

Details

Transitions

Transition rules define, which page will be opened next. Conditions will be checked one by one in the order as they appear. The first condition which is evaluated to TRUE, defines the page that will open next. If neither of the conditions defined below evaluates to TRUE, then no action will be performed, i.e., the user will remain on the same page of the wizard.

If the page contains several Action buttons that use different transitions, you must define a separate transition with a different name for each button. In this case, we only need one transition with two rules.

Transition name

pageSelectAction

The name used to refer to this specific transition from the Action button.

Transition rules (1st rule)

Value

Details

Transition rules (1st rule)

Value

Details

Page ID

pageTwo

Name of the page that will open, if the condition below evaluates to TRUE. In this case, if the user selects the "Second page" radio button.

Condition

startingPointData.pageChoice == "Second page"

 

Transition rules (2nd rule)

Value

Detail

Transition rules (2nd rule)

Value

Detail

Page ID

pageThree

 

Name of the page that will open, if the condition below evaluates to TRUE. In this case, if the user selects the "Third page" radio button.

Condition

startingPointData.pageChoice == "Third page"

 

 

Defining Transitions in Page Settings

Note: Click +Add at the bottom of this section to create another condition.

Step 5: Save Your Changes

Step 6: Test Your Wizard

Testing the Conditional Navigation Button