Lightning Web Component in Flow

Learn the Use of Salesforce Lightning Web Component in Flow

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

Nearly anything can be accomplished utilizing the Lightning Flow Builder like making the records, refreshing the records, sending an email, conjuring the approval cycle, calling the apex class, showing and connecting with Lightning Component, and even calling an Outer framework and so forth. It would be exceptionally uncool if we as Salesforce Engineer/Administrators don't use such an incredible device to the profundities. In this article, we will get some information about how to involve Lightning Web Component in Lightning flow builder to construct better looking and un-traditional flow Component. 

What is Flow Builder?

Do you know what Lightning Flow Builder is if you work as a developer or administrator for Salesforce? Just to make sure we're headed in the right direction, the new automation tool introduced by Salesforce, called Lightning Flow Builder, was created utilizing cutting-edge technology. The discontinued Cloud Flow Designer is its predecessor. 

In order to provide users with a better UI experience and to accomplish tasks that flow by itself cannot complete, we leverage Lightning Web Components in Flow. 

The way of Lightning Web Components is available for Flows to make Lightning Web Component available for Flow screens and adds 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>

Let’s have you want a flow that displays a list of Associated contact with Accounts in a nice SLDS-styled data table, and when you click on the button then show the associated contact with an account.

dont miss out iconDon't forget to check out: Learn Basics of How To Enhance Consumer Service With Salesforce Chatbots

XML FILE

<?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__FlowScreen</target> 
    </targets> 
    <targetConfigs> 
        <targetConfig targets="lightning__FlowScreen"> 
            <propertyType extends="Sobject" name="T" label="Select a sobject" description="Select a sobject" /> 
            <property name="records" type="{T[]}" label="records" description="List of Records"/> 
        </targetConfig> 
    </targetConfigs> 
</LightningComponentBundle>

HTML FILE

<template> 
    <lightning-datatable data={records} columns={fieldColumns} key-field="Id"></lightning-datatable> 
</template>

dont miss out iconCheck out another amazing blog by Narendra here: Life Cycle Hooks In Lightning Web Component | Salesforce Lightning

JS FILE

import { LightningElement ,api} from 'lwc'; 
export default class ShowContactFromFlow extends LightningElement { 
    @api  records=[]; 
    @api fieldColumns=[ 
        {label:'First Name',fieldName:'FirstName'}, 
        {label:'Last Name',fieldName:'LastName'}, 
        {label:'Email',fieldName:'Email'} 
    ]; 
}

FLOW

OUTPUT

Responses

Popular Salesforce Blogs