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.

For more details please refer to official link.

Happy Coding 🙂