Get recordId in LWC Quick Action

recordId in LWC Quick action are not directly availabe in connected callback. Generally, We need the record id on load of the lightning page to do something. To overcome this challenge, these two alternative would be helpful:-

Using Getter and Setter
Using CurrentPageReference from navigation module

Lifecycle of LWC in Quick Actions on Lightning Page

Timing of recordId: In a Quick Action, the recordId is usually populated after the connectedCallback is invoked. This is because Quick Actions are processed in a way where the recordId is provided slightly later in the initialization sequence of the LWC.

Let’s create a LWC with name recordLwcButton and use it as Quick Action. Add it on Page layout so that it appears on record page.

recordLwcButton.html

<template>
   <!--This file is empty, 
       we will see the record id in console log to understand the behaviour-->
</template>

recordLwcButton.js

The component uses CurrentPageReference to fetch the recordId early in the lifecycle, thus making it available in connectedCallback. Moreover, the recordId handled through getter and setter methods is used to ensure actions that depend on the recordId are executed after the component is connected to the DOM.

CurrentPageReference: Module to get details about the current page reference.

@wire(CurrentPageReference): Wires the current page reference and assigns the recordId from the page state to wireRecordId.

import { LightningElement, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
export default class RecordLwcButton extends LightningElement {
    wireRecordId; //this will hold the current record id fetched from pagereference
    currectRecordId; //this will hold the current record id fetched from getter and setter

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            console.log('currentPageReference ', currentPageReference);
            //it gets executed before the connected callback and avilable to use
            this.wireRecordId = currentPageReference.state.recordId;
        }
    }

    @api set recordId(value) {
        this.currectRecordId = value;
        console.log('this.currectRecordId ',this.currectRecordId);

        //onload action here where you need current recordid
        //this gets executed post connected callback
    }

    get recordId() {
        return this.currectRecordId;
    }



    connectedCallback() {
        //not available in connected callback
        console.log('currectRecordId ', this.currectRecordId);
        // available in connected callback
        console.log('wireRecordId ', this.wireRecordId);
    }
}

recordLwcButton.js-meta.xml

lightning__RecordPage: This enables the component to add on record pages
lightning__RecordAction:This enables the component to add as quick action on object

API version is 57. You can change to your required version. The component is exposed to use with Lightning App Builder.

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__RecordAction</target>
	</targets>
</LightningComponentBundle>

Deploy your component. And, create the button. Add it on Page layout so that it appears on record page.

recordId in LWC Quick action are not directly availabe in connected callback. Generally, We need the record id on load of the lightning page to do something.

Demo – get recordid in LWC quick action on load of action

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH