Salesforce start supporting flows in Winter 20 release .If you are a salesforce developer then you know how fast we can develop application using lighting web components. Well we know that lighting flows are useful in modern day application.

In this article I will give you simplest way to use lighting component in your flow. We will create a flow where we will use lwc component which will have one field, and we will save data from that field to object on click in finish button from flow.

Lets create a component first –

HTML File

<template>
    <div class="slds-card">
        <lightning-input label="Enter Data" onchange={getValue}></lightning-input>
    </div>
</template>

JS File

import { LightningElement,api } from 'lwc';

export default class LwcToFlow extends LightningElement {
    @api Value ='hello';
    getValue(event) {
        this.Value = event.target.value ;
    }
}

XML File

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>           
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__FlowScreen">      
           <property name="Value" type="String" label="Value" description="Use this property to get value"/>         
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

We have the property tag with the name “Value” in our XML file , and we have lightning-input field in our HTML file on which we have onchange event where we are updating the value of Value .

Now you just have drag and drop your lighting component in flow and you can get data from your component by using by using your Value property.

Watch the following video where I have implemented the same concept.

How it works

1. The component has one public property, Value, and a lightning-input that updates it on every change.
2. The XML file exposes the component to Flow with the target lightning__FlowScreen, and the property tag makes Value available as an input and output in Flow Builder.
3. In the flow, you add the component to a screen and map its property to a flow variable. A later element, such as Create Records, uses that variable.

If the flow variable stays empty

In a screen flow, a component should tell the flow when an output value changes. Do this by dispatching FlowAttributeChangeEvent from lightning/flowSupport. Public property names also start with a lowercase letter by convention, so use value, and make sure the name in the XML matches exactly.

import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class LwcToFlow extends LightningElement {
    @api value = 'hello';

    getValue(event) {
        this.value = event.target.value;
        this.dispatchEvent(new FlowAttributeChangeEvent('value', this.value));
    }
}

Points to note

• Use @api only for values that Flow must read or write.
• Update the apiVersion in the XML file to a recent version.
• Add required or validation logic with the validate method if the user must fill the field before pressing Next.

FAQ

Where do I see the component in Flow Builder?
In a Screen element, look for your component under Custom components.

Can the flow pass a value into the component?
Yes. Map a flow variable to the property as an input.