2

I made a lwc to use as a quick action, but despite declaring an @api recordId property, when logging it in connectedCallback, I get undefined. This is the configuration:

<targets>
    <target>lightning__RecordAction</target>
</targets>
 <targetConfigs>
<targetConfig targets="lightning__RecordAction">
  <actionType>ScreenAction</actionType>
</targetConfig>

Is the only way to pass the recordId, wrapping my lwc in an aura component? I thought, as lwc quick actions are only supported in record pages, that the recordId would be passed correctly.

5

I had to test this, but it seems there's two different behaviors for the different actionTypes.

  1. ScreenAction

recordId is undefined in connectedCallback and renderedCallback unless you use it in your html. In that situation, only renderedCallback has the value of recordId. If the variable is not in the html template, it's not provided to you without extra modules (see CurrentPageReference in other answer). Even something as simple as a conditional using the recordId makes it accessible in renderedCallback.

<template>
    <template if:true={recordId}>
        test
    </template>
</template>
import { LightningElement, api } from 'lwc';

export default class Testing extends LightningElement {
    @api recordId;

    connectedCallback() {
        console.log('connected===============');
        console.log(this.recordId + ' is null');
    }

    renderedCallback() {
        console.log('rendered------------');
        console.log(this.recordId + ' is provided');
    }
}
  1. Action

This is a headless action from the quick action (no screen). This has the value provided to it in an invoke call as noted in documentation since there's no rendering going on.

import { LightningElement, api } from "lwc";
 
declare default class HeadlessSimple extends LightningElement {
  @api recordId; 

  @api invoke() {
    console.log(this.recordId);
  }
}
1
  • 1
    Yes, this is exactly it. when I rendered the record Id in my html, it showed, so it is being passed correctly, just a life cycle thing. Thanks for the details! Jun 16 at 14:09
3

Yes, We also get record id from ScreenType action.

HTML:

<template>
<lightning-quick-action-panel header="Confirmation">
    <p class="slds-align_absolute-center">Are you sure to cancel this record?</p>

    <div slot="footer">
        <lightning-button variant="neutral" label="No" onclick={closeModal}>
        </lightning-button>
        &nbsp;
        <lightning-button variant="brand" onclick={handleSubmit} label="Yes">
        </lightning-button>
    </div>
</lightning-quick-action-panel>

Javascript:

import { LightningElement, api, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { CloseActionScreenEvent } from 'lightning/actions';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CancelMoneyReceipt extends LightningElement {

 recordId;

 @wire(CurrentPageReference)
 getStateParameters(currentPageReference) {
     if (currentPageReference) {
         this.recordId = currentPageReference.state.recordId;
     }
 }

 handleSubmit() {
     console.log('RECORD_ID : ', this.recordId);
 }

 closeModal() {
     this.dispatchEvent(new CloseActionScreenEvent());
 }
}

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>
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
   </targetConfigs>

Thank You

3
  • hey! thanks for the answer, did wiring CurrentPageReference your only way to get the id? Jul 29 at 12:45
  • Yes, only like this when our action type is ScreenAction. Jul 31 at 12:59
  • thanks for your post and it really helped me!
    – Nick Kahn
    Nov 8 at 18:34

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.