Flow to LWC - Pass Data Instantly

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.

reactive screen

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

Flow to LWC communication can be done instantly after spring '23.  In simple words, You can easily pass data from Flow to LWC on same screen.

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

Flow to LWC communication can be done instantly after spring '23.  In simple words, You can easily pass data from Flow to LWC on same screen.

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

Flow to LWC communication can be done instantly after spring '23.  In simple words, You can easily pass data from Flow to LWC on same screen.

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.

2 comments

  1. I have a scenario….

    I have a modal popup in which Opportunity and OppLineItem details are displayed modal popup displayed when opp marked as Closed Won. but if immediately when user creates the opportunity add the opplineitem, send the quote and marke the opportunity as Closed Won then modal popup will displayed but oppLineItem not getting displayed in modal popup. when we refresh the page before closed won and the mark the opportunity as closed won then and then only OpplineItem geting displayed. How would i solve this issue.

Leave a Reply