Usage of Design Attributes in Lightning Web Components

Usage of Design Attributes in Lightning Web Components
Usage of Design Attributes in Lightning Web Components

In my previous post, I have told you about how to navigate in the Lightning Web Components, now I’m going to tell you how to use Design Attributes in Lightning Web Components.

What is design attributes in Salesforce Lightning Framework?

When we need to expose an attribute of the component to the end user so that he can change/update the value of the component in builder tools like the Lightning App Builder, Community Builder, or Flow Builder. 

In Aura Framework, we were using <design:attribute> tag to create a design attribute. But in LWC we declare design attribute in the Component Configuration File (XML) with <targetConfigs> tag.

You need to defines the property in the component’s JavaScript class using the @api decorator.

So now let’s have a look at how you can create design attribute in LWC.

design_attribute_lwc_example.html

<template>
    <lightning-card title={cardTitle} icon-name="custom:custom14">
        <div>
            <p>  Hello , {firstName} </p>
        </div>
    </lightning-card>
</template>

design_attribute_lwc_example.js

import { LightningElement, api } from 'lwc';
export default class design_attribute_lwc_example extends LightningElement {
    @api firstName ='Salesforce Ohana!';
    @api cardTitle ='Welcome to Forceblogs.com';
}

design_attribute_lwc_example.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyComponent">
    <apiVersion>45.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="cardTitle" type="String" default="Salesforce Ohana!" label="Enter the Card title"/>
            <property name="firstName" type="String" default="Welcome to Forceblogs.com" label="Enter the First Name"/>
        </targetConfig>
    </targetConfigs>
    
</LightningComponentBundle>

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by www.forcetalks.com

You may also like...

Want to know more about Salesforce Devlopments?

We keep your data private and share your data only with third parties that make this service possible. Read our Privacy Policy.

Holler Box