Design Attributes In LWC Simplified

Suppose you are making a greeting component that displays a greeting message to the logged-in user such that an admin can configure this message from the builder tools such as app builder or experience builder.

To achieve this you can declare the targetConfigs in the lwc XML configuration file. Let’s implement this and see it in action.

Create a component (LWC) named as userGreeting and add the following code:

<template>
    <lightning-card  title="Hello">
        <p class="slds-p-horizontal_small">{greetingMessage}</p>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';

export default class UserGreeting extends LightningElement {
    @api greetingMessage;
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>User Greeting</masterLabel>
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
     <targets>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
    <targetConfig targets="lightning__HomePage, lightningCommunity__Default">
        <property name="greetingMessage" label="Greeting Message" type="String" required="true" default="Have a nice day :)"/>
    </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Let’s understand what we did.

In the file userGreeting.js at line 4, we have declared a public property greetingMessage.

In the file userGreeting.js-meta.xml at line 13, we have specified that the property greetingMessage will be exposed to be configured from the builder tools.

Notice that <property> element is under the <targetConfig> element which defines the property’s exposure area. Here we have defined the targets as “lightning__HomePage, lightningCommunity__Default”.

Thus, this property will be exposed to the Lightning App Builder (Home Page) and Experience Builder.

Now, let’s add this component to the home page so that it displays a wonderful greeting message to our users 🙂

As seen in the above screenshot an admin can configure the greeting message or can keep the default one.

Feel free to explore the official docs for all the available options available for targetConfigs and property.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂