0

I'm creating a LWC Flow Screen Component.

If I create a simple one with just a text field in it, and I declare that text field as both input and output. When I navigate forward and backward within the flow, the field value is retained, which is great. Exactly how it should work.

If I do the exact same thing, but with an array (e.g. a checkbox group), the field value isn't retained when navigating backwards and forwards. e.g. If i click next then back, the checkbox group loses it's values.

Is this a limitation of Flow, or am I missing something?

html file

<template>

    <lightning-input type="text" label="Enter some text" value={customText} onchange={handleTextChange}></lightning-input>

    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={selectedValues}
                              onchange={handleCheckboxChange}></lightning-checkbox-group>

</template>

js file

import { LightningElement, api } from 'lwc';

export default class NickTestFSC extends LightningElement {

    // checkbox options
    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    }

    // private variables
    _customText;
    _selectedValues;

    // getter / setters for selected values
    @api
    get selectedValues() {
        return this._selectedValues === undefined ? [] : this._selectedValues;
    }

    set selectedValues(selectedValues) {
        this._selectedValues = selectedValues;
    }

    // getter / setters for custom text
    @api
    get customText() {
        return this._customText;
    }

    set customText(customText) {
        this._customText = customText;
    }

    // handle text change
    handleTextChange(event) {
        this.customText = event.detail.value;
    }

    // handle checkbox change
    handleCheckboxChange(e) {
        this.selectedValues = e.detail.value;
    }

}

meta definition file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">

            <!-- input & output variables -->
            <property name="customText" type="String" label="Custom Text" description="" />
            <property name="selectedValues" type="String[]" label="Selected Values" description="" />

        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Interesting note:

The reason I used custom getters/setters on the variables was so I can put a breakpoint on the setters to see them being accessed.

If I watch the variables when I click 'back' to return to the page holding this LWC, the customText setter is being called, but the selectedValues setter isn't being called.

I'm not sure if I've made a mistake somewhere, or if the flow engine is just ignoring the array variable. Maybe it only works with primitives

0

I think I've worked it out.

This issue has nothing to do with it being an array, and it's all about whether or not you provide a default value.

For some reason, if you don't provide a default value on the input, it doesn't remember your changes when you click back. This happens on either the text input, or the collection input.

e.g.

This won't work:

enter image description here

This will work:

enter image description here

This doesn't feel right to me, so wondering if this is a bug or whether there's some intention I don't understand.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.