Sunday, 11 May 2025

Get recordId in LWC Quick Action And Redirect on App Page

 

Get recordId in LWC Quick Action And Redirect on App 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. To overcome this challenge, these two alternative would be helpful:-


Create a lwc component name myLWC and use it in Quick Action 

myLWC .js

import { LightningElement, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { CloseActionScreenEvent } from 'lightning/actions';
export default class RecordLwcButton extends LightningElement { wireRecordId; //used to hold the record id fetched from pagereference currectRecordId; //use to hold the record id fetched from getter and setter @wire(CurrentPageReference) getStateParameters(currentPageReference) { if (currentPageReference) { console.log('Inside wire currentPageReference ', currentPageReference); this.wireRecordId = currentPageReference.state.recordId; } } @api set recordId(value) { this.currectRecordId = value; console.log('Inside set currectRecordId ',this.currectRecordId); } 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);
//After that redirect on app page 
        if (this.wireRecordId) {
            console.log('Record ID:', this.wireRecordId);
            const url = `/lightning/n/ContactActionApp?c__recordId=${this.wireRecordId}`;
            window.open(url, '_blank');
           this.dispatchEvent(new CloseActionScreenEvent()); // Close the quick action modal
        }
} }

Create a Lightning App Page for your LWC

  • Go to Lightning App Builder.

  • Create a new App Page

  • Drop your LWC component onto the page.

  • Save and activate it.

Let’s say the app page URL looks like:

/lightning/n/ContactActionApp

Update your LWC to read the recordId from the URL

Use the CurrentPageReference in your LWC JS to get the recordId from the query string.

import { LightningElement, wire } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; export default class ContactActionComponent extends LightningElement { recordId; @wire(CurrentPageReference) getStateParameters(currentPageReference) { if (currentPageReference) { this.recordId = currentPageReference.state?.c__recordId; } } }