Using LWC in Flow

Use Lightning Web Components 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

<template>
    <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> 
        </div>
    </lightning-card>
</template>

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 = [];
    

    @api 
    get txtBoxVal(){
        return this._txtBoxVal;
    }

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

    handleChange(event) { 
        this._txtBoxVal = event.target.value; 
    }

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

    //Hook to Flow's Validation engine
    @api
    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
    handleNext(event){ 
       const nextNavigationEvent = new FlowNavigationNextEvent();
       this.dispatchEvent(nextNavigationEvent); 
    } 
}

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="http://soap.sforce.com/2006/04/metadata" fqn="lwc_TextBox">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

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

</LightningComponentBundle>

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

Posted

in

,

by


Related Posts

Comments

6 responses to “Use Lightning Web Components in Flow”

  1. Santosh Avatar
    Santosh

    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. Wei Avatar
    Wei

    Hi Jitendra

    Thanks for the great article.

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

  3. Pramita Avatar
    Pramita

    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 provide detail on how the interaction and data sharing between flow and lwc is happening in detail.

    In Flow I could see property as txtContent but in the LWC component you have provided has only one property txtBoxVal. Not able to understand how value is passed to LWC.

  4. […] you are looking for basics of LWC or how to use LWC in flow, Lightning Message Service, how to call Apex then follow this […]

  5. Mihir Avatar
    Mihir

    Hi Jitendra,

    I am able to create a LWC screen. the input variable from screen to flow is working but output variable from Flow to screen si not working

  6. Mahesh Avatar
    Mahesh

    Thanks Alot Jitendra, i have reffered thes code to implement navigationFinishevent in lwc.

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading