4

Scenario

A flow screen with a normal text field (call it field A) and a picklist LWC that takes some default value and stores an output variable based on user interaction.

When field A has an input validation, the screen does not progress to the "next" part of the flow and rather stays on the same screen. In this specific scenario, the LWC loses any user entered information and reverts to initial state.

Details

LWC is just a combobox.

<lightning-combobox
    name={fieldLabel}
    label={fieldLabel}
    value={selectedValue}
    options={options}
    onchange={handleChange}>
</lightning-combobox>

I'm passing a default value (selectedValue) as an input and I'm storing the output (if the user changes the value) in a text variable. The input/output variables for the LWC are the same to support retaining the selection if users use previous/next. But, by not progressing - it seems the output variable from the LWC is never saved.

This article goes over various situations, but it focuses on the "next" and "previous" button whereas my scenario is due to how the input validation works in flow screens (preventing you from progressing, but seemingly refreshing).

The out of the box fields obviously retain their values - just not the LWC. Looking at the console logs, the LWC essentially is re-initialized when the input validation on the screen fires and the "default values" passed in the flow are using the non-user changed values (what they were before the screen appeared).

Is there any way to retain user-entered information in a LWC if the flow screen flags an input validation on a separate field and doesn't progress?

3 Answers 3

1

You need to inform the flow that the output variable has changed, because in this particular case does not pass to next screen and this variable is not informed.

You are doing well to use the same output variable as input to reinform this value, but I think you are forgetting to make the call to FlowAttributeChangeEvent to inform the flow that this output variable has changed. Based on your code, this needs to be added in the js controller:

import {FlowAttributeChangeEvent} from 'lightning/flowSupport';
...

handleChange(event){
    ...
    const attributeChangeEvent = new FlowAttributeChangeEvent(
        'selectedValue',
        this.selectedValue
    );
    this.dispatchEvent(attributeChangeEvent);
}
1
  • 1
    Thanks for the answer. I had moved away from this, but still had this component saved and took a look at it again - I'm not sure why I didn't get this to work or if the behavior changed. Even without firing FlowAttributeChangeEvent, setting the input/output variables to be the same seems to work in my quick test. I'll see if I can update my answer. Nov 15, 2021 at 21:50
1

At this point, the original component I created is unnecessary as Summer '21 enhanced the picklist in screen flows so you could make it non-required (provide a --None-- option as well) and also set a default value which were the initial reasons I created a LWC.

Back to my original behavior/question, I believe I had a set up like so (with different variable names):

  • Flow text variable called picklistselection
  • Input variable defined on my LWC called defaultValue
  • Ouput variable defined on my LWC called userSelectedValue
  • picklistselection had an assignment to a value before the screen flow
  • picklistselection was passed to the input variable (defaultValue) as well as being stored as the output value for the LWC (userSelectedValue) on the screen flow element

The above didn't work when presented with the scenario in my question - it only worked when you successfully moved on to the "next" screen. Even firing the FlowAttributeChangeEvent didn't seem to help. It always seemed to pass the same value to defaultValue regardless of the user interaction/output variable.

I don't remember why I had two different variables in the LWC (defaultValue vs. userSelectedValue), but simplifying it so there's just a single property on the LWC that is both input/output works appropriately.

  • picklistselection has an assignment before the screen flow
  • picklistselection is provided to the same LWC property (userSelectedValue) in both input and output.

enter image description here

Seemed to work just fine even in the scenario I'm describing where the screen does not progress to the next part due to separate validation on other inputs (or missing required fields).

3
  • I observe the same, using the FlowAttributeChangeEvent to inform flow about change. When I don't define the input value, or define some, the input gets refreshed on the validation of the components on screen. When setting the input value to the same variable as the component output, everything works fine.
    – Damecek
    Jul 15, 2022 at 14:54
  • Personally, I think this is an issue in the flow engine and should work automatically, that flow will store the changed value and provide it back to the component after validation.
    – Damecek
    Jul 15, 2022 at 14:55
  • Strangely enough, if I set some not empty default value, then the inputs retain the value after validation refresh, even if changed. On the other hand, if I remove the value in the screen interview, the value gets refreshed to the default one on validation refresh.
    – Damecek
    Jul 15, 2022 at 14:57
0

As of API version 59, flow can retain output values after failed validation (or after navigating with the Previous) button.

The only caveat is that in your js-meta.xml file, the output variable that you want to retain must be available for Input and Output. (you can do this by not defining a role on the property).

<property name="text" description="text value that was input" type="String" />

Then in my .js file, I have something that looks like this:

@api text = '';

And in my html file:

<textarea onkeyup={handleKeyChange} placeholder={placeholder} class="slds-textarea">
                {text}
              </textarea>

In my case, I was using a textarea, but the principle would be the same for a combobox.

Again, remember to make sure that your flow is running version 59, I was pulling my hair out for hours trying to figure this out, and now it seems to work.

You must log in to answer this question.

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