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

<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

Related posts

Leave a Reply

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