In Salesforce, record ID is a unique identifier for a Salesforce object record. 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 Salesforce tutorial, we will learn how to get record Id in Salesforce lightning web components.
Get Current Record ID In Lightning Web Components (LWC)
To get the recordId of the current record in the Lightning Web Component, we will use the @api decorator through which we can expose the record ID to be accessed and viewed publicly.
Follow the below steps to create the lightning web component that displays the record ID of the current object record. Since this component will display the ID of the record, 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 to the template region and save the changes.
Now, in the lightning web component, you will see the record ID of the current record.
This way, we can get and display the current record ID of an object record in 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 the changes in the meta.xml file, where we have to set the target as lightning__RecordAction.
With this LWC quick action, the ID of the current record will be displayed with a button click.
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 make the lightning web component be exposed for quick action, enter the below code 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.
5. In the Account object setup, click on Buttons, Links, and Action, then click on the New Action button.
6. 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 Name and Label of the component, then click Save.
7. 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.
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 or get the record ID in a quick-action LWC component and view it with a button click.
Conclusion
In this Salesforce tutorial, we have learned how to fetch and display the record ID in a Salesforce Lightning Web Component (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:
- 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)
- Get 18 Digit Salesforce Id in Report
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
