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 |
| This is the name of the field that is visible to the user and is displayed above the field. |
Meta Field Name |
| 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:
| |
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 |
| 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 |
| 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 |
| The name, used to refer to this specific transition from the Action button. |
Transition rules (1st rule) | Value | Details |
|---|---|---|
Page ID |
| 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 |
|
Transition rules (2nd rule) | Value | Detail |
|---|---|---|
Page ID |
| 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 |
|
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