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.

This example only applies to flows that have active stages.

Note

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, giving 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      // don't do anything if the flow doesn't have active stages
10      if (!event.getParam("currentStage") || !event.getParam("activeStages")) {
11          return;
12      }
13      // Pass $Flow.ActiveStages into the activeStages attribute
14      // and $Flow.CurrentStage into the currentStage attribute
15      component.set("v.currentStage", event.getParam("currentStage"));
16      component.set("v.activeStages", event.getParam("activeStages"));
17      
18      var progressIndicator = component.find("progressIndicator");
19      var body = [];
20      
21      for(let stage of component.get("v.activeStages")) {
22         // For each stage in activeStages...
23         $A.createComponent(
24            "lightning:progressStep",
25            {
26               // Create a progress step where label is the 
27               // stage label and value is the stage name
28               "aura:id": "step_" + stage.name,
29               "label": stage.label,
30               "value": stage.name
31            },
32            function(newProgressStep, status, errorMessage) {
33               //Add the new step to the progress array
34               if (status === "SUCCESS") {
35               body.push(newProgressStep);
36               }
37               else if (status === "INCOMPLETE") {
38                  // Show offline error
39                  console.log("No response from server or client is offline.")
40               }
41               else if (status === "ERROR") {
42                  // Show error message
43                  console.log("Error: " + errorMessage);
44               }
45            }
46         );
47      }
48      progressIndicator.set("v.body", body);
49   }
50})

Lightning Aura Components Developer Guide

Display Flow Stages by Wrapping a Progress Indicator

Example

See Also