# Navigational Screen Flows in Router Mode ## Overview This tutorial demonstrates how to build a multi-screen flow with custom content for each screen using the [Avonni Progress Indicator](https://app.gitbook.com/s/1FUd4apB9YHgCEMUFbVb/flow-components/progress-indicator) component in router mode. Before starting, you'll need to [install the Avonni Components managed package](https://appexchange.salesforce.com/listingDetail?listingId=a0N4V00000IDsfbUAD) 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!

Flow Builder preview of the Horizontal Progress Indicator with router

## Result The final result displays a progress indicator that can be clicked to navigate from one screen to another.

## Guided Video Tutorial [**Watch Tim Combridge's guided video tutorial**](https://www.linkedin.com/posts/tim-combridge_avonni-salesforce-salesforceflow-activity-7207245371687792640-N_BU) Tim Combridge demonstrates how to create a user-friendly progress indicator within Salesforce Flow using router navigation. ![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FsuI4bbhuaSR4bgHdO81D%252F2024-06-21_11-37-54.png%3Falt%3Dmedia%26token%3D59ecd22c-f9c6-4b0e-8d09-f4f00448e3c1\&width=300\&dpr=4\&quality=100\&sign=d938a226\&sv=2) ## Guided Steps ### 1️⃣ Create the Current Step Variable 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.

### 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 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](#id-1-create-the-current-step-variable)). 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.

### 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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#1.-create-the-current-step-variable), accessible using the Mapped menu) * **Current Step** > Current Step (the variable created [in step 2](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#2.-create-the-progress-type-variable), accessible using the Mapped menu) Then, we can add any other component to that screen.

#### Set Up 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** {% hint style="warning" %} Don't select an option from the "Target Name" attribute. Leave this blank and complete the interaction as shown below. {% endhint %}

**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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#1.-create-the-current-step-variable)) * **Operator**: Equal * **Value**: {!ProgressIndicator\_Screen1.clickedStepValue} This ensures the flow knows which step is active, keeping the navigation smooth and accurate.

### 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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#1.-create-the-current-step-variable)) * **Current Step** > Current Step (the variable created [in step 2](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#2.-create-the-progress-type-variable)) 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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#1.-create-the-current-step-variable)) * **Current Step** > Current Step (the variable created [in step 2](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#2.-create-the-progress-type-variable)) 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](https://docs.avonnicomponents.com/tutorials/projects/creating-navigational-screen-flows-in-router-mode#assignment-for-screen-1).

### 7️⃣ Create the connection to the Router Screen 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!