How to Get Record ID in LWC in Salesforce (Detailed Guide)

When we build Lightning Web Components, getting the recordId is very important. We need it to fetch data, call Apex, show forms, or know which record the user is viewing.

For example, imagine you add a Lightning Web Component to the Account record page. When a user opens any Account, the LWC should automatically show all Opportunities related to that Account.

To show the correct data, the component must know which Account is currently open. To do this, the component must first get the Record ID.

In Salesforce, a record ID is a unique identifier for a Salesforce object. To get or fetch the record ID in a Lightning Web Component, we need to add the component to the Lightning record page of that specific object.

In this article, we will learn different ways to get record ID in LWC in Salesforce using practical examples.

Get Record ID in LWC in Salesforce

To get the recordId of the current record in the Lightning Web Component, we will use the @api decorator, which exposes the record ID for public access.

Follow the steps below to create a Lightning Web Component that displays the current object’s record ID. Since this component displays the record ID, it will be exposed and deployed to the lightning__RecordPage target.

1. Create an LWC component and enter the code below in the HTML to define the UI of the component.

<template>
    <lightning-card title="Get Record ID ">
        <div class="slds-p-around_medium">
            <p>Current Record ID: {recordId}</p>
        </div>
    </lightning-card>
</template>

2. After this, enter the code below in the JS file to define the logic of fetching the current record ID.

import { LightningElement, api } from 'lwc';
export default class GetRecordIdExample extends LightningElement {
    @api recordId; 

    connectedCallback() {
        console.log('Record ID:', this.recordId);
    }
}

In the above code, we have set recordId as public with the @api decorator, allowing it to receive a record ID from its parent or context, such as a Salesforce record page.

When the component is added to the Lightning record page, the connectedCallback()  method runs and displays the record ID in the Lightning web component.

3. Enter the code below in the meta.xml file to expose the lightning web component to the record page.

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

4. After this, navigate to any object record pages and deploy the LWC component. In this example, I will deploy the LWC component on the Opportunity object record page.
   • On the record page, click on the settings icon and select Edit Page.

5. In the Lightning App Builder, drag and drop the LWC component into the template region, then save the changes.

Now, in the Lightning Web Component, you will see the current record’s record ID.

This way, we can retrieve and display the current record ID for an object record in a Salesforce Lightning Web Component.

Get Record ID In a Quick Action LWC Component

To display the record ID using an LWC quick action, we need to make changes in the meta.xml file, setting the target to lightning__RecordAction.

With this LWC quick action, the ID of the current record will be displayed when the button is clicked.

1. Enter the code below in the HTML file to define the UI that will be rendered through a quick action.

<template>
    <lightning-quick-action-panel header="LWC Quick Action">
        <div class="slds-p-around_medium">
            <p>Current Record ID: <strong>{recordId}</strong></p>
        </div>
        <div slot="footer">
            <lightning-button variant="neutral" label="Close" onclick={closeAction}></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

2. Enter the Code below in the JS file to define the logic of fetching the current record ID.

import { LightningElement, api } from 'lwc';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class QuickActionLWC extends LightningElement {
    @api recordId;

    closeAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

3. To expose the Lightning Web Component for quick action, enter the code below in the meta.xml file.

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

After this, deploy the source code to the Salesforce org.

Now, we need to create a quick action using this lightning web component. In this example, I will deploy this quick action on the Account object record page. To create the LWC quick action, follow the steps below.

4. Navigate to the Object Manager tab and select the Account object.
   • In the Account object setup, click on Buttons, Links, and Action, then click on the New Action button.

5. In the quick action information, select the Action Type as Lightning Web Component, then select the LWC component that we have created. After this, enter the component’s Name and Label, then click Save.

6. Now, navigate to the object page layout and deploy the LWC quick action to the default page layout.
   • In the page layout setup, select Mobile & Lightning Actions, then drag and drop the LWC quick action “Show Record ID” to the Salesforce Mobile and Lightning Experience Actions section.

7. After this, navigate to the Account record page, and there you will see the quick action button Show Record ID, and on click, it will display the ID of the current account record.

This way, we can fetch the record ID in a quick-action LWC component and view it with a single button click.

Conclusion

In this Salesforce article, we learned how to get a record ID in LWC. We covered two methods: embedding an LWC on a record page and using an LWC as a quick action.

By using the @api decorator, we made the record ID accessible within the component. We also learned about the configuration that is required in the meta.xml file to expose the component to the record page and to the quick action.

You may also like to read:

• Get 18 Digit Salesforce Id in Report
• How to Use Lightning Message Service (LMS) in Salesforce LWC?
• How to Build a Custom Object LWC Data Table in Salesforce
• Display Toast Notifications in Lightning Web Components (LWC)

Shubham

Shubham is a Certified Salesforce Developer with technical skills for Building applications using custom objects, approval processes, validation rule salesforce flows, and UI customization. He is proficient in writing Apex classes, triggers, controllers, Apex Batches, and bulk load APIs. I am also familiar with Visualforce Pages and Lighting Web Components. Read more | LinkedIn Profile