Conditional Navigation

If you have been brave enough to click on the Advanced tab when setting up a technical tab, you may have noticed the ability to conditionally navigate through the demo.

With the Conditional Navigation, you can

1. Prevent a demo from navigating to or from the current tab, based on a custom-defined condition
2. Dynamically route users to different steps and tabs, based on custom-defined conditions

Before Navigating

Use conditional logic to prevent users from navigating away from this tab. For example, you might want to make sure a value conforms to the correct format before executing a request.

Let's take a look at a quick example, where we prevent the demo from advancing to a response screen, without a valid email.

Following prior examples, assume there is already a request tab, named userSignup, where we collect some basic fields from a user. One such fields is an email, where we will be the focus of our conditional navigation.

We can make a naive check on email formatting by verifying the presence of "@" in the email.

this.requestValues.email.includes("@")

Paste this into the code editor to apply this check on the user email. The tab will only be reachable if the value returned from this code editor evaluates to true, then the current tab will not be rendered. Also, specify a custom Fail Message to give the user relevant feedback on why the demo did not proceed.

Now, if a user fails to enter an email address containing on the "@", on the userSignup tab, then the demo will not advance and they will receive the following alert in the bottom right corner.

After Navigating

Use conditional logic to prevent users from navigating to this tab. For example, you might want to conditionally check some response value in order to render a tab.

Dynamic Routing

Dynamically route users to different steps and tabs, based on custom-defined conditions. This feature unlocks the ability to construct demo experiences that may follow happy path / unhappy path structure by conditionally hiding or showing various tabs.

Add a Dynamic Destination Rule by hitting the plus icon. Each rule consists of a Condition and a Destination. Define your Condition to return a boolean value in the codeblock and select its associated Destination from the dropdown. When the condition evaluates to true, the demo will navigate to the associated destination.

Add a Fallback condition as a base-case location, if none of the other conditions evaluate to true.

In the following example, when the demo advances from Step 1, the demo will navigate to Step 3 if the value stored at currAmount is greater than 5, otherwise it will simple advance to Step 2.