is recordId passed to lwc in a quick action?

Question

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.

Answer 1

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.

Even something as simple as a conditional with 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');
    }
}

If the variable is not in the html template, it's not provided to you without extra changes on your part - you can look at the other answer for using CurrentPageReference or use getRecord as shown in lwc-recipes and Create Screen Quick Actions

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })

---

2. 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);
  }
}

Answer 2

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

Answer 3

Just adding on top of what Nisar has mentioned

For recordId it should be : currentPageReference.attributes.recordId

For recordName it should be : currentPageReference.state.recordName