Salesforce Docs Portal

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.

By default, the flow header includes the title of the flow that's running and a button, where users can access screen-level help.

In this 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.

A custom flow header

Since the component implements lightning:availableForFlowScreens, it has access to the screenHelpText attribute, which contains the screen's help text if it has any.

<aura:component access="global" implements="lightning:availableForFlowScreens">

   <div class="slds-p-top_medium slds-clearfix">
      <div class="slds-float_left">
         <!-- Display company logo -->
         <h2><img src="{!$Resource.Logo}" alt="A.W. Computing logo"/></h2>
      </div>
      <div class="slds-float_right" style="position:relative;">
         <aura:if isTrue="{!v.screenHelpText ne null}">
            <!-- If the screen has help text, display an info icon in the header.
                 On hover, display the screen's help text -->
            <lightning:helptext content="{!v.screenHelpText}" />
         </aura:if>
      </div>
   </div>
</aura:component>

See Also