Design Properties in LWC using XML file

/ LWC / By

Requirement

In this post, we are going to explore how can we create design properties in lightning web components. It gives ability to setup some basic default setting while dragging the LWC anywhere. Practically, it is super helpful in experience cloud/community development.

Example

In below given example, we want to pass the recordId dynamically from standard Idea Detail Page and also we are giving ability to Administrator to show or hide the comments while configuring this component using the design attribute.

Implementation

Technically there are two key steps:

  • Make a public property for each Design attribute in LWC js.
  • Define these public properties in LWC XML file.

LWC.html – just a prototype – work on your component based on your requirement:

<template>

<div class="slds-m-around_large">
    <div class="slds-text-heading_large">Support payment using touch</div>
    <div>
        {recordId}
        {showComment}
     </div>
</div>

</template>

LWC JS

import { LightningElement, api } from 'lwc';
export default class IdeaDetail extends LightningElement {

    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api showComment;

    connectedCallback() {
        console.log("RecordId___", this.recordId);
        console.log("showComment___", this.showComment);
    }


}

LWC XML

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<masterLabel>Idea Detail</masterLabel>
	<apiVersion>62.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightningCommunity__Default</target>
		<target>lightningCommunity__Page</target>
	</targets>
	<targetConfigs>
	<targetConfig targets="lightningCommunity__Default">
		<property
		name="recordId"
		type="String"
		label="Record ID"
		description="Specify {!recordId} in the Record ID field on the component property in Experience Builder."
		/>
		<property
		name="showComment"
		type="Boolean"
		label="Show Comments?"
		description="Enable Comment section"
		/>
	</targetConfig>
</targetConfigs>
</LightningComponentBundle>

Related Posts