How to use LWC in Flow?

by

In this post, we will implement the functionality to use LWC in Flows to add LWC on the Screen Component in Flows. We will also cover How to pass the parameters from Flow to Lightning Web Component. Let’s hop into the implementation.

Implementation

In this implementation, we will create a Lightning Web Component to display Account Details using lightning-record-form. Check lightning-record-from in LWC to know how to use Lightning Data Service in Lightning Web Components.

Steps to add LWC in Flow

  • To make LWC available in Flow is to add lightning__FlowScreen target in the metafile of the component.
  • Add targetConfig with property for lightning__FlowScreen target to pass a parameter from Flow to LWC (Lightning Web Component).
  • Annotate Lightning Web Component properties with @api which will get the data from Flow.

This is how our metafile will look:

showAccount.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="strRecordId" type="String" label="Current Account Id" 
                        description="Id of the current record"/>
        </targetConfig>
    </targetConfigs>
    
</LightningComponentBundle>

Our Component will have a simple lightning-record-form to display the Account Record.

showAccount.html

<template>
    <lightning-card title="Create and View Account Record">
        <div class="slds-p-horizontal_small">
        
            <lightning-record-form object-api-name="Account" record-id={strRecordId}
            columns="2" mode="edit" fields={arrayFields}></lightning-record-form>
        </div>
    </lightning-card>
</template>

Finally, the JavaScript file to pass the list of fields to display in component along with @api annotated strRecordId property to get the record Id from Flow.

showAccount.js

import { LightningElement, api } from 'lwc';

export default class ShowAccount extends LightningElement {
    @api strRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];
}

We are done with our Lightning Web Component.

Add LWC in Flow

Create a Screen type Flow and add a Screen Component. Check this post to know the basics of How to use Flow Builder and create Flow in Salesforce.

For this implementation, we will create a Quick Action on Account Object to display Flow. Check this post to know How to use Flow as a Quick Action. Create recordId variable which will have the Id of the current Account, that will be passed to our Lightning Web Component.

Once the Flow is created, search for the LWC in Search Components on Screen Component and drag it on the Screen canvas. Select recordId for the Current Record Id property that we added for the Component from metafile. This is how it should look:

Add LWC in Flow
Add LWC in Flow

That is all, add the Quick Action on the Record page of Account and we are ready to use our Flow which uses Lightning Web Component to display Account details using lightning-record-form.

This is how our output will look after clicking on a Quick Action button from Account details page:

Use LWC in Flow
Use LWC in Flow

That is all from this post. This is how we can add LWC in Flow Screen and pass parameters to Lightning Web Component in Flow.

Also Read:

If you don’t want to miss new implementations, please Subscribe here.

Useful Resources:

Leave a Comment