How to access property type=”Color” value in LWC?

I can’t access property type="Color" on LWC in Experience Builder.
Here’s my meta file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>XP Header</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property
                name="bgColor"
                type="Color"
                label="Background Color"
                default="#ffffff"
            />
            <property name="salutation" type="String" label="Salutation"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Now, in the component when I access the bgColor property in renderedCallback, it comes up undefined. The other property, however, is propagated from the XP Builder:

import { api, LightningElement } from 'lwc';
    
export default class XpHeader extends LightningElement {
    @api bgColor;
    @api salutation;

    renderedCallback() {
        console.log(this.bgColor);
        console.log(this.salutation);
    }
}

Output:
undefined
‘Mister’ (whatever typed in the config popup in the Builder)

Answer

It turned out that this was due to the property name, apparently, it is used by the framework/XP Builder. There were warnings in the console mentioning this property name. Once I changed that to backgroundColor, it started working.

Attribution
Source : Link , Question Author : Al Cher , Answer Author : Al Cher

Leave a Comment