1

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.

7
  • Are you just trying to hide the div if recordId is null? If yes then just use <div if:true={recordId}>...</div> Jun 15 at 11:27
  • Hi, thanks for the reply. I think you misunderstood my question. I am havving problem with recordId beiing 'undefined' in the connectedCallback context. The div which I mentioned was just a workaround, but not straight forward solution. Jun 15 at 13:59
  • Why do you want the recordId in connectedCallback, what are you trying to do with that? Jun 15 at 14:26
  • The connectedCallback should be called after the recordId is populated. Or do I understand the lifecycle hook incorrectly? I just need to call to apex controller method as soon as recordId is populated. Jun 15 at 15:12
  • No, your understanding is right, the public attributes are set before the connected callback is called. But here with the quick action that seems to be the exception. Why don't you use the @wire to call apex and pass recordId to that, it will get called as soon as the record Id value is populated. Jun 15 at 15:26
1

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.

0

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

enter image description here

4
  • Hi, thank you for the detailed response. 1) I have somehow managed to write the wrong version here, but the issue persists even with the correct version, but thanks for correcting me! 2) Before I posted this question I tried to find all ways how to achieve this and I have also tried adding the lightning__RecordPage target as you suggest. The code works and obtains recordId correctly even without it! Try for yourself the code you provided without the lightning__RecordPage target :) but also good note, thanks Jun 25 at 7:32
  • 2b) thank you for clarifying the invoke() method for me. I didn't know that it's not supposed to work in the ScreenAction scenario. I was following the official tutorial developer.salesforce.com/blogs/2021/05/… . Looks like they have it wrong there. 3) I have opened a ticket with SF support. They have forwarded this to they IT team for verification. It's been 2 weeks but hopefully they will answer soon. Thanks again for nice and detailed answer! Jun 25 at 7:34
  • did you get recordId value in renderCallback() hook as i suggest in 3rd point?
    – sdandamud1
    Jun 25 at 12:26
  • Yes, I did. The renderedCallback context works as expected. I already knew about this workaround. It's described in the last bullet point of my question. But thanks anyway :) Jul 5 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.