Call Lightning Screen Flow inside Lwc Component

Telegram logo Join our Telegram Channel

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.

Call Lightning Screen Flow inside Lwc Component

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.

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.

        <!-- Invoke a Screen flow in LWC -->

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


    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") {
    				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.

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at