Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
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

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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>