Launch Flow from LWC

We were looking forward to embed Lightning flow inside lwc for a long time. Finally, wait is over. Now you can embed flow or launch flow from directly from Lightning Web Component. We are going to build a super simple account update form in a screen flow. Our target would be launch it from Lightning Web Component by passing the input variables of type account SObject. This gives so much flexibility to lwc developers.

Create Screen Flow

Step 1 – Go to setup, search flows in quick find and click on it

launch flow from lightning web component or embed screen flow in lwc and pass input variable

Click on new flow and select screen flow
create a sobject variable of type account

Create Screen Flow and use it in Lightning Web Component and pass input variable

Add a screen element on canvas
click on fields in left side pane and select account variable in record variable option

embed lightning flow in lightning web component and pass input variable

drag Account Name, Account Number and Industry field on canvas of screen element and click done.
Add update record element as below

update account record from flow via lwc and pass input variable

Save & Activate the flow and give it name – Update Account Triggered By LWC and API name as Update_Account_Triggered_By_LWC. Your flow should like this:

update account triggered via lwc in flow

Now, screen flow is ready. We will create a Lightning Web Component with name launchFlowFromLwc. We will also use an apex class named ContactController to query the account and pass it to flow input variable.

launchFlowFromLwc.html

HTML file uses lightning-flow standard component to launch flow and expect you to pass the flow-api-name. I am launching the flow only when singleAccount property defined in js has some value. We can also control the navigation behavior by using statuschange event of lightning-flow.

<template>
    <lightning-flow if:true={singleAccount} flow-api-name='Update_Account_Triggered_By_LWC'
        flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>
    </lightning-flow>
</template>

launchFlowFromLwc.js

connectedCallback – It will fire on load of the component. We are making an imperative apex method call and store the result in singleAccount property.

inputVariables – this getter returns the input variables required to launch flow. There can be different type of input variable like string, SObject etc.

handleStatusChange – This methods fires when statuschange event gets fired from flow.

import { LightningElement } from 'lwc';
import getSingleAccount from '@salesforce/apex/ContactController.getSingleAccount';
export default class LaunchFlowFromLwc extends LightningElement {
    singleAccount;
    connectedCallback() {
        getSingleAccount()
            .then((result) => {
                console.log('result', result);
                this.singleAccount = result;
            })
            .catch((error) => {
                console.log(error);
            });
    }
    get inputVariables() {
        return [
            {
                name: 'account',
                type: 'SObject',
                value: this.singleAccount
            }
        ];
    }

    handleStatusChange(event) {
        console.log('handleStatusChange', event.detail);
    }
}

launchFlowFromLwc.js-meta.xml

We have exposed the lwc to be used with any of the lightning pages among APP, Home or Record.

<?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__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

ContactController.cls

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static Account getSingleAccount() {
        return [
            SELECT Id, Name, AccountNumber, Industry
            FROM Account
            WITH SECURITY_ENFORCED
            LIMIT 1
        ];
    }
}