September 20, 2023

componentName.js-meta.xml

The configuration file defines the metadata values for the component, including targets and the design configuration for the Lightning App Builder and Experience Builder. If you want to use your component inside the app page or record page or homepage or community then you need to specify those configuration in the js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

• API Version: The version of the Salesforce API that the component is designed to work with. This ensures compatibility and consistency.
• Exposed Status: Indicates whether the component is available for use in specified Salesforce contexts, such as Lightning App Pages, Record Pages, or Home Pages.
• Targets: The different pages where the component can be added or used, such as App Pages, Record Pages, or Home Pages.
• 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. For Experience Builder sites, only lightningCommunity__Default supports component properties.Supports the targetConfig subtag.

Example:

To use LWC component in Quick Action:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <description>Formfill</description>
    <isExposed>true</isExposed>
    <masterLabel>Formfill</masterLabel>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Mostly used interfaces in LWC to embed to pages/target in JS-meta .xml

•  lightningCommunity__Default–> Enables a component in Experience Builder to expose editable properties when the component is selected. Only properties defined for the lightningCommunity__Page or lightningCommunity__Theme_Layout targets are editable in Experience Builder.
• lightningCommunity__Page–> component used on a page in Experience Builder. Components appear in the Components panel.
• lightningCommunity__Page_Layout–> component used in Experience Builder as a page layout for an LWR site. Components appear in the Content Layout window.
• lightningCommunity__Theme_Layout–> component used in Experience Builder as a theme layout for an LWR site. Components appear in Settings in the Theme area.
• lightning__AppPage–> on an App page in Lightning App Builder
• lightning__FlowScreen–> Enables a component to be used on flow screens in Flow Builder.
• lightning__HomePage–> Enables a component to be used on a Home page in Lightning App Builder.
• lightning__RecordAction–>Enables a component to be used as a quick action on a record page. To specify the type of quick action, define a targetConfig with an actionType attribute.
• lightning__RecordPage–> Enables a component to be used on a record page in Lightning App Builder.
• lightning__Tab–> Enables a component to be used in a custom tab in Lightning Experience or the Salesforce mobile app.

Common Interfaces used in JS-meta.xml

Decorators in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments