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:

  1. Navigate to the screen flow's main design canvas.

  2. Locate and click on the "Elements" tab to access the available flow elements.

  3. Drag and drop the "Decision" element onto the canvas, serving as our router decision element.

  4. Double-click the decision element to configure it, and enter a name such as "RouterDecision".

  5. 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

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 component to set the navigation

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:

  1. Navigate to the screen flow's main design canvas.

  2. Locate and click on the "Elements" tab to access the available flow elements.

  3. Drag the "Assignment" element onto the canvas, placing it between the router decision element and step screen 1.

  4. Double-click the assignment element to configure it, and enter a name such as "AssignStepScreen1".

  5. In the "Variable Assignments" section, select the "currentStep" variable we created earlier.

  6. Set the value for the "currentStep" variable equal to "{!ProgressIndicator_Screen1.clickedStepValue}", indicating that the user has clicked on step screen 1.

  7. 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