Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Lightning Component Bundle Design Resources
Use Lightning Components in Lightning Experience and the Salesforce Mobile App
Get Your Lightning Components Ready to Use on Lightning Pages
Use Lightning Components in Community Builder
Use Lightning Components with Flows
Customize Flow Screens By Using Lightning Components
Working with the Flow Lightning Component
Display Flow Stages with a Lightning 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
Use Lightning Components in Visualforce Pages
Add Lightning Components to Any App with Lightning Out (Beta)
Communicating with Events
Creating Apps
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

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

Display Flow Stages with a Lightning Component

If you've added stages to your flow, display them to flow users with a Lightning component, such as lightning:progressindicator.

This release contains a beta version of flow stages that is production quality but has known limitations. To provide feedback and suggestions, go to IdeaExchange.

Note

To add a progress indicator component to your flow, you have two options:
  • Wrap the progress indicator with a lightning:flow component in a parent component. 
    1<aura:component>
2   <lightning:progressindicator/>
3   <lightning:flow/>
4</aura:component>
  • Add the progress indicator to your flow screen directly, by using a Lightning component screen field.

It's easier to get labels for the active and current stages in a flow from the lightning:flow component.

  • Wrapper component: The onstatuschange action in the standard lightning:flow component returns the names and labels for the flow's active stages and current stage.

  • Lightning component screen field: You can only pass the fully resolved stage name into a Lightning component. If your flow is namespaced, the fully resolved name is namespace.flowName:stageName. Otherwise, it'sflowName:stageName.

    Depending on your naming convention, you can convert the stage names into labels by dropping the namespace and flow name, then replacing underscores with spaces.