Do you know that now you can show your flow’s progress by writing a simple aura component that will track flow stages and display the progress? In this post, I am going to show you how you can quickly configure this in your flow.
Create the Aura Component
The good news is that Salesforce already provides the code which you can reuse and create your own Aura component. You can get the code here.
Creating the Flow
You need to create a screen flow. Configuration steps are given below –
Create Stages
For the flow we will be creating, let’s assume we have three stages as –
- Stage: About Me with Order: 10
- Stage: Upload Photo with Order: 20
- Stage: Update Address with Order: 30
Below is the screenshot of the “About Me” stage. You can create other stages the same way, just remember the order as this will define how the stages will be displayed on your flow screen.
Create the First Screen
Now you can create the first screen and add the lightning aura component which you have already created as mentioned in the first step. The aura component which I developed is “DisplayProgress”.
API Name – You can put any name
Current Stage – {!$Flow.CurrentStage}
Stages – {!$Flow.ActiveStages}
Manually assign variables (advanced) – This should be checked
Note – Do not put anything under “Store Output Values to Select Variables”
Create the Assignment
Now when your user will click next on the first screen, you will move to the next screen, but what you need to do is assign the flow’s current stage to the next stage as displayed in the screenshot below –
Create the Second Screen
Second screen is the same as first screen just change the API name as it has to be unique.
Create the Assignment
This time the assignment will change the flow’s current stage to the third stage.
Create the Final Screen
That’s all you need to do to give your user a nice clean user experience.
