LWC Quick Action - recordId propertyindefined in ConnectedCallback context

Question

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.

Answer 1

This is the most appropriate answer... https://salesforce.stackexchange.com/a/353832/66150

Implement a setter for the Id and add your logic here to be executed as soon as the value is populated by SF internally.

_recordId;

@api set recordId(value) {
    this._recordId = value;

    // do your thing right here with this.recordId / value
}

get recordId() {
    return this._recordId;
}

You cannot use it directly in the connectedCallback.

Answer 2

So according to Salesforce support the component is working as expected (regarding the recordId behavior).

recordId is guaranteed in the connectedCallback() only when you are in specific record context. Even though lightning quick actions are to be used on the record detail pages, the context of the component is not considered as explicit record context and thats why the recordId is not guaranteed in the connectedCallback() function.

Probably best solution how to obtain recordId when the component is opened is to use renderedCallback() and follow the notes in the question's last bullet point.

Answer 3

NOTE: if you want use LWC as quick action summer 21 feature, API version must be 52

1. change apiversion 51 to 52 in your lwc meta file.

2. you miss the recordpage target , in aura force:hasRecordId need to implement to get recordId value, same in lwc you have to use <target>lightning__RecordPage</target> to get recordId. I am able to get recordId using my below code. 3.your using ScreenAction action type, so invoke function doesn't supported , invoke function supported in Action action type only. means headless quick action(html file doesn't required) like auto lunch flow.

3. recordId value is undefined in connectedCallback function. but you can see recordId value in renderCallback function. if you ask me why i also don't have answer 'still exploring'.

lwcqademo.js-meta.xml

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

lwcqademo.html

<template>
<lightning-quick-action-panel title={headerTitle}>     
    <slot name="body">
        {recordId}</slot>
        
</lightning-quick-action-panel>
    
</template>

lwcqademo.js

import {CloseActionScreenEvent} from "lightning/actions";
export default class Lwcqademo extends LightningElement {
    //public properties
    @api recordId;
closeAction(){
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

Answer 4

A workaround, just delay the connectedCallback some ms.

import { LightningElement, api } from 'lwc';
export default class Tester extends LightningElement{
    
@api recordId;

connectedCallback(){
        
      setTimeout(() => {
            alert(this.recordId);
        }, 5);
        
    
 }

}

Answer 5

This can be done by calling LWC component from Aura component.

1. Aura component for Quick action

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<!--Quick Action LWC component -->
<c:lwcComponent recId="{!v.recordId}"/>

</aura:component>

2. LWC Component

export default class lwcComponent extends LightningElement {
    
    @api recId;
    
    connectedCallback() {
        console.log('recordId:', this.recId); 
    }
}