Skip to main content
Updated to point to answer with new functionality.
Source Link
shannonsans
  • 4.8k
  • 1
  • 27
  • 45

UPDATE: it's now possible to do this declaratively in your flow -- see new answer from Kris Goncalves.

The only way to do this currently is to use a code solution. You can override the footer by hiding the standard flow footer and adding a custom component to the bottom of your flow screen.

The only way to do this currently is to use a code solution. You can override the footer by hiding the standard flow footer and adding a custom component to the bottom of your flow screen.

UPDATE: it's now possible to do this declaratively in your flow -- see new answer from Kris Goncalves.

The only way to do this currently is to use a code solution. You can override the footer by hiding the standard flow footer and adding a custom component to the bottom of your flow screen.

Source Link
shannonsans
  • 4.8k
  • 1
  • 27
  • 45

The only way to do this currently is to use a code solution. You can override the footer by hiding the standard flow footer and adding a custom component to the bottom of your flow screen.

Here's an example from the documentation (link below):

<aura:component access="global" implements="lightning:availableForFlowScreens">
        
   <!-- Determine which actions are available -->
   <aura:attribute name="canPause" type="Boolean" />
   <aura:attribute name="canBack" type="Boolean" />
   <aura:attribute name="canNext" type="Boolean" />
   <aura:attribute name="canFinish" type="Boolean" />
   <aura:handler name="init" value="{!this}" action="{!c.init}" />
        
   <div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
      <!-- If Previous is available, display to the left -->
      <div class="slds-float_left">
         <aura:if isTrue="{!v.canBack}">
            <lightning:button aura:id="BACK" label="Previous"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
      <div class="slds-float_right">
         <!-- If Pause, Next, or Finish are available, display to the right -->
         <aura:if isTrue="{!v.canPause}">
            <lightning:button aura:id="PAUSE" label="Pause"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canNext}">
            <lightning:button aura:id="NEXT" label="Next" 
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canFinish}">
            <lightning:button aura:id="FINISH" label="Submit"
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
   </div>
</aura:component>

One limitation of this is that it won't automatically fix the buttons to the foot of the screen in quick actions, since flow doesn't understand that your component is a footer and not just a generic screen component.

See: