Salesforce LWC Design Attributes: Make your component Dynamic

Photo by Christopher Gower on Unsplash

Here, we’ll explore the process of generating dynamic LWCs using design attributes. These design attributes allow us to send different kinds of data when we place the LWC component on different pages like record pages, app pages, home pages, or within a community. We’ll start by understanding what design attributes are and how we can use them in our LWC component.

In Lightning web components, we have to set up the design attributes in the Component Configuration File (XML) using the <targetConfigs> tag. The person creating the component has to specify the attribute in the component's JavaScript file by using the @api decorator.

Now We will create an LWC component to understand it better.

dynamicComponent.html

<template>
    <lightning-card title={articleTitle}>
        <div>
            <h1>  This Article is About {articleSubtitle} </h1>
        </div>
    </lightning-card>
</template>

dynamicComponent.js

import { LightningElement, api } from 'lwc';
export default class DynamicComponent extends LightningElement {
    @api articleTitle ='Dynamic LWC';
    @api articleSubtitle =' complete understanding of design attribute.';
}

dynamicComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyComponent">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

    <targetConfigs>  
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
            <property name="articleTitle" type="String" default="Dynamic LWC" label="Enter the title"/>
            <property name="articleSubtitle" type="String" default=" complete understanding of design attribute." label="Enter the subtitle"/>
        </targetConfig>
    </targetConfigs>
   
</LightningComponentBundle>

Now, when you drag this component, you can dynamically pass the title and subtitle. Two input boxes will appear there and you can enter your desired Title and Subtitle. See the below pic.

This means that we can use a single component in multiple places with different titles and subtitles.

Thanks for reading.
#sfdc #crm #crmplateform #crmsoftware #srmsolution #salesforce #salesforce software #salesforce platform #salesforce marketing
#salesforce developers