1

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?

0

I found no way to handle this within Flow itself and presume it's just a limitation currently as the output from the LWC based on user interaction is not stored in the output variable unless it progresses past the screen. In this scenario, the screen is just re-presented and blocked from progressing.

End up using sessionStorage within the LWC to store the user selected value in case of this situation and to use that if it exists instead of the input variable.

//Within Wire method to get picklist values for combobox in LWC

let cachedSelection= sessionStorage.getItem(this.sessionStorageKey);
//clear after we've retrieved it
sessionStorage.clear();

//if a user selection value was stored and it's a valid option - set as the selection
//else use the default input variable from the flow screen
if(cachedSelection && this.validateSessionStorageValue(cachedSelection)){
   this.selectedValue = cachedSelection;
} else if(this.defaultValue){
   this.selectedValue = this.defaultValue;
}

When user makes changes, store the value in the sessionStorage

handleChange(event){
    if(event.detail.value){
        sessionStorage.setItem(this.sessionStorageKey, event.detail.value);
        this.selectedValue = event.detail.value;
    }
}

Making sure key is unique and that the value retrieved is valid for the options available

//unique key per flow screen as it's a button on a record
get sessionStorageKey() {
    return '${this.objectName}.${this.fieldName}.${this.recordId}';
}
validateSessionStorageValue(retrievedValue) {
    this.options.forEach(option => {
        if(option.value === retrievedValue){
            return true;
        }
    }
    return false;
}

Considerations

  1. If a user quits out of the flow screen after hitting this scenario, a key would exist in sessionStorage. Had to make the key unique to each invocation of the flow screen and whether there were multiple occurrences of this LWC on the same screen.
  2. For security purposes, I had to validate whether what I pulled for the storage was a valid value for this component. There's probably other considerations to take with regards to this, but my LWC was simple/straightforward in the value and how it uses this value.

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.