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

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

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

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

• 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:

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
        ];
    }
}

Demo – Launch Flow From LWC

Add your lightning web component to home page and test it.