Configuration File Tags

apiVersion:- A double value that binds the component to a Salesforce API version. To check the current version, take help of this knowledge article.

description:-A short description of the component, usually a single sentence. Appears in list views, like the list of Lightning Components in Setup, and as a tooltip in the Lightning App Builder and in Community Builder.

When you hover your mouse to the custom component deployed to the org, you can see the description with the label.

isExposed:-A Boolean value. Exposes the component in all orgs, and in Lightning App Builder and Community Builder. To make a component usable in a managed package, set isExposed to true. To make a component usable in Lightning App Builder and Community Builder, set isExposed to true.

masterLabel:-The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder.

targetConfig:- It is subtag of targetConfigs and used for different page type configuration. For Example:-

<targetConfig targets=”lightning__RecordPage”>

<targetConfig targets=”lightning__AppPage, lightning_HomePage”>

targets:-The targets attribute value that you specify must match one or more of the page types that you listed under <targets> for the component. It Supports the property and objects subtags.

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

objects:-A set of one or more objects the component is supported for. This tag set works only inside a parent targetConfig that’s configured for lightning__RecordPage. Specify the objects tag set only once inside a targetConfig set. Supports the object subtag.

 Note

object:-Defines which objects the component is supported for. Use one object tag for each supported object. You can’t use ‘*’ to denote all objects.

 

Html

<template>

    <div class="slds-m-around_small">

        <strong>

            Metadata File Example {message} <br/>

            page no  : {pageno}

        </strong>

    </div>

</template>

Javascript

import { LightningElement,api } from 'lwc';

export default class MetaExample extends LightningElement {

    @api message;

    @api pageno;

}

xml

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

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

    <apiVersion>50.0</apiVersion>

     <isExposed>true</isExposed>

    <masterLabel>Metadata File Configuraton</masterLabel>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightningCommunity__Default</target>

        <target>lightningCommunity__Page</target>

        <target>lightning__Tab</target><!-- Winter 20 -->

        <target>lightning__Inbox</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordPage" >

            <property name="message" type="String" label="Welcome Message"/>

            <property name="pageno" type="Integer" label="Page No" />

            <objects>

                <object>Contact</object>

              </objects>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

 Getter property in Lightning web components

1. Use getter property if you want to modify the property before you use in template

2. Use getter property when you don't  want to create a variable

html

<template>

    <lightning-card title="Getter Property"  icon-name="custom:custom14">

     <p> Passing variable without declaring variable : {passProperty}</p>

     <p> changemessage :  {changemessage}</p>

    </lightning-card>

</template>

Js

import { LightningElement } from 'lwc';

export default class GetProperty extends LightningElement {

    msg='Test';

    get passProperty(){

        return 'Without Declaring Variable';

    }

    get changemessage(){

        return this.msg+'-->'+'add value';

    }

}

xml

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

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

    <apiVersion>50.0</apiVersion>

   <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>