Pass Data from LWC to Flow Instantly

Pass Data from LWC to flow instantly was one of the important feature Flow was missing till winter ’23 release. Now, Spring ’23 release has been announced, It allow us to Build Screens with Interactive Components (Beta). It enables developers to interact with lwc and other flow element on the same screen.

Previously, Dynamic Interaction was not possible directly between LWC and Flow Elements. Users had to go to next screen to see the values coming from LWC in Lightning Screen Flow.

Now you can build screens that feel like single-page applications and reduce the number of screens for your user.

NOTE: This feature is a Beta Service. Customer may opt to try such Beta Service in its sole discretion. Any use of the Beta Service is subject to the applicable Beta Services Terms provided at View Agreements.

How To Enable in Your Org with API Version 57.0?

Go to Setup, Search for Process Automation Setting and Enable Opt In to Reactive Screen Beta feature.

Use Case – Pass Data Into Flow From LWC

Let’s create a Lightning Web Component with name lwcToEmbedOnScreeenFlow and a Screen Flow with name Get LWC Input Value Instant Test.

lwcToEmbedOnScreeenFlow.html

We just have an input field on html markup. Our idea is to pass the value of input element to screen flow whenever value changes in lwc input.

<template>
    <lightning-input type="text" label="Enter Name" class="name" onchange={handleChange}>
    </lightning-input>
</template>

lwcToEmbedOnScreeenFlow.js

The js file of the component uses FlowAttributeChangeEvent to informs the runtime that a component property has changed. Do not forget to annonate your property with @api decorator so that value can be accessed in flow.

import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
export default class LwcToEmbedOnScreeenFlow extends LightningElement {
    @api name;
    handleChange(event) {
        this.name = event.target.value;
        this.dispatchEvent(new FlowAttributeChangeEvent('name', this.name));
    }
}

lwcToEmbedOnScreeenFlow.js-meta.xml

We have exposed the lwc to be used with flow and configured the name property for flow so that it is available there.

<?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" label="Name" type="String" role="outputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Screen Flow with Name – Get LWC Input Value Instant Test

Go to Setup, Search Flow and create a screen flow with name Get LWC Input Value Instant Test

Step 1:- Add a Screen with Label- Embed LWC
and API Name- Embed_LWC

Step 2:- Add the LWC component on the Embed LWC screen

Step 3:- Add a Input Field from available components in flow, Make sure add default value in it as {!LWCInput.name} so that any change in lwc input gets reflected in flow input.

Steps 4:- Create a variable with name getInputValue

Step 5:- Add display text element from available components in flow to demonstrate the reactivity does not works on display text element. It only works with various input elements. Add below to Display Text element in flow:-

Directly from LWC component : {!LWCInput.name}
Showing Value from Variable in Flow : {!getInputValue}

Step 6:- Let’s add another screen to validate display text or variables created in flow are set in next screen

Step 7:- Add the display text element on this screen as well, the value in display text will be same as step 5. Add below to Display Text element in flow:-

Directly from LWC component : {!LWCInput.name}
Showing Value from Variable in Flow : {!getInputValue}

Finally the flow will look like this:

Do not forget to save and activate your screen flow. Our LWC and Flow are now ready to test. Click on Debug to verify what you have done.

Demo – Pass Data to Flow from LWC

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH

Schedule a 1:1 Meeting with me

Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.