Design attributes in Lightning Web Components
Amit Chaudhary

Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates. He is a active blogger and founder of Apex Hours.

Design attributes in Lightning Web Components

In this post we will talk about how to create design attribute in lightning web components. We know how to create Design Attribute in lightning component. For Design Attribute we used to create <design:attribute tag in design file. But for Lightning web components we need to define the design attribute in Component Configuration File (XML) with<targetConfigs> tag. The component author need to defines the property in the component’s JavaScript class using the @api decorator.

What is Design Attributes in Lightning Web Components

We can use Design Attribute to make lightning web components attribute available to System Admin to edit Lightning App Builder or Community. So we can expose the component attribute in Lightning App Builder using design Attribute.

Design attributes in Lightning Web Components

Example of design attribute in Lightning web component

Here is example of design attribute in LWC.

HelloWorld.html

<template>
    <lightning-card title={strTitle} icon-name="custom:custom14">
        <div>
            <p>  Hello , {firstName} </p>
        </div>
        <div>
            <template if:true={showImage}>
                <img src={imgUrl} width="200" height="200"/>
            </template>
        </div>
    </lightning-card>
</template>

HelloWorld.js

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api firstName ='Amit';
    @api strTitle ='Welcome in Salesforce';
    @api showImage =false;
    @api imgUrl ='';
}

HelloWorld.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="strTitle" type="String" default="Welcome in Salesforce" label="Enter the title"/>
            <property name="showImage" type="Boolean" default="true" label="Show Image ?"/>
            <property name="imgUrl" type="String" default="" label="Enter Image URL"/>
        </targetConfig>
    </targetConfigs>
   
</LightningComponentBundle>

Define the design Attribute in <property tag under <TargetConfig tag.

Demo of Design Attributes in LWC

Summary

Design attributes in Lightning Web Components allows you to build reusable and dynamic components. To set the design attributes in Lightning Web Component, we have to work on configuration file or component.js-meta.xml file.

Share this article

1 Comment

  • Hi Amit,

    Is there any way to provide a placeholder or evaluate the “label” attribute of a property? In all examples I have seen static values are passed to these design attributes – meaning they can’t be localized.

    These design attributes don’t seem to be accessible programatically so I am wondering how we can have different values for these labels for different locales etc.

    Thanks

Leave a reply

Keep in Touch

Subscribe for Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,229 other subscribers

Search

Our Supporter

RECENT POSTS

Apex Hours

Apex Hours is one stop platform to learn Salesforce skills and technology

Join our Newsletter and get tips and tricks how to explore the salesforce for free!