Design Attributes in LWC — Static and Dynamic Picklist

Hello!

This post explains how to create a Static or Dynamic picklist as Design Attributes in LWC.

In Lightning Component we use Design Resource to create design attributes, <design:attribute> tag in the design file,
but for Lighting Web Components we need to define the design attribute in the Component Configuration File (XML)
For more information, about config file check this Link

What are the design attributes of 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 define 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 attributes in LWC.

Example

picklistDesignAttributesExample.html

<template>
    <lightning-card title="Design Attribute Picklist Demo" icon-name="custom:custom19">
        <center>
            <h3>Hi, <b>{username}</b></h3><br />
            <ul>
                <li> Selected Object Name: <b>{objName}</b></li>
                <li> Selected Color : <b>{color}</b></li>
            </ul>
        </center>
    </lightning-card>
</template>

picklistDesignAttributesExample.js

import { LightningElement, api, wire } from 'lwc';
export default class PicklistDesignAttributesExample extends LightningElement {
    @api objName;
    @api color;
    @api username;
}

picklistDesignAttributesExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <!-- Configuring the design attributes -->
    <targetConfigs>
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
        <!-- A static picklist for design attributes -->
        <property name="objName" type="String" default="Account" label="Select the Object" datasource="Account,Contact,Custom_Object__c"/>
        <!-- A dynamic picklist for design attributes -->
​​​​​​​
        <property name="color"  type="String" label="Select the color" datasource="apex://MyCustomPickList"/>
        <property name="username" type="String" label="Enter your Name" required="true"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

MyCustomPickList.cls

global class MyCustomPickList extends VisualEditor.DynamicPickList{
    global override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('red', 'RED');
        return defaultValue;
    }
    global override VisualEditor.DynamicPickListRows getValues() {
        VisualEditor.DataRow value1 = new VisualEditor.DataRow('red', 'RED');
        VisualEditor.DataRow value2 = new VisualEditor.DataRow('yellow', 'YELLOW');
        VisualEditor.DataRow value3 = new VisualEditor.DataRow('blue', 'BLUE');
        VisualEditor.DynamicPickListRows  myValues = new VisualEditor.DynamicPickListRows();
        myValues.addRow(value1);
        myValues.addRow(value2);
        myValues.addRow(value3);
        return myValues;
    }
}
}

Picklist in Design Attributes