(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.

View 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.