Metadata Configuration (.
xml) File in LWC
Purpose: The .xml file describes the metadata configuration of the Lightning Web
Component. It tells Salesforce where and how the component should be used (App Builder,
Record Pages, etc.).
Structure of .xml File:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle
xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>60.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>*</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Important Tags:
Tag Description
<apiVersion> Indicates the Salesforce API version.
<isExposed> true if the component can be used in Lightning App Builder.
<targets> Defines where the component can be used.
<targetConfigs> Provides component behavior per page/object.
Deployment and Usage in App Builder
Steps to Deploy and Use an LWC in App Builder:
1. Create LWC in VS Code:
o lwcFolder/componentName/componentName.js
o componentName.html
o componentName.js-meta.xml
o
2. Push to Org using Salesforce CLI:
sfdx force:source:push // For Scratch Org
sfdx force:source:deploy -p force-app // For
Sandbox/Production
3. Expose Component in .xml:
o Ensure <isExposed>true</isExposed> is set.
4. Login to Salesforce → Go to App Builder:
o Navigate to Setup → Lightning App Builder → Edit/Create a Page.
o Search for your component in the "Custom" section.
o Drag and drop your component onto the layout.
LWC to App Builder Flow:
[VS Code (LWC code)]
↓
[Salesforce CLI Deployment]
↓
[.xml File Configuration (Exposed & Targets)]
↓
[App Builder - Search & Drag Component]
↓
[Lightning Page (Home / App / Record)]
Enabling LWC in Sandbox/Production
Prerequisites:
Requirement Description
My Domain Must be enabled. Go to Setup → My Domain.
API Version Component must use API version ≥ 45.0
Proper XML Ensure isExposed = true and valid targets.
Steps to Enable & Deploy in Sandbox/Production:
1. Create LWC in VS Code using Salesforce CLI:
o Use the command:
sfdx force:lightning:component:create -n myComponent -d
force-app/main/default/lwc
2. Authorize Sandbox/Production Org:
sfdx force:auth:web:login -r https://test.salesforce.com //
Sandbox
sfdx force:auth:web:login -r https://login.salesforce.com //
Production
3. Deploy LWC to Org:
sfdx force:source:deploy -p force-
app/main/default/lwc/myComponent
4. Assign Permission Sets if Needed:
o Especially if you’re accessing records or Apex.
5. Open Lightning App Builder:
o Verify if your component is available.
Tips:
• Always check the apiVersion compatibility.
• XML file is the key to visibility in App Builder.
• Use targetConfig for object-specific control.
1. Metadata Configuration (.xml)
Flow Diagram: LWC Metadata Visibility
[LWC Folder]
└── componentName/
├── componentName.html
├── componentName.js
└── componentName.js-meta.xml
↓
[.xml Config File Set]
↓
[isExposed = true] → [Targets = Home, App, Record]
↓
[Available in App Builder UI]
Extra Points:
• You must deploy the .xml file with the component.
• Add <object>*</object> to make it accessible for all standard & custom objects.
• Targets accepted:
o lightning__AppPage
o lightning__RecordPage
o lightning__HomePage
o lightning__Tab (for tab components)
2. Deployment and Usage in App Builder
Flow Diagram: Deployment Process
[Code LWC Locally in VS Code]
↓
[Setup .js-meta.xml for Exposure]
↓
[Authorize Org using SFDX CLI]
↓
[Deploy to Sandbox or Production]
↓
[Login to App Builder in Org]
↓
[Drag Component into Home/App/Record Page]
Extra Points:
• In App Builder, only components with isExposed=true appear.
• Use targetConfig to filter objects for record pages.
• Use sfdx force:source:pull in scratch org to sync.
3. Enabling LWC in Sandbox/Production
Flow Diagram: Enabling LWC in Sandbox/Production
[My Domain Enabled]
↓
[Component uses API ≥ 45.0]
↓
[CLI Auth: Sandbox / Production]
↓
[Deploy LWC via SFDX]
↓
[Component Visible in App Builder]
↓
[Drag to Page + Save + Activate Page]
Advanced Notes & Best Practices:
Area Best Practice
.xml Use targetConfig to restrict access cleanly
App Builder Avoid putting LWC in too many page types unless required
Naming Use PascalCase for folder names and component names
Access Make sure profile/permset allows the component
Debugging Use Chrome DevTools + browser console logs
Code Versioning Use Git to manage deployments with teams
Testing Deploy in sandbox first, then production
Security Respect Locker Service and base LWC principles
Sample Advanced XML
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
<object>Contact</object>
</objects>
</targetConfig>
➡This ensures the component shows only on Account and Contact record pages.
