Lightning Components Developer Guide
jNewer Version Available
Customize the Flow Header with a Lightning Component
By default, the flow header includes the title of the flow that's running and a button, where users can access screen-level help.
Example
Instead of displaying the flow title and the help button, this component (c:flowHeader) displays the company logo and the help button. The help text appears in a tooltip when the user hovers, instead of in a modal when the user clicks.
c:flowHeader Component
Since the component implements lightning:availableForFlowScreens, it has access to the screenHelpText attribute, which contains the screen's help text if it has any.
1<aura:component access="global" implements="lightning:availableForFlowScreens">
2
3 <div class="slds-p-top_medium slds-clearfix">
4 <div class="slds-float_left">
5 <!-- Display company logo -->
6 <h2><img src="{!$Resource.Logo}" alt="A.W. Computing logo"/></h2>
7 </div>
8 <div class="slds-float_right" style="position:relative;">
9 <aura:if isTrue="{!v.screenHelpText ne null}">
10 <!-- If the screen has help text, display an info icon in the header.
11 On hover, display the screen's help text -->
12 <lightning:helptext content="{!v.helpText}" />
13 </aura:if>
14 </div>
15 </div>
16</aura:component>