4

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>
4
  • 1
    Can you provide the validation method you have written.
    – gNerb
    Commented Jun 3, 2020 at 20:33
  • I have the very same issue and couldn't find a workaround. Flow doesn't allow me to use custom next button but when I use navigation button, can't use validation. Wasted hours. Commented Jul 11, 2020 at 17:20
  • Any solution to this problem? How did you handle this if no direct solution?
    – ashish
    Commented Mar 8, 2021 at 23:38
  • @ashish I never found a solution to this particular example but I have since created components that work a little bit better by leveraging the input and output variables you can use in a Flow.
    – nbrown
    Commented Mar 8, 2021 at 23:43

2 Answers 2

0

At time of writing, you need to raise the FlowAttributeChangeEvent on the outputs and also write the outputs back to an/the input, pick them up with a connectedCallback and put them back to where they need to be. In my case I didn't set the role on them so it would write back to where it was coming out from. Feels like it shouldn't work as it looks like using variables before theyre set, but it does.

enter image description here

0

I had a similar issue, where Im unable to validate LWC component fields when the Next button is clickied on screen flow.

Below link solved my issue, please try if you are facing a similar issue. Validate User Input for Custom Flow Screen Components

https://stackoverflow.com/questions/68915986/validate-multiple-required-lwcs-on-same-flow-screen-without-losing-values

1
  • Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
    – identigral
    Commented Apr 16 at 16:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .