Display Flow Stages by Wrapping a Progress Indicator

If you’re tracking stages in your flow, display them at runtime by creating a custom component that wraps a progress indicator with the lightning:flow component. Use the progress indicator to display the flow’s active stages and current stage, and use the lightning:flow component to display the flow’s screens. To pass the flow’s active stages and current stage to the progress indicator, use the lightning:flow component's onstatuschange action.

Example

This c:flowStages_global component uses lightning:progressindicator to display the flow’s stages and lightning:flow to display the flow.

A component that displays a flow's stages above the flow.

c:flowStages_global Component

1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2   <aura:attribute name="currentStage" type="Object"/>
3   <aura:attribute name="activeStages" type="Object[]"/>
4   <!-- Get flow name from the Lightning App Builder -->
5   <aura:attribute name="flowName" type="String"/>
6
7   <aura:handler name="init" value="{!this}" action="{!c.init}"/>
8   <article class="slds-card">
9      <lightning:progressIndicator aura:id="progressIndicator" 
10         currentStep="{!v.currentStage.name}" type="path"/>
11        <lightning:flow aura:id="flow" onstatuschange="{!c.statusChange}"/>
12   </article>
13</aura:component>

c:flowStages_global Design

The design resource includes the flowName attribute, so you can specify which flow to start from Lightning App Builder.

1<design:component>
2   <design:attribute name="flowName" label="Flow Name"/> 
3</design:component>

c:flowStages_global Style

1.THIS .slds-path__nav { margin-right: 0; }
2.THIS .slds-path__item:only-child { border-radius: 15rem; }

c:flowStages_global Controller

The controller uses the flowName attribute to determine which flow to start.

Each time a new screen loads, the onstatuschange action fires, which gives the controller access to a handful of parameters about the flow. The currentStage and activeStages parameters return the labels and names of the relevant stages.

When onstatuschange fires in this component, it calls the controller's statusChange method. That method passes the flow's currentStage and activeStages parameters into the component's attributes. For each item in the activeStages attribute, the method adds a lightning:progressStep component to the component markup.

1({
2   init : function(component, event, helper) {
3      var flow = component.find("flow");
4      flow.startFlow(component.get("v.flowName"));
5   },
6
7   // When each screen loads ... 
8   statusChange : function(component, event, helper) {
9      // Pass $Flow.ActiveStages into the activeStages attribute
10      // and $Flow.CurrentStage into the currentStage attribute
11      component.set("v.currentStage", event.getParam("currentStage"));
12      component.set("v.activeStages", event.getParam("activeStages"));
13      
14      var progressIndicator = component.find("progressIndicator");
15      var body = [];
16      
17      for(let stage of component.get("v.activeStages")) {
18         // For each stage in activeStages...
19         $A.createComponent(
20            "lightning:progressStep",
21            {
22               // Create a progress step where label is the 
23               // stage label and value is the stage name
24               "aura:id": "step_" + stage.name,
25               "label": stage.label,
26               "value": stage.name
27            },
28            function(newProgressStep, status, errorMessage) {
29               //Add the new step to the progress array
30               if (status === "SUCCESS") {
31               body.push(newProgressStep);
32               }
33               else if (status === "INCOMPLETE") {
34                  // Show offline error
35                  console.log("No response from server or client is offline.")
36               }
37               else if (status === "ERROR") {
38                  // Show error message
39                  console.log("Error: " + errorMessage);
40               }
41            }
42         );
43      }
44      progressIndicator.set("v.body", body);
45   }
46})

Lightning Components Developer Guide

Display Flow Stages by Wrapping a Progress Indicator

Example

See Also