Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Get Your Aura Components Ready to Use on Lightning Pages
Use Aura Components in Experience Builder
Use Aura Components with Flows
Considerations for Configuring Components for Flows
Customize Flow Screens Using Aura Components
Create Flow Local Actions Using Aura Components
Embed a Flow in a Custom Aura Component
Display Flow Stages with an Aura Component
Display Flow Stages by Wrapping a Progress Indicator
Display Flow Stages By Adding a Progress Indicator to a Flow Screen
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Add Aura Components to Any App with Lightning Out (Beta)
Lightning Container
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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

c:flowStages_global Design

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

c:flowStages_global Style

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.