Lightning Web Component can be invoked via calling it inside a Lightning Screenflow. You might wanted to control the standard lightning flow navigation and have a custom footer. The question is how we can have custom footer within a flow with buttons you want instead of previous, next or submit?lightning/flowSupport
module provides events that enable a component to control flow navigation and notify the flow of changes in attribute values. Let’s create a Lightning Web Component with name lwcInFlow in VS Code and have below files:-
- lwcInFlow.html
- lwcInFlow.js
- lwcInFlow.js-meta.xml
lwcInFlow.html
HTML file of the lwc has record-edit-form to create contact record and have two buttons placed inside footer to submit and refresh the form.
<template>
<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
<lightning-messages> </lightning-messages>
<lightning-input-field field-name="AccountId"></lightning-input-field>
<lightning-input-field field-name="FirstName"> </lightning-input-field>
<lightning-input-field field-name="LastName"> </lightning-input-field>
<lightning-input-field field-name="Email"> </lightning-input-field>
<footer class="slds-modal__footer">
<lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Submit">
</lightning-button>
<lightning-button class="slds-m-top_small" onclick={handleRefresh} name="refresh" label="Refresh">
</lightning-button>
</footer>
</lightning-record-edit-form>
</template>
lwcInFlow.js
JS file of the component has imported FlowNavigationFinishEvent and NavigationMixin modules. There are two public properties defined:- availableActions and contactId. The availableActions will have all the available action to perform in Lightning Flow like NEXT, SUBMIT etc.
The file also has button handler to navigate to record and finish the flow.
import { LightningElement, api } from 'lwc';
import { FlowNavigationFinishEvent } from 'lightning/flowSupport';
import { NavigationMixin } from 'lightning/navigation';
export default class LwcInFlow extends NavigationMixin(LightningElement) {
@api contactId;
@api availableActions = [];
handleSuccess(event) {
this.contactId = event.detail.id;
this.NavigateToRecord();
}
handleRefresh() {
if (this.availableActions.find((action) => action === 'FINISH')) {
// navigate to the next screen
const navigateNextEvent = new FlowNavigationFinishEvent();
this.dispatchEvent(navigateNextEvent);
}
}
NavigateToRecord() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.contactId,
objectApiName: 'Contact',
actionName: 'view'
}
});
}
}
lwcInFlow.js-meta.xml
Xml file of the lightning web component has target attribute as lightning__FlowScreen to expose the component to lightning flow.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__FlowScreen</target>
</targets>
</LightningComponentBundle>
Call LWC in Lightning Flow
Let’s create a lightning flow and call the lightning web component inside it.
Add lwc in Screen Element
Inside a Screen element, search for lwcInFlow custom component to add it.
Drag the component in canvas and give it an api name.

Configure Screen Element Properties
Provide label and API Name. We need to provide it.
The important thing is uncheck show footer inside configure footer panel at the right bottom of the image.

Now, we need to save the flow and activate it. Once it has been activated, We are going to place it on home page to test it.

Now, Go to home page and edit the lightning home page to add the flow on it.

Save the page and activate it. We are good to test it.