5 min read

Metadata Configuration Examples for Lightning Web Components

Scott McClung •

Collection of LWC metadata configuration files samples for common use cases.



Targeting Record Pages, Application Pages, and Home Pages and exposing a single property for all three.

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">
            <property name="pageSize" label="Records per page" type="String" default="8" required="true"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>



Targeting Record Pages, Application Pages, and Home Pages with different properties exposed to each target.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <property name="prop1" type="String" />
          <objects>
              <object>Account</object>
              <object>Opportunity</object>
              <object>Warehouse__c</object>
          </objects>
      </targetConfig>
      <targetConfig targets="lightning__AppPage, lightning_HomePage">
          <property name="prop2" type="Boolean" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>



Specifying the form factor by target

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="prop2" type="Boolean" />
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <property name="prop1" type="String" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning_HomePage">
            <property name="prop3" type="Integer" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>



Configuration targeting a community with multiple property types.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="text" label="The text label" type="String" default="some default value"></property>
            <property name="condition" label="Is it true?" type="Boolean" default="true"></property>
            <property name="count" label="How many?" type="Integer" default="5"></property>
            <property name="options" label="Pick one from the list" type="String" default="value3" datasource="value1,value2,value3" />
            <property name="backgroundColor" type="Color" default="#ff00ff"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>



Targets flow screens with multiple property types.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen" category="Some category">
            <property name="string" type="String" role="inputOnly" />
            <property name="boolean" type="Boolean" default="true" role="outputOnly" />
            <property name="collection" type="@salesforce/schema/Contact[]" />
            <property name="record" type="@salesforce/schema/Contact" />
            <property name="apex" type="apex://namespace__ApexClassName"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>



Example for a utility bar component

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Sample Utility Bar Component</masterLabel>
  <description>This is a demo component.</description>
  <targets>
      <target>lightning__UtilityBar</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__UtilityBar">
          <property name="prop1" type="Boolean" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>



Example for components used in Outlook and Gmail integrations.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <isExposed>true</isExposed>
    <apiVersion>47.0</apiVersion>
    <targets>
        <target>lightning__Inbox</target>
    </targets>
    <description>Sample Email Application Pane</description>
</LightningComponentBundle>

Documentation for the configuration file tags can be found here.