Business Quote with vertical progress indicator

Overview

This tutorial requires the Avonni Flow Screen Components managed package to be installed on your Salesforce org.

This example will feature a vertical Progress Indicator, enabling users to navigate through various screens using Next and Previous buttons. As users progress through the flow, the vertical Progress Indicator will automatically update the steps based on our configuration.

In this tutorial, we will:

Configure a dynamic business quote component
Use Progress Indicator for step visualization
Customize screens for quote-building needs
Leverage Avonni Flow Screen Components Library
Enhance Salesforce ecosystem functionality and aesthetics

Step 1: Create the Current Step Variable

In our screen flow, we need to create a "current step" variable to store and manage the value of the current step as users navigate through the flow. This variable will be crucial for tracking user progress, enabling smooth transitions between steps, and ensuring accurate data handling throughout the flow.

Create a new variable
Data Type > Text
Default Value > step1

With the "current step" variable in place, the screen flow will have a dedicated storage for the current step value, allowing for efficient navigation and data handling throughout the user's interaction with the flow.

Step 2: Create the progress type variable

In this step, we need to create a "progress type" variable to store the default progress type value for the Progress Indicator component, ensuring consistency and reusability across all screens. This variable will be essential for maintaining a consistent user experience, as it will determine the display format of progress indicators throughout the flow.

Create a new variable
Data Type > Text
Default Value > Vertical

With the "progress type" variable established, the screen flow will have a consistent and reusable progress indicator format, enhancing the overall user experience as they navigate the different screens in the flow.

Step 3: Create the router decision element

To manage the user's navigation through the different screens effectively. Now we must create a router screen element to effectively address the user's navigation through the various screens. The router decision element will define the outcome for each flow path, ensuring a smooth and logical user experience. We'll create four outcome order paths, as we have four screens.

To create the router screen element, follow these steps:

Navigate to the screen flow's main design canvas.
Locate and click on the "Elements" tab to access the available flow elements.
Drag and drop the "Decision" element onto the canvas, serving as our router decision element.
Double-click the decision element to configure it, and enter a name such as "RouterDecision".
Add four outcome paths to the decision element, corresponding to the four screens in the flow.

Now, configure each outcome path as follows:

Outcome Path 1:
- Set the name and criteria to match the first screen in the flow.
- Link to the currentStep resource create in step 1 and set value equal to step1
Outcome Path 2:
- Set the name and criteria to match the second screen in the flow.
- Link to the currentStep resource create in step 2 and set value equal to step2
Outcome Path 3:
- Set the name and criteria to match the third screen in the flow.
- Link to the currentStep resource create in step 3 and set value equal to step3
Outcome Path 4:
- Set the name and criteria to match the fourth screen in the flow.
- Link to the currentStep resource create in step 4 and set value equal to step4

With the router decision element and its outcome paths in place, our flow is now set up to efficiently navigate users through the four screens while building a business quote. This ensures a seamless and intuitive experience for the user.

Step 4: Create each screen

Add a screen element
Enter an API name
Remove Header and Footer
Add a screen of two column to put the vertical progress indicator on the right of the screen
Add the Avonni Progress Indicator component

Configure the Progress Indicator component

Configure the Progress Indicator component as follow:

For the Type field, select "Mapped" and select the Progress Type variable created in step 1
For the Current Step field, select "Mapped"' and select the Current Step variable created in step 2
Check the "Enable click for each step" option
Enter your data source (the name of your steps)

Add the Avonni Button for the previous and next button with the corresponding interaction.

Add the Avonni Button Component
Open the Component Builder
Enter a label (i.e: Next for the Screen 1)
Set the Variant to Brand
Click on the Interactions tab
- Create an interaction: Flow Navigation > Next Screen

Step 5: create an assignment for each screen

In our flow, we must create an assignment for step screen 1 to effectively manage user interactions and navigation. By doing this, we can assign a variable value to a clicked step, allowing the flow to track user progress and ensure a smooth, responsive experience.

To create an assignment for step screen 1, follow these steps:

Navigate to the screen flow's main design canvas.
Locate and click on the "Elements" tab to access the available flow elements.
Drag the "Assignment" element onto the canvas, placing it between the router decision element and step screen 1.
Double-click the assignment element to configure it, and enter a name such as "AssignStepScreen1".
In the "Variable Assignments" section, select the "currentStep" variable we created earlier.
Set the value for the "currentStep" variable equal to "{!ProgressIndicator_Screen1.clickedStepValue}", indicating that the user has clicked on step screen 1.
Connect the assignment element to the router decision element and step screen 1, creating a link between them.

By creating this assignment for step screen 1, we ensure that the flow accurately tracks the user's navigation through the screens. When the user clicks on step screen 1, the "currentStep" variable will be updated with the value "1", allowing the flow to respond dynamically to user interactions and provide a seamless experience.

Step 6: Add a decision to check if the button was clicked

In this step, we'll add a decision element to check if a button was clicked. We can determine the user's interaction with the button by evaluating the outcome. If the button is clicked, we'll navigate to screen 2; otherwise, we'll proceed to the default outcome. This decision ensures a responsive and logical flow based on user input.

For subsequent screens, you will have two outcome as there's a previous and next button.

Step 7: Add assignments on the decision outcome

In this step, we'll add assignments to the decision outcomes based on the button clicked. Doing so lets us define the flow's direction for each step, depending on whether the user clicks the "previous" or "next" button. This approach ensures a responsive and intuitive user experience as the flow adapts to the user's actions throughout the process.

Step 8: test your flow

In the upcoming step, we'll test the flow for your quote using a vertical progress indicator component. This step is essential to ensure the flow functions as intended, with smooth navigation and accurate progress tracking. You can identify and address any issues by testing your flow, ultimately delivering a user-friendly and visually appealing quote-building experience.

Last updated 1 month ago