Design Attributes in LWC

 

Hi Folks, In this blog we will try to understand, How we can use Design Attributes in our Lightning Web components.

What is design Attribute in LWC

• We Can use design attributes to make our LWC attributes available to system admin or a developer to edit it in builder tools like Lightning App builder, Community Builder or in a flow designer.

• To do so, we will expose the component attribute in any builder tools using design attribute. 

• As in Aura we have design file where we use <design:attribute> tag but in LWC if we want to define the design attribute we have to use our configuration file i.e. js-meta.xml with <targetConfigs> tag and also we have to define our property as public using @api decorator in our js file.

<targetConfigs>

<targetConfig targets="lightning__FlowScreen">

<property name='' type='' default='' label='' role=''> </property>

</targetConfig>

</targetConfigs>

• name: It's value must match the property that you have defined in your js (Required)

• type: It's define the attribute data type (Required)

• default: The default value for the attribute

• role: To restrict a property to inputOnly or outputOnly we use this attribute. If you don't define this attribute it will be a default which means that it is available for both inputOnly or outputOnly.

• label: It will display as a label for the attribute in the builder tool. 

designAttributeLWC.html

<template>

<lightning-card title="Design Attributes in LWC">

Welcome to {title}

<br>

<lightning-input label="Enter the Value between 1 to 100" value= {number}

onchange={handleChange}>

</lightning-input>

</lightning-card>

</template>

designAttributeLWC.js

import { LightningElement,api} from 'lwc';

export default class DesignAttributr extends LightningElement {

@api title;

@api number;

handleChange(event){

this.number=event.target.value;

}

}

designAttributeLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__FlowScreen</target>

</targets>

<targetConfigs>

<targetConfig targets="lightning__FlowScreen">

<property name='title' type='String' label='Enter the Title' default="" >

</property>

<property name='number' type='String' label='Enter the Value between 1 to 100'

role='outputOnly' ></property>

</targetConfig>

</targetConfigs>

</LightningComponentBundle>

If you have any comments or queries about this, please feel free to mention them in the comments section below.