Design Attribute in Lightning Web Components

As we all know that, salesforce has recently introduce new technology which is “Lightning Web Component” which have only 5 files in a folder that does not include design file like in Aura Component.

What if we wanted to get some input from the user before using our Web Components. No need to be panic we have meta.xml file where we can do the same trick.

We can define the targets where we wanted to use our lightning web components below are the list of the same targets and sample to use targets in meta file

<targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Default</target>
        <target>lightningCommunity__Page</target>
    </targets>

lightning__AppPage :- Components can be used in App Page

lightning__RecordPage: – Component can be used in record detail page

lightning__HomePage: – Components can be used in App Home Page

lightningCommunity__Default:- Components can be used in community default page.

lightningCommunity__Page: – Component can be used in community as page.

Below is the code of the Web components for the design attribute

html file

<template>
    <lightning-card title="Design attribute in Configuration file" icon-name="custom:custom45">
        {recordId}
        {heading}
    </lightning-card>
</template>

javaScript file

import { LightningElement, api } from 'lwc';

export default class DesignAttribute extends LightningElement {
    @api recordId;
    @api heading = "default value";
}

XML file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Design Attribute Demo</masterLabel>
    <description>This is the demo Lightning Web Component which will give you the demo idea about the design attribute</description>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Default</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="recordId" type="String" />
            <objects>
                <object>Account</object>
                <object>Contact</object>
                <object>Opportunity</object>
            </objects>
        </targetConfig>
        <targetConfig targets="lightning__AppPage">
            <property name="heading" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Please find the recording for the same

Thanks for the reading! Sharing is caring 🙂 #BeaMultiplayer #Trailblazer #LightningWebComponents #WebComponentsSalesforce

If you have any queries you can reach me [email protected] or tweet me @cloudyamit