How to add a lightning flow in LWC

ByPastek Editor Blogs

Introduction:

We can embed flow or launch flow directly from Lightning Web Components. We are going to build a super simple account update form in a screen flow. Our target would be to launch it from the 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 select flow on it

* Click on new flow and then 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 an 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. And the  flow should like this:

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

launchFlowFromLwc.html:

  1. Can launch flow from LWC.
  2. We can pass multiple parameters to flow from the LWC component.
  3. We can get success or error messages from the Lightning Flow.
  4. We use <lightning-flow> in the LWC component to embed the flow.

<template>

    <lightning-flow if:true={singleAccount} flow-api-name=’Update_Account_Triggered_By_LWC’

        flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>

    </lightning-flow>

</template>

Process:

Step 1 –  Here we will create input variables so we can get data from the LWC component.

Step 2 – Here we fetch the account details and the record ID we have. For this, we chose to get the record source.