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.
