I have a visual flow screen with a mix of out-of-the-box and custom Lightning Web Components on it. Some of the OOTB components are marked required and one of the LWCs has a validate()
method that gets called when the "Next" button is clicked to validate the content of the LWC.
The validate method works as intended, but it clears out all of the properties of the LWC when the component is invalid. This will be a giant pain for users because there are about 12 fields to fill out on the component.
What is the proper way to maintain the values in the component when the Next button is clicked (or the FlowNavigationNextEvent
event is dispatched)? Is this a limitation of Flows? Is it best to try to validate on the fly before the Next event is dispatched if that's the limiting factor?
Update: Code
import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
export default class ConsultancyOwner extends LightningElement {
@api
get ownerName() {
return this._ownerName;
}
set ownerName(name) {
this._ownerName = name;
}
@api
get countriesOfCitizenship() {
return this._countriesOfCitizenship;
}
set countriesOfCitizenship(countries) {
this._countriesOfCitizenship = countries;
}
@api
validate() {
if(this._ownerName && !this._countriesOfCitizenship) {
return {
isValid: false,
errorMessage: 'You must specify country(ies) of citizenship'
};
} else {
return {
isValid: true
};
}
}
handleOwnerNameChange(event) {
this._ownerName = event.detail.value;
// notify the flow of the change
const attributeChangeEvent = new FlowAttributeChangeEvent('ownerName', this._ownerName);
this.dispatchEvent(attributeChangeEvent);
}
handleCountriesChange(event) {
this._countriesOfCitizenship = event.detail.value;
// notify the flow of the change
const attributeChangeEvent = new FlowAttributeChangeEvent('countriesOfCitizenship', this._countriesOfCitizenship);
this.dispatchEvent(attributeChangeEvent);
}
}
<template>
<div class="slds-grid slds-gutters slds-wrap slds-grid_vertical-align-end">
<div class="slds-col slds-col-size_1-of-2">
<lightning-input
label="Full Name"
onchange={handleOwnerNameChange}
type="text">
</lightning-input>
</div>
<div class="slds-col slds-col-size_1-of-2">
<lightning-input
type="text"
name="countries"
onchange={handleCountriesChange}
label="Country(ies) of Citizenship">
</lightning-input>
</div>
</div>
</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Consultancy Owner</masterLabel>
<targets>
<target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowScreen">
<property name="ownerName" type="String" />
<property name="countriesOfCitizenship" type="String" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>