How to Add LWC Component inside FLOW Salesforce

This blog will help, how to add LWC component in Lightning Flow. So first we need to create a LWC component. this component must be use:-

 import { FlowNavigationFinishEvent } from 'lightning/flowSupport'

flowSupport provide standard navigation as below:-

• FlowAttributeChangeEvent— Informs the runtime that a component property has changed.
• FlowNavigationBackEvent—Requests navigation to the previous screen.
• FlowNavigationNextEvent—Requests navigation to the next screen.
• FlowNavigationPauseEvent—Requests the flow runtime to pause the flow.
• FlowNavigationFinishEvent—Requests the flow runtime to terminate the flow.

Above import method allow LWC component in Flow

lwcInFlow.html

<template>
    <lightning-button label="Back" onclick = {handleBack}></lightning-button>
    <br/><br/>
    <lightning-button label = "Next" onclick = {handleNext}></lightning-button>
</template>

JS file of the component has imported FlowNavigationFinishEvent and FlowNavigationBackEvent that’s allow for navigation from one screen to next screen.

The file also has button handler to navigate to record and finish the flow.

lwcInFlow.js

import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent,FlowNavigationBackEvent } from 'lightning/flowSupport';
import { NavigationMixin } from 'lightning/navigation';
export default class LwcInFlow extends NavigationMixin(LightningElement) {
    @api availableActions = [];
        
    handleNext() {
        if (this.availableActions.find(action => action === 'NEXT')) {
          // navigate to the next screen
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
       
    }
 
    handleBack() {
        if(this.availableActions.find((action) => action === 'BACK')){
            const navigateBackEvent = new FlowNavigationBackEvent();
            this.dispatchEvent(navigateBackEvent);
        }
}
}

lwcInFlow.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

uniquesymbol