Creating Navigational Screen Flows in Router Mode

Overview

This tutorial will guide you through creating a screen flow using the Avonni Progress Indicator Flow Screen component configured in router mode. This component allows you to create a progress indicator that can be used to navigate from one screen to another.

You'll learn how to add steps to the progress indicator and control the navigation when pressing a step button using a router and assignments screens. By the end of this tutorial, you'll have a deeper understanding of using the Avonni Progress Indicator to create a polished and intuitive user experience on your flow to create multi-screen flow navigation with specific content for each screen.

So, let's get started!

Result

Guided Video Tutorial

Guided Steps

1️⃣ Create the Current Step Variable

The first step is to create the Current Step variable. This variable stores and manipulates the current step value in our flow.

• Data Type > Text

• Default Value > step1

2️⃣ Create the progress type variable

In this step, we create the progress type variable, as we need to use the same value multiple times to define the default variant for the progress indicator. This can make your flow more efficient and easier to maintain.

• Data Type > Text

• Default Value > Horizontal

3️⃣ Router decision configuration

In this step, we use a 'router decision' to navigate users based on their selection of the progress indicator in our screen flow. This decision element helps steer the flow accurately according to user choice, ensuring the right actions are executed. It makes the progress steps visually interactive, allowing users to pick a step and move to the corresponding stage in the flow. Below are the steps to set up the router screen.

4️⃣ Create Screen 1

For screen 1, add the Progress Indicator component with the following settings:

• Type > Progress Type (the variable created in step 1, accessible using the Mapped menu)

• Current Step > Current Step (the variable created in step 2, accessible using the Mapped menu)

Then, we can add any other component to that screen.

Create the Next Screen interaction

From the Progress Indicator element, we need to create a next-screen interaction. This will ensure your flow will go to the next screen when pressing a step click.

• Open the Component Builder from the Progress Indicator component

• Open the Interactions tab

• Type > Flow Navigation

• Type > Next Screen

Assignment for screen 1

Assignments are useful for assigning values to variables or fields within a flow. By creating assignments, you can ensure that the data processed in your flow is accurate and consistent. Here, we are using an assignment to assign a default value related to the current step in screen 1.

Creating an assignment with the following settings:

• Variable: currentStep (we created that variable here)

• Operator: Equal

• Value: {!ProgressIndicator_Screen1.clickedStepValue}

5️⃣ Create Screen 2

For screen 2, add the Progress Indicator component with the following settings:

• Type > Progress Type (the variable created in step 1)

• Current Step > Current Step (the variable created in step 2)

Then, we can add any other component to that screen.

Create the Next Screen interaction

From the Progress Indicator element, we need to create a next-screen interaction. This will ensure your flow will go to the next screen when pressing a step click.

• Open the Component Builder from the Progress Indicator component

• Open the Interactions tab

• Type > Flow Navigation

• Type > Next Screen

Assignment for screen 2

You can go ahead and reproduce the same steps we did for the assignment for screen 1.

6️⃣ Create Screen 3

For screen 3, add the Progress Indicator component with the following settings:

• Type > Progress Type (the variable created in step 1)

• Current Step > Current Step (the variable created in step 2)

Then, we can add any other component to that screen.

Create the Next Screen interaction

From the Progress Indicator element, we need to create a next-screen interaction. This will ensure your flow will go to the next screen when pressing a step click.

• Open the Component Builder from the Progress Indicator component

• Open the Interactions tab

• Type > Flow Navigation

• Type > Next Screen

Assignment for screen 3

You can go ahead and reproduce the same steps we did for the assignment for screen 1.

7️⃣ Create the connection to the Router Screen

To ensure seamless navigation for our users, we must connect our Flow to return to the decision screen element. Similarly, we must connect the other navigation steps to ensure a smooth user experience. This connection will allow our users to quickly move between different steps in the flow without any confusion or disruption.