Get Record Id into Lightning Web Components
Let us discuss here how to get the current record id into the lightning web components. If a component is used on a Lightning record page, you can pass the component the ID of the current record. In the component’s JavaScript class, use the @api decorator to create a public recordId property.
In this example, we will be using the lightning-record-view-form to show the record data. Let’s start with the simple lightning web component and then we will see another example of how to pass the record id to the apex controller from the lightning web component.
Create a Lightning web component
Now create a lightning web component using the following SFDX command
|
1 |
sfdx force:lightning:component:create --type lwc -n RecordIdExample -d force-app/main/default/lwc |
Here is the RecordIdExample.html code and in this code, we are using the lightning-record-view-form to show the account data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div class="boarder"> <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="Phone"></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> |
Here is the RecordIdExample.js controller. In this JavaScript class, use the @api decorator to create a public recordId property.
|
1 2 3 4 5 |
import { LightningElement,api } from 'lwc'; export default class RecordIdExample extends LightningElement { @api recordId; } |
Sample RecordIdExample.css
|
1 2 3 4 5 |
.boarder { background: blue !important; background-color: royalblue !important; border: 10px solid blueviolet !important; } |
Here is the RecordIdExample.js-meta.xml
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push Changes to Scratch Org
Now push the changes from the local development to scratch org using this command
|
1 |
sfdx force:source:push |
Add the lightning web component to the account record page using app builder and you can able to see the result as shown below.
Update code to pass record Id to Apex controller
Let us make some changes now to the component. Now we will update the code in such a way that will get show the data for the selected account. Let us understand how to pass the record id to the apex controller here. create an apex class using this SFDX command
|
1 |
sfdx force:apex:class:create -n ContactData -d force-app/main/default/apex |
Here is the ContactData apex class.
|
1 2 3 4 5 6 |
public with sharing class ContactData { @AuraEnabled(cacheable=true) public static List<Contact> getContacts(String accId) { return [SELECT Id, Name ,Email, Phone, Account.Name from Contact where AccountId = :accId]; } } |
Now update the RecordIdExample.html markup code as shown below
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div class="boarder"> <template if:true={contacts.data}> <ui> <template for:each={contacts.data} for:item="contact"> <li key={contact.Id}>{contact.Name}</li> </template> </ui> </template> </div> </template> |
Now update the RecordIdExample.js controller as shown below. Now in this JavaScript controller, we are passing the current record id to apex controller and will get the data.
|
1 2 3 4 5 6 7 8 |
import { LightningElement,api,wire,track } from 'lwc'; import getContacts from '@salesforce/apex/ContactData.getContacts'; export default class RecordIdExample extends LightningElement { @api recordId; @wire(getContacts, {accId:'$recordId' }) contacts; } |
If you add the above component to the account record page, you can able to see the list of contacts related to the account as shown below.
