Salesforce Consulting Blog

Lightning Flow Builder is one of the powerful automation tools available in Salesforce which gets the work done without a single line of code.

In Lightning Flow Builder, you can accomplish almost anything like creating records, updating records, sending emails, triggering approval processes, connecting to an external system, and from winter 20 release, Lightning Web Components can be incorporated into Flow.

Lightning Web Components in Flow: Why to use them

Lighting Web Components in Flow provides a better User experience and also accomplishes many tasks that flow cannot be accomplished alone.

Adding Lightning Web Components to Flows

To add Lightning Web Components available for Flow screens, add a target to the targets tag in the component’s Meta XML file.

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

    <targets>
        <target>lightning__FlowScreen</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
        
</LightningComponentBundle>

By adding the above tags, the Lightning Web Component becomes available for flow screens.

Let's have a look at the example, A flow that displays a list of account with Lightning Design, select the accounts, and display the selected account Ids.

Wait a while!. How would the Flow knows which accounts are selected in the Lightning component ?, Is there any mechanism to communicate between LWC and Flows? We must declare the properties that can communicate between LWC and Flow. Since we have Targets, we also have Target Configs. To look more at the Configuration tag in Salesforce Documentation.

Let's Jump into the Lightning Web Component Code.

Lightning Web Component

lwcFlow.html

<template>
    <lightning-card title="Accounts List" icon-name="standard:account">
        <div class="slds-p-around_x-small">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Edit">Select</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Account Name">Account Name</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Industry">Industry</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Phone">Phone</div>
                        </th>                        
                    </tr>
                </thead>
                <tbody>
                    <template for:each={accs} for:item="acc"> 
                        <tr key={acc.Id} class="slds-hint-parent">
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Select">
                                    <lightning-input type="checkbox-button" label="select" variant="label-hidden" onchange={handleCheck} name={acc.Id}></lightning-input>
                                </div>
                            </td>                                
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Account Name">{acc.Name}</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="Industry">{acc.Industry}</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="Phone">{acc.Phone}</div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </lightning-card>
</template>

lwcFlow.js

import { LightningElement,api } from 'lwc';

export default class LwcFlow extends LightningElement {
    @api selectedAccs = [];
    @api selectedAccsString;
    @api accs = [];

    handleCheck(event) {
        if(!this.selectedAccs.includes(event.currentTarget.name))
            this.selectedAccs.push(event.currentTarget.name);
        else {
            for(let i = 0; i < this.selectedAccs.length; i++) {
                if(event.currentTarget.name === this.selectedAccs[i])
                this.selectedAccs.splice(i, 1);
            }
        }
        
        // eslint-disable-next-line @lwc/lwc/no-api-reassignments
        this.selectedAccsString = JSON.stringify(this.selectedAccs);
        
    }
}

lwcFlow.js-meta.xml

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

    <targets>
        <target>lightning__FlowScreen</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="accs" type="@salesforce/schema/Account[]" label="Accounts" description="list of Accounts"/>
            <property name="selectedAccs" type="String[]" label="Selected Accounts" description="Selected Account Ids"/>
            <property name="selectedAccsString" type="String" label="Selected Accounts String" description="Selected Account Ids"/>
        </targetConfig>
    </targetConfigs>    
</LightningComponentBundle>

Lightning Web Component looks good. Now, Let's build Screen Flow.

Flow

Step 1:- Define flow properties.

Click Setup.
In the Quick Find box, type Flows.
Select Flows then click on the New Flow.
Select the Screen Flow option and click on Next and configure the flow as follows:

How do you want to start building: Freeform

Step 2:- Flow variables

In this step, we will define variables.

Define AccountList collection to store Account records.

Under Toolbox, select Manager, click on New Resource.
Input following information,

Resource Type - Variable
API Name - AccountList
Data Type - Record
Object - Account
Allow multiple values (collection) - Check
Availability Outside the Flow

Available for input - Check
Available for output - Check

Click Done.

AccountList Collection

Define SelectedIds Text variable to store Account Ids as string.

Under Toolbox, select Manager, click on New Resource.
Input following information,

Resource Type - Variable
API Name - SelectedIds
Data Type - Text
Allow multiple values (collection) - Uncheck
Availability Outside the Flow

Available for input - UnCheck
Available for output - Check

Click Done.

SelectedIds Variable

Step 3:- Create Get Records Element

In this step, we will create Get Records Element to get Account records.

Under Toolbox, select Elements. Drag and drop onto Get Records Element the canvas.
Fill following Information.

Enter Label the API Name will auto-populate.
Object - Account
Filter Account Records

Condition Requirements -All Conditions Are Met (AND)
Industry - Equals - Electronics

Sort Account Records - Ascending
Sort By - Name
How Many Records to Store - All records
How to Store Record Data - Choose fields and assign variables (advanced)
Select Variable to Store Account Records

Record Collection - AccountList

Select Account Fields to Store in Variable

ID
Name
Industry
Phone

Click Done.
Connect Start to Get Records Element.

Get Records Element

Step 4:- Create Screen Element

In this step, we will create screen element for Lightning Web Component .

Under Toolbox, select Elements. Drag and drop Screen onto the canvas.
Fill following Information on Screen Properties.

Enter Label the API Name will auto-populate.
Under Components, select Custom, Drag and drop lwcFlow onto the screen. fill the following details on lwcFlow.

Label - Display Accounts
API Name - Display_Accounts
Accounts- {!AccountList}
Selected Accounts String - {!SelectedIds}
Advanced
Manually assign variables - Check
Store Output Values to Select Variables

Accounts - {!AccountList}
Selected Accounts String - {!SelectedIds}

Revisited Screen Values

Use values from when the user last visited this screen - Check

Click Done.
Connect Get Records Element to Screen Element.

Screen Element

Step 5:- Create Screen Element

In this step, we will create screen element to display selected Account Ids.

Under Toolbox, select Elements. Drag and drop Screen onto the canvas.
Fill following Information on Screen Properties.

Enter Label the API Name will auto-populate.
Under Components, select Display, Drag and drop Display Text onto the screen. fill the following details on Long Text.