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 🙂
7 comments
1 ping
Skip to comment form
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?
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
hi Satya,
Did you get the solution for your issue, because im facing the same challenge.
If you can help,
Thanks
Anu
May be this can help you Anu and Satya.
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_wire_example
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
You have to add a targetConfig node to the xml file to allow recordId in
Page doesn’t exist (Enter a valid URL and try again)
[…] 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 […]