Building a Business Quote
Last updated
Was this helpful?
Last updated
Was this helpful?
To follow this tutorial, you must install the Avonni Components App for Flows.
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.
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
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.
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.
To manage the user's navigation through the different screens effectively. Now we must create a router screen element to address the user's navigation through the various screens effectively. 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.
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 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 with the corresponding interaction for the previous and next buttons.
Add the Avonni Button Component: Drag and drop the Avonni Button component onto your screen.
Open the Component Builder: Access the configuration panel for the button.
Set the Button Label: Provide a descriptive label for the button (e.g., "Next" for the button on Screen 1, "Previous" for the button on Screen 2).
Set the Button Variant: Choose a visual style for the button. "Brand" is often a good choice for primary actions.
Configure the Interaction: Go to the "Interactions" tab in the Component Builder.
Create a Flow Navigation Interaction: Add a new interaction and select "Flow Navigation" as the type. Choose "Next Screen" for a "Next" button, or "Previous Screen" for a "Previous" button. This will link the button click to the corresponding screen transition in your flow.
To track user progress and navigation, we'll assign a value to the currentStep variable when the user interacts with Screen 1.
Drag an "Assignment" element between the router decision and Screen 1 on the flow canvas.
Name the assignment (e.g., "AssignStepScreen1").
In the "Variable Assignments" section, set the currentStep variable to {!ProgressIndicator_Screen1.clickedStepValue}. This captures the clicked step value from the progress indicator component on Screen 1.
Connect the assignment element to the router decision and Screen 1.
This assignment updates the currentStep variable when the user clicks on Screen 1, enabling the flow to respond to navigation dynamically
Check for Button Click on Screen 1
We'll use a decision element to determine if the button on Screen 1 was clicked. We'll check the button's "Clicked" resource and configure the decision element to evaluate if it's true. If true (the button was clicked), the flow will navigate to Screen 2. Otherwise, it will proceed along the default path. This ensures the flow responds correctly to user interaction.
If the button is clicked, an assignment will set the currentStep variable (created in Step 1) to "step2". This assignment will then direct the flow to Step 2 (Screen 2).
For screens between the first and last, the decision element will have two outcomes: "Next" and "Previous." The decision will evaluate the clicked button's name to determine whether it was the "Previous" or "Next" button.
After configuring the button click assignment, we'll use the "Connect to Element" feature to link the assignment to the Router Screen element.
We'll now test the quote flow using the vertical progress indicator component. This crucial step verifies correct functionality, smooth navigation, and accurate progress tracking. Testing allows us to identify and fix issues, ensuring a user-friendly and visually appealing quote-building experience.
