Get Record Id in LWC

Hello friends, today we are going to discuss Get Record ID in LWC. In a Lightning Web Component (LWC), retrieving the record ID is essential for various use cases.

Also, check this: Drag and Drop (Swap) Values in LWC

Key Highlights :

1. Define the Component: Create a new Lightning Web Component using the Salesforce CLI or Developer Console.
2. Expose Record Id Property: Use the @api decorator to expose the recordId property in your component. This allows the property to be accessible from the Lightning Platform.
3. Utilize the Record ID: Once the recordId property is exposed, you can access it within your component’s JavaScript file. You can then use it for various purposes, such as querying related data, performing DML operations, or customizing the component’s behavior based on the record.

Code :

getRecordIdExample.html

<!-- getRecordIdExample.html -->
<template>
    <lightning-card title="Record Id Example" icon-name="standard:record">
        <div class="slds-m-around_medium">
            <p>Record Id: {recordId}</p>
        </div>
    </lightning-card>
</template>

getRecordIdExample.js

// getRecordIdExample.js
import { LightningElement, api } from 'lwc';

export default class GetRecordIdExample extends LightningElement {
    @api recordId;

    connectedCallback() {
        console.log('Record Id:', this.recordId);
    }
}

Output :

Reference :

1. LWC