Lightning Web Components in Lightning Flow

With Salesforce Winter 20 release we can now use Lightning Web Components in Lightning Flow. Previously we can use Lightning Components in Lightning Flow but now world is moving towards Lightning Web Component so today I will share how we can use Lightning Web Components (LWC) in Lightning Flow.

For the demo purpose I will use Lightning Lookup So you can refer that as base. We will make some changes in code which I will share here.
This is how our final output will look:

First we need to update our component xml file and need to add lightning__FlowScreen as target and set the isExposed to true.
Then we need to add targetConfig to define input and output variables. This is similar of what we used in Design Attribute n Lightning Component. We can define role to decide if we value can passed in input or output only.
This is how our final output xml will look like.

lwcCustomLookup.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcCustomLookup">
    <targets>
      <target>lightning__FlowScreen</target>
    </targets>
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="objectName" label="objectName" type="String" role="inputOnly"/>
            <property name="fieldName" label="fieldName" type="String" role="inputOnly"/>
            <property name="iconName" label="iconName" type="String" role="inputOnly"/>
            <property name="selectRecordId" label="selectRecordId" type="String" role="outputOnly"/>
            <property name="selectRecordName" label="selectRecordName" type="String"  role="outputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Now we need to use lightning/flowSupport module. It provides events that enable a component to control flow navigation and notify the flow of changes in attribute values.
We need to import FlowAttributeChangeEvent. Add below line in the controller.

import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

Now when we get the value in controller we will fire event to notify parent flow that the attribute value has changed.

setSelectedRecord(event) {
        var currentText = event.currentTarget.dataset.id;
        this.txtclassname =  'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
        this.iconFlag = false;
        this.clearIconFlag = true;
        this.selectRecordName = event.currentTarget.dataset.name;
        var selectName = event.currentTarget.dataset.name;
        this.selectRecordId = currentText;
        this.inputReadOnly = true;
        const selectedEvent = new CustomEvent('selected', { detail: {selectName}, });
        // Dispatches the event.
        this.dispatchEvent(selectedEvent);
        // This is the event we use to notify flow
        const attributeChangeEvent = new FlowAttributeChangeEvent('selectRecordId', currentText);
        this.dispatchEvent(attributeChangeEvent);
    }

Now our component is ready to be used in Lightning Flow. Draf the Screen Component in UI and in that we can see our Lightning Web Components and can easily configure that.

Using attribute we get the selected record Id.

This is the complete Flow which I design here.

So here we have covered how to pass data in Lightning Web Components and get data from LWC to Lightning Flow. We can also fire event from LWC to control the navigation in Lightning Flow.

Did you like the post or do you have any questions, let me know in comments section. Happy Programming 🙂