Get Record Id in Lightning Web Component

Get Record Id in Lightning Web Component

Get Record Id in Lightning Web Component

Getting current record id in lightning web component(lwc) is very easy.

If a component with a recordId property is used on a Lightning record page, the page sets the property to the ID of the current record. In the component’s JavaScript class, use the @api decorator to create a public recordId property. Here is example of javascript class.

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

To get current record id in lightning component(aura component), we had to implement force:hasRecordId to get record id in lightning aura component. But in lightning we component its very simple, we only need to use recordId property with @api decorator.

Lets create simple lightning web component to get account detail.

Create recordIdExampleLWC lightning web component from Visual studio code. Use Control shift P and type SFDX: Create Lightning Web Component.

recordIdExampleLWC.html

In html file, we are using lightning-record-view-form to show account detail using recorid. We can also use recordid to query Account record or some other details related to account.

 
<template>
    <div class="acc-container">
        <lightning-record-view-form record-id={recordId} object-api-name="Account">
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Name"></lightning-output-field>
                    <lightning-output-field field-name="Website"></lightning-output-field>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-output-field field-name="Industry"></lightning-output-field>
                    <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
                </div>
            </div>
        </lightning-record-view-form>
    </div>
</template>

recordIdExampleLWC.js

import { LightningElement,api } from 'lwc';

export default class RecordIdExampleLWC extends LightningElement {
    @api recordId;
}

recordIdExampleLWC.css

Lets apply some styles to our component

 
.acc-container {
    background: white !important;
    border: 1px solid black !important;
}

recordIdExampleLWC.js-meta.xml

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

No we can add this lwc component on account detail page.

  • Go to Account tab.
  • Open any record.
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your recordIdExampleLWC component and drag it on right hand side top.
  • Click Save and activate.

We will have following output.

Get Record Id in Lightning Web Component Account Record

 

For more details please refer to official link.

Happy Coding 🙂

Permanent link to this article: https://www.sfdcpoint.com/salesforce/get-record-id-in-lightning-web-component/

8 comments

1 ping

Skip to comment form

    • Cameron Wong on January 27, 2021 at 12:54 am
    • Reply

    Hi Ankush – thank you for the walkthru. I’m just beginning my journey in to Dev & LWCs. Regarding the example above what if I want to display a record w/ a certain criteria instead of the specific record I’m already on?
    I see line 3 on the recordIdExampleLWC.html code is:

    How would I write the code if I wanted to only display records where Status = Active & Checkbox__c = TRUE?

    • satya on April 5, 2021 at 9:16 am
    • Reply

    Hi Ankur,

    I did the copy paste same code above. But it’s not able to get the recordId in the markup file from JavaScript.
    If in markup i just hardcode some account id, then it shows the value for that record.

    Please help

    • Anu on June 24, 2021 at 9:14 pm
    • Reply

    hi Satya,

    Did you get the solution for your issue, because im facing the same challenge.
    If you can help,

    Thanks
    Anu

    • Sudhir on July 19, 2021 at 6:31 pm
    • Reply

    May be this can help you Anu and Satya.
    https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_wire_example

    • karthik J on August 23, 2021 at 8:29 pm
    • Reply

    Hi I want pass record of another object on Account using record view form of LWC, I am tried different ways but not able to do it. How I can do this

    • Walt on September 17, 2021 at 11:07 am
    • Reply

    You have to add a targetConfig node to the xml file to allow recordId in

    • priya on February 21, 2023 at 12:00 pm
    • Reply

    Page doesn’t exist (Enter a valid URL and try again)

    • Santosh on July 31, 2023 at 9:23 pm
    • Reply

    This works for Salesforce Mobile app ?

  1. […] Getting current record id in lightning web component(lwc) is very easy. If a component with a recordId property is used on a Lightning record page, the page sets the property to the ID of the current record. In the component's JavaScript class, use the @api decorator to create a public recordId property. via […]

Leave a Reply

Your email address will not be published.