How to set Design Attributes in Lightning Web Component?

To set the design attributes in Lightning Web Component, we have to work on configuration file or component.js-meta.xml file.

We have created a Lightning Web Component named “configurator“.

Step 1: Need to update the configurator.js-meta.xml file to set the visibility in Lightning App Builder.

configurator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="configurator">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>        
    </targets>
</LightningComponentBundle>

Step 2: Need to write the html file.

configurator.html

<template>
    <lightning-card title="Design Attributes">    
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
                <lightning-input label="Description" value={description}></lightning-input>
                
Priority: <lightning-formatted-text value={priorityOptions}></lightning-formatted-text>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

Step 3: We have updated the JS file.

configurator.js

import { LightningElement, api } from 'lwc';

export default class Configurator extends LightningElement {
    @api priorityOptions;
    @api description;
   
}

Step 4: Again, we have updated configurator.js-meta.xml file to set the design attributes.

configurator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="configurator">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>        
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage, lightning__HomePage">
            <property label="Select Priority" name="priorityOptions" type="String" datasource="Low, Medium, High"></property>
            <property label="Description" name="description" type="String"></property>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <property label="Description" name="description" type="String"></property>
            <property name="priorityOptions" type="String" datasource="Low, Medium, High"></property>
            <objects>              <object>Case</object>
              <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Step 5: At last, we have added this component into Lightning App Page.

Result

18,753 total views, 3 views today