Use Lightning Web Components in Flow

Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)

Using LWC in Flow

As part of Winter 20, we can embed Lightning Web Components in Flow. Imagine, endless possibilities for Rapid Application Development (RAD) and ease of maintaining application.

Few examples where this could come handy are like embedding lookup components (no more workaround), showing data table, capturing signature, slide shows and so on.

It’s time to jump into water. In this blog post, I would be creating Simple Lightning Web Component (LWC). This LWC Component would be able to get value from flow, pass value to flow, navigate to Next screen and hookup into flow validation engine to restrict next page navigation if there is error in LWC input.

Note : Read this blog post to learn how to embed Aura Component in Flow.

Below LWC component, only has one text box

    <lightning-card title="Lightning Web Component For Flow" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
                <lightning-input label="Message To Send" type="text" value={_txtBoxVal} onchange={handleChange}></lightning-input>
                <br /> 
                <lightning-button label="Publish Attribute" onclick={handleClick}></lightning-button>
                <lightning-button label="Navigate to Next" variant="brand" onclick={handleNext} ></lightning-button> 

Javascript of LWC component looks like

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

export default class Lwc_TextBox extends LightningElement {
   @track _txtBoxVal = '';
   @api availableActions = [];

    get txtBoxVal(){
        return this._txtBoxVal;

    set txtBoxVal(val){
        this._txtBoxVal = val;

    handleChange(event) { 
        this._txtBoxVal =; 

    //Change attribute on Flow
    handleClick(event) {   
        const attributeChangeEvent = new FlowAttributeChangeEvent('txtBoxVal', this._txtBoxVal); 

    //Hook to Flow's Validation engine
    validate() {
        if(!this._txtBoxVal.includes('oracle')) { 
            return { isValid: true }; 
        //If the component is invalid, return the isValid parameter as false and return an error message. 
        return { 
            isValid: false, 
            errorMessage:  'You cannot have string oracle in String' 

     //Go to Next screen of Flow
       const nextNavigationEvent = new FlowNavigationNextEvent();

In above Javascript, one method informs parent Flow that attribute changed. Another Javascript method navigates to next page. There is another Javascript method, which hooks up to flow validation engine saying that text box cannot have word ‘Oracle’.

Metadata file of LWC component looks like

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="lwc_TextBox">

        <targetConfig targets="lightning__FlowScreen">
            <property name="txtBoxVal" type="String"  /> 


In LWC metadata, we are informing Salesforce platform that this component can be used in flow.

Its time to create Flow in Salesforce , below image shows how final flow will look like

LWC Component in Flow
LWC in Flow – Summary

Screen 1 would look like

LWC Flow Screen 1
LWC Flow Screen 1

In above screen, we are simply showing current value in variables and then changing those variables via text components. Next Assignment components are reading text box and assigning values in variable.

Next Screen contains LWC component and setting informing flow that which flow variable needs to be updated if attribute in flow changes

Setting Output attribute from LWC to Flow
Setting Output attribute from LWC to Flow

Output : Screen 1

Flow Output – Screen 1

Output : Screen 2

Flow Output – Screen 2

Resources :

LWC attributes for Flow

Using LWC in Flow

Related posts

2 thoughts on “Use Lightning Web Components in Flow”

  1. Hi Jitendra,
    Thanks for sharing this blog about how to include LWC component in Lighting Flows.
    It would be really help full if you can explain how the interaction and data sharing between flow and lwc is happening in detail.
    Also, I see the LWC component you have provided has only one property txtBoxVal but in your flow you have two input values, not sure if I miss anything here.

  2. Hi Jitendra

    Thanks for the great article.

    Could you please explain what “availableActions” is for? it isn’t used here

Leave a Reply to Santosh Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.