Lightning Web Components – Fix ‘Cannot Read Properties of Undefined’ Error in FSC

flow-screen-componentjavascriptlightning-web-componentsvisual-flowsvisual-workflow

I'm building a LWC to be used as a flow screen component. In the LWC, I allow the border color of the component to be customised using a custom property. To set the color of the element, I'm using variables in my CSS file, and then updating them to the value of the color property in my LWC .js code. I was originally setting CSS variables like this:

document.body.style.setProperty('--MyFSC-borderColor', this.borderColor);

However, this affected all instances of the flow screen component on a screen.

I found a suggestion to use the following code instead, which scopes the function to only the to the individual component:

this.template.host.style.setProperty('--MyFSC-borderColor', this.borderColor);

This worked perfectly, until i added a section component to my flow screen, after which I started getting the error:
Something went wrong with the "MyFSC" screen component on the "MyFlow" flow. Contact your Salesforce admin about this error. Cannot read properties of undefined (reading 'setProperty')

Removing the section component from the screen resolves the error, however I would like to be able to scope my CSS variables to individual FSC instances, while also using sections. How can this be done?

Best Answer

The problem turned out to be with targeting this.template.host.style. I stopped doing this and instead used the querySelector() method scoped to this.template to select the element, and then used the setProperty() method on the element returned by this.

My updated JS looks like this:

const MyFSC_container = this.template.querySelector('.MyFSC_container');
MyFSC_container.style.setProperty('--MyFSC-borderColor', this.borderColor);

Related Solutions

Lightning Web Components – Fixing LWC Flow Screen Component Error: {$GlobalConstant.True} is Undefined

Ok, so there's something funky going on with the Flow engine, and the formula approach is a bit of a red herring.

Short answer, I don't think there's anything wrong with {!$GlobalConstant.True}.

The issue is with the default value.

In my meta.xml, I had default="true" for inputBoolean, so when I added the component to the flow screen, I didn't need to set the value of inputBoolean because it was already set.

If I clear {!$GlobalConstant.True} out of inputBoolean, then add it in again, the component behaves as expected.

This would be why the formula worked; because it wasn't using the default value.

If you come across this issue, just clear the default value out of the input, and add it back again.

I've see this happen with text inputs as well.

Flow Screen Component LWC – How to Maintain Internal State on Page Navigation or Validation Error

It seems you know the way to actually do this - setting the variables as input/output and passing it in and storing output in the Flow setup. Considering the LWC is re-initialized when going back to the screen (or in the case of validation error) - it needs values passed in for your situation.

So if you don't want to use the mechanism provided with Flow/LWC, you'd have to leverage another mechanism - something like browser sessionStorage to store/retrieve values.

export default class GroceryPicker extends LightningElement {
    @api category;
    @api item;

    //set existing selected value by user 
    connectedCallback(){
        this.categoryOptions = //set category options 
        //check if there's a cached selection by this user
        let cachedSelection= sessionStorage.getItem(this.sessionStorageKey);
        if(cachedSelection && this.validateSessionStorageValue(cachedSelection){
            this.category = cachedSelection;
        }
    }

    handleCategoryChange(event) {
        this.category = event.target.value;
        //set the value in session storage to retrieve, if needed, later
        sessionStorage.setItem(this.sessionStorageKey, event.target.value);
    }

    get sessionStorageKey() {
        //create some sort of unique key - add any relevant variables for flow (recordId) to make it unique per user (can pull userId)
        return 'groceryPickerCategory.${this.userId}';
        
    }
    
    validateSessionStorageValue(retrievedValue) {
        this.categoryOptions.forEach(option => {
            if(option.value === retrievedValue){
                return true;
            }
        }
        return false;
    }
}

Considerations

Only showed an example for categories based on your question
You'll probably want to validate the value you pull from session storage against your list of valid values
If the user quits the flow screen - the value is saved. That may or may not be desirable behavior to have it autofill if they click it again.

Best Answer

Related Solutions

Lightning Web Components – Fixing LWC Flow Screen Component Error: {$GlobalConstant.True} is Undefined

Flow Screen Component LWC – How to Maintain Internal State on Page Navigation or Validation Error

Related Topic