Flow to LWC – Pass Data Instantly

Flow to LWC communication can be done instantly after spring ’23. Read out my previous blog on passing data from LWC to flow Instantly here. This new feature allow us to Build Screens with Interactive Components (Beta). Now, You can place your lwc component in flow screen and fetch the values from Flow elements available on same screen. In simple words, You can easily pass data from Flow to LWC on 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 Flow Element to LWC in Screen Flow.

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 Opt in to Reactive Screens Beta?

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

Use Case – Pass Data Into LWC From Flow

Let’s create a Lightning Web Component with name reactiveLWC and a Screen Flow with name Flow To LWC Communication.

reactiveLWC.html

HTML file of the reactive component just has a read only input field which shows any value set to reactiveValue public property defined in js file.

<template>
    <lightning-input label="Get Data From Flow" disabled value={reactiveValue}></lightning-input>
</template>

reactiveLWC.js

reactiveValue is a public property and exposed to flow builder in meta file.

import { LightningElement, api } from 'lwc';
export default class ReactiveLWC extends LightningElement {
    //recieve value from flow here
    @api reactiveValue;
}

reactiveLWC.js-meta.xml

This Lightning Web Component is exposed to be used with Screen Flows. reactiveValue public property is configured to be set by flow.

<?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="reactiveValue" type="String" label="Reactive Value"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Create Screen Flow – Flow To LWC Communication

Step 1 : Create a Screen flow and name it Flow to Lightning Web Component Communication

Step 2 : Add a text input element and provide Label/Api name

Step 3 : Add the Lightning Web Component on Screen you created previously and pass text input element value to it

Demo : Flow to LWC – Pass Data Instantly

Do not forget to save and activate your flow. Click on Debug to test your functionality.

Thanks Ruchit Goswami for helping me in writing this informative blog. He is Senior Salesforce Developer at MTX Group.

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.