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;
currectRecordId;
@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() {
console.log('currectRecordId ', this.currectRecordId);
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
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;
}
}
}