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.