Use LWC in Flow Salesforce Part -2

Hello friends, today we are going to discuss Use LWC in Flow Salesforce Part -2. 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 from LWC to FLOW.

Also, check this: Use LWC in Flow Salesforce Part 1

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.
7. We will send data from LWC to flow variables.
8. We used import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from ‘lightning/flowSupport’ for send data from LWC to flow.
9. By using LWC in flow we can created custom type datatable in flow, that is more customised.

Code :

1. Create an LWC that complements your Flow’s purpose, whether it’s capturing data, displaying information, or performing calculations. Here we import flow action to handle flow button. We configure xml file to send data.

EmbedLWC2.HTML:

<template>
	<lightning-card title="Use LWC in Flow Salesforce Part - 2 (Pass data LWC to Flow)" 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>
			<br/>
			<lightning-button label="Navigate to Next" variant="brand" onclick={handleNext}></lightning-button>
		</div>
	</lightning-card>
</template>

EmbedLWC2.JS:

import { LightningElement, api } from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning/flowSupport';
export default class EmbedLWC2 extends LightningElement {
    @api name;
    @api phone;
    @api email;
    handleChange(event) {
        let fieldName = event.target.name;
        if (fieldName == 'name') {
            this.name = event.target.value;
            this.dispatchEvent(new FlowAttributeChangeEvent('name', this.name));
        } else if (fieldName == 'email') {
            this.email = event.target.value;
            this.dispatchEvent(new FlowAttributeChangeEvent('email', this.email));
        } else if (fieldName == 'phone') {
            this.phone = event.target.value;
            this.dispatchEvent(new FlowAttributeChangeEvent('phone', this.phone));
        }
    }
     //Go to Next screen of Flow
    handleNext(event){ 
       const nextNavigationEvent = new FlowNavigationNextEvent();
       this.dispatchEvent(nextNavigationEvent); 
    } 
}

EmbedLWC2.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwc_TextBox">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="name" type="String" role="outputOnly"/> 
			<property name="phone" type="String" role="outputOnly"/> 
			<property name="email" type="String" role="outputOnly"/>
        </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 type 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, open manually assign variables section, 3 fields show on the right side. We will put flow variables in these so the LWC field value assigned to them when we change Lwc field values.

Output :

Reference :

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