Stages at the top of the flow screen show your users where they are in the process. It’s simple to set up this progress bar and adds some pizazz to your flow.
First Step: Install Lightning Component
Click here to install the package OR to avoid logging in again, append packaging/installPackage.apexp?p0=04t8c00000109IP after .com in your org URL. For example, if I’m logged into an org on this page https://playful-goatd.lightning.force.com/blahblahblah then I would remove blahblahblah and paste in packaging/installPackage.apexp?p0=04t8c00000109IP so I’d have https://playful-goat.lightning.force.com/packaging/installPackage.apexp?p0=04t8c00000109IP
The package contains the lightning component I built using this code from developer.salesforceforce.com and based on Quick Start: Aura Components project. If you want to build your own aura component, be my guest! Don’t bother installing the package. In typical Trailhead fashion, the Quick Look doesn’t explain anything in depth, but it helped me understand how to copy and paste the code from the developer site.
Add Stages to a Flow
Step 1. Inside a flow, Toolbox > Manager > New Resource > Stage.
2. Label it, give it an order and check the box for active. I have three stages “Introduction”, “Tell Me More” and “Final Stage.” I want “Introduction to be first so I say 1 for Order. Click Done.
3. Repeat to create each of your stages.
4. Add an assignment element to your canvas.
- Under variable, go to Global Variables > Flow > CurrentStage
- Set that Equals to the stage that is 1 in the order. For me that’s “Introduction.” Click Done.
4. Add a Screen Element to your canvas then…
- Drag the StageIndicator component to the top of the screen.
- Click into the Active Stages box. Scroll down to $Flow under Global Variables and select $Flow.ActiveStages. This will display all of the stages on the screen that have the active box checked.
- Current Stage > $Flow > CurrentStage.
- Click Advanced. Check the box to Manually assign variables. This box makes the stages show up correctly when a user clicks the “previous” button to get to the last screen. [This step is missing in other posts I found about stages].
5. Repeat for each of your stages: Add an assignment element assigning the current stage, then a screen to display the current stage.
My flow looks like this with an assignment and a screen for each stage.
In a Nutshell
- Display stages on screens using the screen component Stage Indicator.
- Set the current stage using an assignment element and the global variable $Flow.CurrentStage as the element before the screen element.
- Add a stage by going to manager in your toolbox, add a new Resource, type Stage and check the box to make it active.
- To allow users to navigate back to earlier screens, check the box “Manually assign variables” under Advanced in the Screen Component.
Prefer to watch a video? This was helpful to me, but it didn’t explain how to go backwards between screens without getting an error.
Known Issue
Why does the first stage stay blue when it should turn green? You may have noticed in the images at the top of the post that when I moved to stage 2, “Tell Me More,” the progress bar remained blue.
This is a known issue. There’s a work around but that puts the word “Flow” above the progress bar which I think is more confusing than the original problem.
