2

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?

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 '21 at 21:50
0

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).

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.