I am trying to create lwc quick action, which was introduced with the Summer 21 release.
I want to use the recordId property from the object that I am on, but the property is 'undefined' in the connectedCallback.
Code to reproduce the problem:
html:
<template></template>
js:
import {api, LightningElement} from 'lwc';
export default class AccountQuickActionTest extends LightningElement {
@api recordId;
// this does not invoke at all
@api invoke() {
console.log('Hello from invoke:', this.recordId);
}
connectedCallback() {
console.log('recordId:', this.recordId); // prints 'recordId: undefined'
}
}
metadata:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Account Quick Action</masterLabel>
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Anyone has idea, how to resolve this?
Similar post: recordId is undefined in LWC quick action component
There is no straight answer. The author suggests obtaining the recordId in the '@api invoke' method, but the @invoke method does not invoke for me, when I click on the action in the record detail.
Another valid solution was to add div tag with 'display:none' and get the recordId in the renderedCallback. This works, but I think that it should be possible to get the recordId in a cleaner way.
<div if:true={recordId}>...</div>
recordId
inconnectedCallback
, what are you trying to do with that?recordId
to that, it will get called as soon as the record Id value is populated.