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
Screen 1 would look like
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
Output : Screen 1
Output : Screen 2
Resources :
Leave a Reply