Creating Navigational Screen Flows in Router Mode
Overview
This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.
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
Steps
1️⃣ Create the Current Step Variable
The first step is to create the Current Step variable. This is needed to store and manipulate the current step value in our flow.
Data Type > Text
Default Value > step1
2️⃣ Create the progress type variable
In this step, we are creating 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 will need to 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.
Last updated
