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;
}
}
}