Right from the get-go, the possibility for Salesforce Admins to build custom-guided wizards has been a significant game changer. While they could have built other types of automation in the past using Process Builder and Workflow Rules, none of them allowed the capabilities that Screen Flows bring to the table.
As the user will most likely have to navigate through multiple screens, wouldn’t it be great for them to know how many pages they have yet to go through? In this post, we will explore a tool that will enhance your Screen Flows with progress indicators in no time.
Dynamic Flow Progress
This package is an AppExchange listing by Salesforce Labs, meaning that it will always remain free to use while also passing the security review to be listed. Additionally, while installing the package, you will notice that the option is given to access the source code as well.
While you can make use of this AppExchange listing as it is since the code itself is open source, you can make any additional changes you’d like or need to make. Alternatively, if you would like to start from scratch, you could also build your very own custom component and leverage the Flow stage resources.
Build or Edit Your Flow
Once the package is installed, the custom component will become available within Flow Builder. You can build a new Flow from scratch if you’d like, but nothing is stopping you from updating an existing Screen Flow to make a progress indicator of your choice available.
In this case, I had an existing version of a Screen Flow with three screens available and chose to edit it. Since I am looking forward to making it clear what stage the wizard was at when the error happened, I will also opt to add the progress bar to that element.
The flow itself is embedded on the Account Record Page and allows users to choose an open Opportunity from the Account and add the Decision Maker Contact Role to it. Of course, the Flow may evolve over time to allow adding multiple Contact Roles with different Roles let’s say, so it may not be the last time edits are made.
For such situations, it is a good idea to add notes and update the description accordingly. Also, remember to update the new component we’ll be adding and quickly let your colleagues know that it’s being used.
Add the Progress Indicator
Now that the Flow is chosen, it’s time to edit the three Screen elements in order to add the new component as well as the stages. The names of the steps will be added in a comma-separated format in the dedicated field, while the Current Step will be the highlighted one for the particular screen the component is on.
This component brings six types of progress indicators to choose from. Let’s see what each of them would look like:
- Vertical
- Horizontal
- Path
- Bar
- VertNav
- Ring
After deciding which of them works best for your use case, it’s just a matter of setting up the components on each individual screen. The fields do need to be completed on each occurrence of the custom component; hence, you have full control over the values and style.
For example, if the Flow evolves in the future and has multiple possible paths based on the initial selection, there’s no problem with having different progress indicators for the different groups of screens.
Once the component is added to each Screen element, it’s time to test the flow and make sure it works as intended. Keep in mind that the progress indicator is not a navigation mechanism, and it only serves as a visualizer.
While you can experiment with the different types of indicators, it is most likely a good idea to keep the choice consistent throughout the Flow in order to not create confusion. In this case, I went back and selected the Path option for all three of my screens.
Summary
Screen Flows are here to stay, and there will always be new ways to enhance the user experience while providing more insight into the process or information needed. While it may not seem like a huge change, simply knowing how many pages or steps there are to go through will provide you with clear context and guide the end user through each section.
Whether it’s the Salesforce Labs package or a different component, are you using any sort of progress indicator in your Screen Flows yet? Share your experience with us in the comments below!