Call Lightning Screen Flow inside Lwc Component

Hello Friends! In this post, we will see how can we call the Lightning Screen Flow inside your custom Lightning Web Component. Yes, you heard it right, from Winter 2023 release, you can call Salesforce Screen Flows from LWC components.

Note: This feature works with Winter 2023 and later releases only.

Salesforce has added a brand new lightning-flow component, using which we can call screen flows inside the LWC component.

The lightning-flow component takes three attributes.

1. flow-api-name - API name of the screen flow that you want to call inside LWC.
2. flow-input-variables - This is an array used to set values to flow input variables.
3. onstatuschange - This is an event fired when the step of the flow moves forward or backward.

GitHub Repo

You can find all code from this blog in the GitHub Repo linked below.

https://github.com/rahulgawale/call-flow-in-lwc/tree/master/force-app/main/default/lwc/flowInLwc

How to call Lightning Flow From in LWC?

1. Create a new Screen flow or you can use any existing screen flow.
2. Test your flow.
3. Add the below code to your Lwc component.
   .html
   
   

   <template>
       <!-- Invoke a Screen flow in LWC -->
       <lightning-flow
           flow-api-name={flowApiName}
           flow-input-variables={flowInputVariables}
           onstatuschange={handleFlowStatusChange}
       >
       </lightning-flow>
   </template>
   

   
   Please note that in the above code we are setting three attributes to 
   
   .js
   
   

   import {LightningElement} from "lwc";
   import {ShowToastEvent} from "lightning/platformShowToastEvent";
   export default class FlowInLwc extends LightningElement {
   	flowApiName = "Create_Lead_Flow"; // api name of your flow
   
   	// Setting flow input variables
   	accountId = "<--add account id here-->";
   	flowInputVariables = [
   		{
   			name: "accountId",
   			type: "String",
   			value: this.accountId,
   		},
   	];
   
           // do something when flow status changed
   	handleFlowStatusChange(event) {
   		console.log("flow status", event.detail.status);
   		if (event.detail.status === "FINISHED") {
   			this.dispatchEvent(
   				new ShowToastEvent({
   					title: "Success",
   					message: "Flow Finished Successfully",
   					variant: "success",
   				})
   			);
   		}
   	}
   }

4. Deploy your component and add it to your desired screen. 
5. Enjoy the power of flow inside the Lightning web component!

Hope you liked the quick guide for adding Screen flow inside the
Lightning web component. Please follow for more.