Current Record ID in LWC, Aura, and Quick Action

In this post, we will implement the functionality to get the current Record ID in LWC (Lightning Web Component), Lightning Aura Component, and Lightning Quick Action. Let’s hop into the implementation.

Implementation

In this implementation, we will create a Lightning Web Component and Aura Component to get the Current Record ID in LWC and Aura Component. Later, we will create Quick Action using Lightning Web Component and Aura Component to get the current record ID in Lightning Quick Action.

Get Current Record ID in LWC (Lightning Web Component)

To get the current record ID in LWC, we just need to import the api decorator from lwc module. Then, we have to declare the property recordId with @api decorator. That is all. This recordId property will have the record ID of the current record.

currentRecord.html

<template>
    <lightning-card title="Lightning Web Component">
        <div class="slds-p-around_small">
            Current Record ID in Lightning Web Component: <strong>{recordId}</strong> <br/><br/>
        </div>
    </lightning-card>
</template>

currentRecord.js

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

Get Current Record ID in Lightning Aura Component

To get the current record ID in Lightning Aura Component, we need to implement the force:hasRecordId interface. Add flexipage:availableForAllPageTypes interface as well, as we need to include this component on the Record Detail page. Then, we can get the record ID using component.get(‘v.recordId’) in JS Controller or Helper. In component, we can directly access it using {!v.recordId}.

CurrentRecordCmp.cmp

<aura:component implements="force:hasRecordId, flexipage:availableForAllPageTypes">
    
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:card title="Lightning Aura Component">
        <div class="slds-p-around_small">
            Current Record ID in Lightning Aura Component: <strong>{!v.recordId}</strong> <br/><br/>
        </div>
    </lightning:card>
</aura:component>	

CurrentRecordCmpController.js

({
    doInit : function(component, event, helper) {
        var recordId = component.get('v.recordId');
    }
})

Get Current Record ID in Lightning Quick Action

Create Lightning Quick Action using Lightning Aura Component and then follow the same steps we did to get the current record ID in Lightning Aura Component. We don’t have to use flexipage:availableForAllPageTypes as we are not adding this component on the Record Details page. For Quick Action, we need to use force:lightningQuickAction interface.

There is also a way to get the current record ID when we need to use LWC as a Lightning Quick Action. To use the LWC as a Lightning Quick Action, follow below steps:

• Create a Lightning Web Component that will be used as a Quick Action.
• Create an Aura Component which implements force:lightningQuickAction. Basically, we are creating a Quick Action using Aura Component here.
• Then, include the Lightning Web Component into the Aura Component.

This is the workaround to use Lightning Web Component as a Quick Action. You can check the complete implementation here.

Then, get the current record ID in Aura Component (which is used as a Quick Action) just like mentioned earlier, and then pass the record ID to the public property (with api decorator) of Lightning Web Component using child tag.

Consider below example:

CurrentRecordCmp.cmp

<aura:component implements="force:lightningQuickAction, force:hasRecordId, flexipage:availableForAllPageTypes">
    <c:currentRecord recordId="{!v.recordId}"></c:currentRecord>
</aura:component>	

Here, we have included a Lightning Web Component currentRecord in CurrentRecordCmp Aura Component which is used as a Quick Action. And we have also passed the recordId attribute of Aura Component to the public property recordId of LWC using child tag.

And in LWC, we can just include api decorator and create property recordId, which will have the value of the record ID passed from Aura Component.

currentRecord.js

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

currentRecord.html

<template>
    <lightning-card title="Lightning Web Component using Quick Action">
        <div class="slds-p-around_small">
            Current Record ID in Lightning Web Component using Quick Action: <strong>{recordId}</strong> <br/><br/>
        </div>
    </lightning-card>
</template>

That is all! This is how we can get the current user ID in LWC as a Quick Action.

If you don’t want to miss new implementations, you can Subscribe here.

If you want to know more about Quick Action, you can check official Salesforce documentation here. See you in the next post.