Replace the Whole Flow Screen with Lightning Components

Now that you can hide the default header and footer in a flow screen, you can fully customize your user's experience. Take over the look and feel of your flows by building a Lightning component to replace the entire screen. Simply hide the header and footer, and add your Lightning component as a screen field.

Example

This component (c:flowFullScreen) replaces the entire flow screen, including the header and footer. It's comprised of three other custom components: a header, a footer, and a form.

A flow screen made up of Lightning components

c:flowFullScreen Component

1<aura:component implements="lightning:availableForFlowScreens" access="global" >
2   <!-- Get old phone number from flow -->
3   <aura:attribute name="oldPhone" type="String" required="true" />
4
5   <!-- Get new phone number from c:flowDynamicScreen to pass to flow -->
6   <aura:attribute name="newPhone" type="String" />
7
8   <c:flowHeader helpText="Some help text for you" />
9   <c:flowFooter actions="{!v.availableActions}" />
10   <c:flowDynamicScreen oldPhone="{!v.oldPhone}" />
11</aura:component>

c:flowFullScreen Design

The component gets the contact's existing phone number from the flow. It gets the new phone number from c:flowDynamicScreen, then passes that value into the flow.

1<design:component >
2   <design:attribute name="oldPhone" label="Current Phone" />
3   <design:attribute name="newPhone" label="Updated Phone Number" 
4      description="Use to update the contact's phone number" />
5</design:component>

Lightning Components Developer Guide

Replace the Whole Flow Screen with Lightning Components

Example

See Also