Customize Flow Screens Using Aura Components

To customize the look and feel of your flow screen, build a custom Aura component. Configure the component and its design resource so that they’re compatible with flow screens. Then in Flow Builder, add a screen component to the screen.

  • Configure Components for Flow Screens

    Make your custom Aura components available to flow screens in Flow Builder by implementing the lightning:availableForFlowScreens interface.

  • Control Flow Navigation from an Aura Component

    By default, users navigate a flow by clicking standard buttons at the bottom of each screen. The lightning:availableForFlowScreens interface provides two attributes to help you fully customize your screen’s navigation. To figure out which navigation actions are available for the screen, loop through the availableActions attribute. To programmatically trigger one of those actions, call the navigateFlow action from your JavaScript controller.

  • Customize the Flow Header with an Aura Component

    To replace the flow header with an Aura component, use the screenHelpText parameter from the lightning:availableForFlowScreens interface.

  • Dynamically Update a Flow Screen with an Aura Component

    To conditionally display a field on your screen, build an Aura component that uses aura:if to check when parts of the component should appear.

See Also