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.
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
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>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>1.THIS .slds-path__nav { margin-right: 0; }
2.THIS .slds-path__item:only-child { border-radius: 15rem; }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 } else if (status === "INCOMPLETE") {
37 // Show offline error
38 console.log("No response from server or client is offline.");
39 } else if (status === "ERROR") {
40 // Show error message
41 console.log("Error: " + errorMessage);
42 }
43 },
44 );
45 }
46 progressIndicator.set("v.body", body);
47 },
48});See Also
j