How to Build Custom Footer Buttons in Salesforce Screen Flows (LWC)

In plain words: By default, Salesforce Screen Flows use standard "Next," "Previous," and "Finish" buttons at the bottom of the screen. While functional, they limit your ability to trigger custom validations, call external APIs before navigating, or apply custom branding. By building a custom Lightning Web Component (LWC) footer, you can take total control over how and when users move through your Flow.

Screen Flows are an incredible tool for guiding users through complex data entry processes. However, the out-of-the-box footer buttons are rigid. If you want to customize their labels dynamically, trigger custom Apex logic when a user clicks "Next," or align the styling with your company's brand, you need to step outside the standard declarative tools.

In this guide, we will walk through how to build a custom LWC to replace standard Screen Flow footer buttons, allowing for ultimate flexibility.

1. The LWC Configuration (XML File)

Before writing the UI or logic, your component must tell Salesforce that it is allowed to be placed inside a Screen Flow. Without this step, your LWC won't show up in the Flow Builder.

Create a new LWC named customFlowFooter. Open the customFlowFooter.js-meta.xml file and update it with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <!-- This target makes the component visible in Flow Builder -->
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

2. Creating the HTML Template

Next, let's build the visual layout. We will use standard Lightning Base Components to create a professional-looking button group that mimics the native Salesforce feel but gives us total control over the actions.

Open the customFlowFooter.html file:

<template>
    <div class="slds-float_right slds-m-top_medium slds-m-bottom_medium">
        <lightning-button-group>
            <lightning-button 
                label="Cancel" 
                onclick={handleCancel} 
                variant="neutral">
            </lightning-button>
            
            <lightning-button 
                label="Next Step" 
                onclick={handleNext} 
                variant="brand">
            </lightning-button>
        </lightning-button-group>
    </div>
</template>

3. Handling Flow Navigation via JavaScript

Here is where the magic happens. To make our custom buttons actually navigate the Flow, we have to import special navigation events from the lightning/flowSupport module. This allows our LWC to talk directly to the Flow engine.

Open the customFlowFooter.js file:

import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent, FlowNavigationBackEvent } from 'lightning/flowSupport';

export default class CustomFlowFooter extends LightningElement {
    
    // Grabs available actions (e.g., 'NEXT', 'BACK') from the Flow engine
    @api availableActions = [];

    handleCancel() {
        // Logic for Cancel (e.g., showing a modal, resetting data, or navigating back)
        if (this.availableActions.find(action => action === 'BACK')) {
            const navigateBackEvent = new FlowNavigationBackEvent();
            this.dispatchEvent(navigateBackEvent);
        }
    }

    handleNext() {
        // Here you can add custom validation or Apex calls BEFORE moving to the next screen!
        
        // If validation passes, move to the next screen
        if (this.availableActions.find(action => action === 'NEXT')) {
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }
}

Developer Trap: The 'availableActions' Array
Always check the availableActions array before dispatching a navigation event. If your Flow screen is the very first screen, the "BACK" action doesn't exist. Firing a Back event anyway will cause your component to throw an ugly error to the user!

4. Adding the Component to Your Screen Flow

Now that your code is deployed to your org, it's time to wire it up inside the Flow Builder.

Step-by-Step Procedure:
1. Navigate to Setup > Flows and open your target Screen Flow.
2. Double-click the Screen Node where you want your custom buttons.
3. In the left-hand Components sidebar, scroll down to the Custom section.
4. Drag your customFlowFooter component onto the very bottom of the screen canvas.
5. CRITICAL STEP: Click on the "Footer" section of the native Flow Screen properties and uncheck Show Footer. If you skip this, your users will see two sets of footer buttons!

360 Card: Why Build Custom Footers?

• Pre-Navigation Logic: Run Apex callouts, complex LWC validation, or save partial data before the Flow actually proceeds to the next screen.
• Dynamic Button Names: Instead of a static "Next", your button can conditionally say "Submit Payment" or "Generate Document" based on user input.
• Conditional Rendering: Hide or disable the "Next" button until a user checks a specific box or fills out an external LWC form.

Core Takeaway: Importing navigation events from lightning/flowSupport is the key to connecting LWCs directly to the Salesforce Flow engine.

Conclusion

Replacing the standard Salesforce Screen Flow footer with a Lightning Web Component opens up a world of possibilities. Whether you need to run complex client-side validations, execute API callouts mid-flow, or just make the UI look exactly like your corporate style guide, building a custom LWC footer is the ultimate solution. By leveraging the lightning/flowSupport module, you keep the declarative power of Flows while injecting the limitless flexibility of modern JavaScript code.