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

1.1. Navigate to Docupace Start via Administration>Single Pane of Glass>Widget

1.2. Create a new page.

1.3. Create a second new page.

1.4. Create a third new page.

_{Adding three pages to a wizard}

Step 2: Add a Field to pageOne

2.1. Open Add Field panel for pageOne.

2.2. Click Single Selection button to add it as the first field for this page.

2.3. Select the Single Selection field.

2.4. Open Field Settings.

2.5. Enter the following values for this field:

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.

Field Settings for a Single Selection field

Step 3: Add an Action.

3.1. Open Add Field panel.

3.2. Click Action button to add it to the page.

3.3. Select the Action field.

3.4. Open Field Settings.

3.5. Enter the following values for the field:

^{Adding an Action field}

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 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.

Field Settings for an Action field

Step 4: Configure pageOne Transition Settings

4.1. Open the Wizard tab

4.2. Select Page Settings for pageOne.

4.3. Configure the Transitions settings for this page:

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. 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 (1^st 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 "Second page" radio button.
Condition	`startingPointData.pageChoice == "Second page"`

Transition rules (2^nd 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 "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

6.1. Select one of the choices from the radio buttons.

6.2. Click the "Go to the selected page >" button. The wizard should navigate to the selected page.

_{Testing the Conditional Navigation Button}

Configuring Conditional Navigation Buttons