Use LWC in Flow Salesforce Part 1

Hello Salesforce Trailblazers!, today we are going to discuss Use LWC in Flow Salesforce. By embedding LWC in Flow, Lightning Web Components brings a whole new level of interactivity and customization to your Flow screens, enabling you to create more engaging and user-friendly experiences. We can pass data to each other in FLOW and LWC.
In this blog, we will pass data Flow to LWC.

Also, check this: Rich Text Area Field in LWC

Key Highlights :

1. User-Centric: LWCs allow you to design Flow screens that match your exact needs and user preferences.
2. Interactivity: You can build components with advanced functionalities, like data validation, dynamic calculations, or interactive forms.
3. Customization: LWCs can be tailored to fit your brand and style, providing a seamless user experience.
4. Dynamic Forms: Create forms with custom validations and interactive elements.
5. Guided User Journeys: Use LWCs to guide users through complex processes.
6. Data Visualization: Display data in visually engaging ways.

Code :

1. Create an LWC that complements your Flow’s purpose, whether it’s capturing data, displaying information, or performing calculations.

embedLWC.html:

<template>
    <lightning-card title="Use LWC in Flow Salesforce Part - 1 (Pass data Flow to LWC)" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
			<lightning-input label="Name" type="text" name="name" value={name} onchange={handleChange}>
			</lightning-input>
            <lightning-input label="Email" type="email" name="email" value={email} onchange={handleChange}>
			</lightning-input>
            <lightning-input label="Phone" type="phone" name="phone" value={phone} onchange={handleChange}>
			</lightning-input>
        </div>
    </lightning-card>
</template>

embedLWC.js:

import { LightningElement, api} from 'lwc';

export default class EmbedLWC extends LightningElement {
    @api name;
    @api phone;
    @api email;

    handleChange(event) { 
        let fieldName = event.target.name;

        if(fieldName == 'name') {
            this.name = event.target.value;
        } else if(fieldName == 'email') {
            this.email = event.target.value;
        } else if(fieldName == 'phone') {
            this.phone = event.target.value;
        }
    }
}

embedLWC.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="name" type="String"/> 
			<property name="phone" type="String"/> 
			<property name="email" type="String"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

2. Add the LWC to your Flow screen, simply by dragging and dropping it onto your canvas. Here we create 3 text fields, which are name, email, and phone. After this, we will drag and drop our LWC component which we already created. When you click this LWC component, 3 fields show on the right side. We will assign flow input values in these so the LWC field can change on change flow fields change.

Output :

Reference :

1. LWC attributes for Flow
2. Using LWC in Flow