Pass Value from Flow to LWC

Authors: Nihal Singh & Prabhakar Gupta

Here, I will create a simple LWC where we will accept value from Screen Flow.

Before moving next step, you should have idea about @api, how to expose your LWC  to Flow.

@api: is used to make public property in JS.

Expose LWC to Flow: Add the following code to your metafile.

<isExposed>true</isExposed>

<targets>

        <target>lightning__FlowScreen</target>

</targets>

Below the LWC component, has two input fields.

<template>

    <b>Value From Flow</b>

    <lightning-input label=”First Name” value={first_name}></lightning-input>

    <lightning-input label=”Last Name” value={last_name}></lightning-input>

</template>

JS:

import { LightningElement, api } from ‘lwc’;

export default class ValueFromFlow extends LightningElement {

    @api first_name;

    @api last_name;

}

Each variable should be declared with the @api decorator if wants to store value from Flow.

Meta.xml:

Add the following code to your meta.xml file.

<targetConfigs>

        <targetConfig targets=“lightning__FlowScreen”>

            <property name=“first_name” type=“String” label=“First Name” description=“First Name”/>

            <property name=“last_name” type=“String” label=“Last Name” description=“Last Name”/>  

        </targetConfig>

    </targetConfigs>

For each variable that will store value from flow, add <property/> as like above.

For Each property, there should be variable in the JS file and must be declared with the @api decorator.

Flow Screen 1: Simply add two text fields to your screen flow.

Flow Screen 2: Add your LWC to screen flow. On the right side for each LWC variable select your flow variable.

Flow: This is how flow looks like.

We use cookies on this site to enhance your user experience. For a complete overview of how we use cookies, please see our privacy policy.