Kishore
Kishore I am a Salesforce developer and a so-called blogger at SalesforceLwc.in. I love learning and sharing.

Use Lightning Web Component in Flows

Use Lightning Web Component in Flows

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

Almost anything can be achieved using Lightning Flow Builder like creating the records, updating the records, sending an e-mail, invoke the approval process, call apex class, display and interact with lightning components and even call an External system and whatnot. It would be very un-cool if we as Salesforce Developer/Admin don’t utilize such a great tool to the depths. In this article, we will get some knowledge about how to use Lightning Web Components in Lightning Flow Builder to build better looking and un-conventional flow components.

Preview

LWC Flow gif

What is Lightning Flow Builder

If you are a Salesforce Developer/Admin you would be knowing what Lightning Flow Builder is? this is just to make sure we are on the right track. Lightning Flow Builder is the New Automation Tool launched by Salesforce which is built using modern technologies. It’s earlier version is Cloud Flow Designer which is deprecated.

Why to use Lightning Web Components in Flow

We use Lightning Web Components in Flow to offer better UI experience for the Users and also to achieve things which flow alone cannot do.

How To Make Lightning Web Components available for Flows

To make Lightning Web Component 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" fqn="lwcForFlow">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

By adding this tag the Lightning Web Component becomes available for flow screens.

Let’s get some clarity of the requirement before we move forward Let’s have you want a flow that displays a list of Accounts in a nice SLDS styled data-table, select the accounts and display the selected account Ids. That’s pretty straight-forward, I took this simple example so don’t get confused.

Wait a Second! How would the Flow know what accounts I have selected in the lightning component, is there anything that communicates between LWC and Flows?

We need to declare the properties that could communicate between LWC and Flow. As we have Targets we also have Target Configs where we declare properties. In this case, we declare two properties

  • Property named Accounts of type=”@salesforce/schema/account[]” which receives a list of accounts that have to displayed in the list.
  • Property named selectedAccsString of type=”String”, so that we could display selected records Ids as a string. we can probably declare another property of type array of string to capture selected Ids as an array of strings instead of string.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcForFlow">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__FlowScreen</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>

Find more configuration file tags in Salesforce documentation.

Now eveything looks good.

Lightning Web Component

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


/* eslint-disable no-console */
import { LightningElement, api } from 'lwc';

export default class LwcForFlow 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);
            }
        }
        
        this.selectedAccsString = JSON.stringify(this.selectedAccs);
        
    }
}


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcForFlow">
    <apiVersion>45.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>


Flow Design

Below is the flow that uses LWC. The images are self explanatory.

Flow Main lightning flow builder flow

Resources used in Flow Resources used in Lightning builder flow

Variables Used

  • varAccountList
  • varSelectedIds

varAccountList varAccountList in lightning flow builder

varSelectedIds varSelectedIds in lightning flow builder

Get Records Element

Get Accounts Element Get Accounts Element in lightning flow builder

Drag LWC to Screen Element Drag LWC to Screen Element lightning flow builder

Screen Elements

  • LWC Screen Element
  • Selected Ids Screen Element

LWC Screen Element LWC Screen Element lightning flow builder

Selected Ids Screen Element Selected Ids Screen Element lightning flow builder

Live LWC Flow Component

Live LWC Flow Component