How to Pass Values to an LWC on a Record Page?

Question

I have created a custom LWC component that can be placed on a record page. Below is the component’s meta file:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Test Component</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="userId" label="User Id" type="String" />
            <property name="workOrderId" label="Work Order Id" type="String" />
            <property name="test Name" label="TestName" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

My component requires these input values (userId, workOrderId, and TestName) to fetch related records. I see that these properties appear in the component’s configuration panel when adding it to a record page. However, I am unsure how to populate them dynamically using values from the record. How can I achieve this?

Answer

To pass record-specific values to your LWC component, you can use the {recordId} and {userId} global variables available in Salesforce record pages. Here’s how you can do it:

1. Update the Meta XML File to Accept recordId

Salesforce automatically provides the recordId property to LWC components when placed on a record page. Modify your meta XML file as follows:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Test Component</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="recordId" label="Record Id" type="String" />
            <property name="userId" label="User Id" type="String" />
            <property name="workOrderId" label="Work Order Id" type="String" />
            <property name="testName" label="Test Name" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

This XML file is a Lightning Web Component (LWC) meta configuration file, which defines how the component behaves within Salesforce. The <LightningComponentBundle> tag wraps the entire metadata definition, specifying an API version of 62.0 and setting isExposed to true, meaning the component is available for use outside of its module. The <targets> section includes <target>lightning__RecordPage</target>, indicating that the component can be placed on a Salesforce record page.

Within <targetConfigs>, a <targetConfig> block further customizes the component’s behavior for record pages. It declares four properties (recordId, userId, workOrderId, and testName), each with a corresponding label and data type (String). These properties allow the component to accept dynamic values when added to a record page. The recordId property is particularly significant because Salesforce automatically provides it when the component is placed on a record page, allowing it to retrieve data related to the current record. The other properties, such as userId, workOrderId, and testName, can be manually configured in the Lightning App Builder by referencing record fields or global variables.

2. Update the JavaScript File to Accept the Properties

In your LWC component’s JavaScript file, import the @api decorator and declare the properties to receive values from the record page:

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
    @api recordId;
    @api userId;
    @api workOrderId;
    @api testName;

    connectedCallback() {
        console.log('Record ID:', this.recordId);
        console.log('User ID:', this.userId);
        console.log('Work Order ID:', this.workOrderId);
        console.log('Test Name:', this.testName);
    }
}

This JavaScript file defines a Lightning Web Component (LWC) named MyComponent. It imports LightningElement and api from the lwc module, which are essential for creating an LWC and exposing properties to the Salesforce framework. The class MyComponent extends LightningElement, making it a standard LWC. The @api decorator is used to define four public properties—recordId, userId, workOrderId, and testName. These properties receive values dynamically when the component is placed on a Salesforce record page, as specified in the corresponding meta XML file. The connectedCallback() lifecycle hook executes when the component is initialized and logs the received property values to the browser console, allowing developers to verify that the correct data is being passed. This setup enables the component to fetch and display relevant data based on the current record and user context.

3. Pass Values Dynamically in the App Builder

When you add the component to a record page, you can pass dynamic values using merge fields. Open the Lightning App Builder, add the component, and set the property values:

• recordId → {recordId} (automatically provided by Salesforce)
• userId → {!$User.Id} (current logged-in user’s ID)
• workOrderId → Select a field from the record, e.g., {!Record.Work_Order__c}
• testName → Select another field, e.g., {!Record.Test_Name__c}

This ensures that the component receives the correct values dynamically when placed on different record pages.

See also: Lifecycle Hooks in Lightning Web Components

Alternative Approach: Fetch Values Using getRecord

If you need additional fields that are not directly available via App Builder, you can use the getRecord wire adapter from @salesforce/uiRecordApi to fetch record details dynamically:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['WorkOrder__c.Test_Name__c', 'WorkOrder__c.User__c'];

export default class MyComponent extends LightningElement {
    @api recordId;
    workOrderId;
    testName;
    
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    wiredRecord({ error, data }) {
        if (data) {
            this.workOrderId = data.fields.WorkOrder__c.value;
            this.testName = data.fields.Test_Name__c.value;
        } else if (error) {
            console.error('Error fetching record:', error);
        }
    }
}

This method is useful when you need additional fields but don’t want to pass them manually through App Builder.

By following these steps, your LWC component will dynamically receive values from the record page and use them to fetch related data.

See also: 61 LWC Lightning Web Component Interview Questions

Job-Oriented Salesforce Training with 100% Money Back Assurance

Our Salesforce Course is specifically structured to provide a comprehensive understanding of the Salesforce platform, equipping you with the critical skills needed to excel in the CRM sector. The curriculum covers key modules such as Salesforce Admin, Developer, and AI, combining foundational concepts with practical, hands-on learning. By engaging in real-world projects and assignments, you’ll build the expertise to solve complex business problems using Salesforce solutions. Our expert trainers ensure you gain both technical proficiency and valuable industry knowledge to succeed in the Salesforce ecosystem.

In addition to technical training, our Salesforce Training in Canada includes tailored mentorship, certification exam preparation, and interview guidance to boost your career prospects. You’ll benefit from extensive study resources, practical project exposure, and continuous support throughout your journey. By the end of the course, you’ll be fully prepared for certifications and equipped with the practical skills that employers value. Take the first step in your Salesforce journey with us and explore endless career possibilities. Join our Free Demo today!