Working with Design attributes in Lightning Web Component

In Aura there are some Design Resources controls which attributes are exposed to builder tools like the Lightning App Builder, Community Builder, or Flow Builder.

And if we need the same functionality for Lightning Web Component, we can do that by following some simple steps.

Agenda

Working with design attributes for Lightning Web Components, Understanding how to use design attributes for Lightning Web Components, Understanding the need of it, and where we can expose it.

So, Our First point is, Why do we use Design Attributes ?

• It allows you to build reusable and dynamic components.

• To make some attributes available for the admins to use in tools like App Builder we need to add a design attribute in the design component bundle.

• We can control component behaviour directly from the App builder and etc.

Now, the question rises, How can we use a design attribute in Lightning Web Components ?

Before jumping to those questions, we first need to understand some terminologies. And here they are: 

• targetConfigs:- Configure the component for different page types and define component properties. For example, a component could have different properties on a record home page than on the Salesforce Home page or on an app page.

• targetConfig :- Use a separate targetConfig for each different page type configuration. Specify one or more page types in the targets attribute, such as <targetConfig targets="lightning__RecordPage''> or <targetConfig targets="lightning__RecordPage,lightning__AppPage">.

• property :- Specifies a public property of a component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder. The component author defines the property in the component’s JavaScript class using the @api decorator.

• datasource :- Renders a field as a picklist, with static values. Supported only if the type attribute is String.

• description :- Displays as an i-bubble for the attribute in the tool.

• default :- The default value for the attribute.

• label :- Displays as a label for the attribute in the tool.

• type :- The attribute’s data type.

• name :- Required if you’re setting properties for your component. The attribute name. This value must match the property name in the component’s JavaScript class.

And a little brief about Lightning Web Component: http://queryexception.blogspot.com/

In Aura Components, A design resource lives in the same folder as your .cmp resource. But For the Lightning Web Component we describe the design attribute in the .js-meta.xml file also known as Configuration File. 

The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder.

Example of design attribute in Lightning web component

HTML File:

<template>

     <!-- calling slot modal according to user's interaction -->

     <c-lwc_modal if:true={showModal} header={header} onclose={handleCancel} 

        style-class='slds-modal slds-fade-in-open'>

        <div slot="body">

            <!-- Base components to display data -->

            <lightning-record-view-form

            record-id={accountId}

            object-api-name="Account">

            <div class="slds-box">

                <lightning-output-field field-name="Name">

                </lightning-output-field>

                <lightning-output-field field-name="Phone">

                </lightning-output-field>

                <lightning-output-field field-name="AccountNumber">

                </lightning-output-field>

            </div>

        </lightning-record-view-form>

        </div>

        <!-- footer part to close modal from parent component -->

        <div slot="footer">

            <lightning-button variant="Cancel" label="Cancel" onclick={handleCancel}

             class="slds-m-left_x-small"></lightning-button>

        </div>

    </c-lwc_modal>

</template>

The HTML file is used to show the details of the Account record by taking the ID using Design attribute.

JavaScript File: 

To expose a property to Lightning App builder, the property must be annotated with @api decorator. So, the properties in js file have been annotated with @api. When you annotate a property with @api decorator, it becomes reactive in nature. The component re-render itself whenever reactive property changes.

And When a component re-renders, all the expressions used in the template are re-evaluated.

import { LightningElement, api } from 'lwc';

export default class DesignAttributeForLWC extends LightningElement {

    // Api Variable

    @api accountId;

    showModal = true;

    header = 'Account Details Using Design Attribute';

    handleCancel(){

        this.showModal = false;

    }

}

Here, we are decorating AccountId with the @api to expose it to the app builder and to take the account record Id as input and show the details of the account at the component.

Reactive property is also known as Public property because they are used to communicate with other components and for integrating them.

To make a field public and therefore available to a component's consumers as a property, decorate it with @api.

Tip

Decorators are a JavaScript language feature. The @api and @track decorators are unique to Lightning Web Components. A field can have only one decorator.

Meta XML File:

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">

            <property name="accountId" type="String" />

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

This is the configuration file of the component. We have used targetconfig which supports property tag. The property tag specifies a public property of a component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder.  

Final Result

    

Blogs Conclusion

So, we learn about the Design attribute, why we use them, How they are helpful for us, How we can use them etc. And understand the basics of Lightning Web Component.

Thank You.

Rahul Vaishnav