Navigational Screen Flows in Router Mode
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial demonstrates how to build a multi-screen flow with custom content for each screen using the component in router mode. Before starting, you'll need to install the Avonni Components managed package in your Salesforce org.
We'll guide you through adding steps to the progress indicator and configuring navigation between screens using routers and assignment elements. By the end of this tutorial, you can create a smooth and intuitive user experience within your flow using the Avonni Progress Indicator.
Let's begin!
The final result displays a progress indicator that can be clicked to navigate from one screen to another.
Watch Tim Combridge's guided video tutorial
Tim Combridge demonstrates how to create a user-friendly progress indicator within Salesforce Flow using router navigation.
We first need to set up a variable called "Current Step" in our Salesforce flow. Think of this variable as a tracker—it’s like a note that keeps track of the user is current step as they move through the flow. By storing and updating this value, we can control what the user sees and where they go next. Here’s how to set it up:
Data Type: Choose "Text" because we’ll use simple labels (like "step1", "step2", etc.) to represent each step.
Default Value: Set it to "step1" so the flow knows to start at the first step when it begins.
This variable is the foundation of our progress indicator—it helps the flow remember where the user is and ensures the navigation works smoothly. Let’s create it and move forward.
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
Next, we’ll add a "Router Decision" to our Salesforce flow. This acts like a guide, directing users to the right screen based on the step they click in the progress indicator. It makes the indicator interactive—users pick a step, and the router takes them to the matching stage.
Why? It uses the "Current Step" variable to decide what happens next, keeping the flow smooth and functional. Here’s how to set it up in the steps below.
Setup: For the "Navigate to Screen 1" decision, we’ll use the "Current Step" variable (set up in Step 1). We’ll configure it to check if the variable equals "step1". If it does, the flow knows to take the user to Screen 1. Here’s how this works: when a user clicks "Step 1" in the progress indicator, the router matches it to "step1" and directs them to the right spot.
Next, we’ll repeat this process for the other steps—like "step2" for Screen 2—ensuring each click on the progress indicator takes the user exactly where they need to go. This ties everything together, making navigation seamless.
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.
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
Don't select an option from the "Target Name" attribute. Leave this blank and complete the interaction as shown below.
Assignment for screen 1
Assignments are practical 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}
This ensures the flow knows which step is active, keeping the navigation smooth and accurate.
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.
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.
We need to link our flow back to the "Router Decision" screen we set up earlier. This connection is key to keeping navigation smooth and seamless for users. By looping back to the router, the flow can check the "Current Step" variable and guide users to the right screen whenever they click a step in the progress indicator.
We’ll also connect the other screens (like Screen 2, Screen 3, etc.) similarly. This ensures users can move between steps easily, without getting lost or stuck. These connections tie everything together, making the flow intuitive and user-friendly!
