LWC Inside Flow With Custom Footer

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.

salesforcediaries.com

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.

salesforcediaries.com

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.

salesforcediaries.com

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

salesforcediaries.com

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

Leave a Reply