How To

Flow ‘Em That Progress

(This blog post is written for Lightning Experience. Note: You can wrap lightning components in a visualforce page in Classic via Lightning Out. You will need to enlist the help of a developer for you to take advantage of the below.)

With Summer 18, using stages in visual workflow is now GA (or “generally available”).



I want to give a big shout out to Jason Teller, Salesforce Director of Product Management of Process Automation, for the assist on the new Stages feature in flow.


With stages, you can show your users the progress they are making as they interact with your flow screens, so they are not guessing how many more steps before they complete the task at hand. If you are accustomed to Path in Lightning Experience, it has the same look and feel where the current stage is highlighted and the completed stages are marked as checked.


Here are a few lessons learned from implementing this use case:

  • Build a lightning component to show the stages
  • How to interact with the stages within your flow

Business Case:  Addison Dogster is the system administrator at Universal Containers. Mary Markle is the Director of Sales. Mary would like her sales reps to work through a multiple screen component to gather information. The screen should give the sales reps an indicator as to where they are in the process.

Solution: Addison knew she wanted to use flow and that the staging feature in flow required the creation of a lightning component to show the stages. She was able to enlist the help of a developer friend to create the lightning component for her to use in flow.


View the image in full screen

Quick Steps:

Pre-Requisites: You are using Lightning Experience, have Lightning RunTime enabled for flows and MyDomain enabled in your org.

Note: This blog post will only focus on how to create the lightning component to show the path and how to configure the flow to set the stages, active and current stages.

1. Create the lightning component in your org via the blog post Display Flow Stages By Adding a Progress Indicator to a Flow Screen via Developer Console | File | New |Lightning Component. 

2. Let’s create the flow. In Lightning Experience, it is found under Process Automation | Flows.

In this flow example, unlike my other bog posts, I’m not going to step through creating the flow screens. We will only focus on the configuration of the stages.

A. First, we are going to create the Stages – Crawl, Walk and Run. Go to the Resource tab and select Stage. The order field on the Stage resource will denote the display order of the items within the stage.




B. Next, we will create the first assignment to set “Crawl” as the first and current stage.


C. Set up the initial screen with the lightning component that you created in Step 1. Drag the Lightning Component from the Add a Field tab. Configure the Inputs: Current Stage and Stages. Tab over to Outputs and click on the trashcan to delete the outputs.


Flow-InitialScreen.GIFView image full screen

C. Set up the second assignment to set “Walk” as the current stage.


D. Repeat Step B for the next screen, giving the lightning component a unique name.


E. Set up the third and last assignment to set “Run” as the current stage.


F. Lastly, repeat Step B for the next screen, giving the lightning component a unique name.


G. Once you are done with configuring the rest of your flow. Name, describe, save and activate the flow.

Congrats, you configured your flow screens using stages!

Now, before you deploy the changes to Production, don’t forget to test your configuration changes.

Deployment Notes/Tips:

  • Visual workflow and lightning component can be deployed to Production in a change set (or can be deployed using a tool such as Dreamfactory’s Snapshot).
  • Activate the visual workflow as it is deployed as inactive into Production.


11 thoughts on “Flow ‘Em That Progress

  1. Great walkthrough! Really appreciate the help. I’ve added the progress bar to one of our existing flows and it is working, however, the formatting and scale are off. The progress bar is running off the screen and getting cut off. Any suggestions on how to fix that?


  2. Is the progress bar running off the screen because of the number of stages you have? If there are too many, you can collapse the past ones into one stage with a new name. I believe Salesforce has documentation on how to do this.


  3. It was odd, it was running off the flow screen and the original fields we had displayed were moved over as well. For the record, we were able to fix it by changing the display from double column to single. Thank you again for the post!


  4. It works fine apart from one thing. if the user hits the previous button in my flow they are greeted with the following error message! (The delimiter of “StageVariable” stage is missing.) I really like the stage progress bar but i don’t think i can keep it if the user can’t return to the previous screen 😦


  5. Found a fix for this. I used a string collection and passed that into the active stages instead of using stage variables. For the current stage i literally just wrote the text for the stage instead of a using assignments and stage variables.


  6. I’m not sure. I recommend that you post this question to the Trailblazer community and at mention John Kucera, Jason Teller, Tim Peng, Shannon Hale, Alex Edelstein. They are the product managers and would be able to tell you one way or the other.


Comments are closed.