How to Set recordId in LWC Quick Action in Salesforce

🔹 Introduction

Lightning Web Components (LWC) can be used as Quick Actions on Salesforce record pages.

A very common question developers ask is: “How do I get the recordId inside an LWC Quick Action?”

This article explains the correct and recommended getter/setter pattern.

🎯 Why You Need recordId

• Sending emails related to the record
• Creating child records
• Fetching existing values
• Executing Apex logic

⚙️ Best Practice: Getter / Setter

While @api recordId; works, using a setter gives you better control.

🧾 JavaScript

import { LightningElement, api } from 'lwc';

export default class SendEmailAction extends LightningElement {
  _recordId;

  @api
  get recordId() {
    return this._recordId;
  }

  set recordId(value) {
    if (value !== this._recordId) {
      this._recordId = value;
      console.log('Record Id received:', this._recordId);
    }
  }
}

📄 Template (HTML)

<template>
  <lightning-quick-action-panel header="My Action">
    Record Id: {recordId}

    <div slot="footer">
      <lightning-button label="Cancel"></lightning-button>
      <lightning-button variant="brand" label="Save"></lightning-button>
    </div>
  </lightning-quick-action-panel>
</template>

🧩 Meta XML

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>65.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__RecordAction</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>ScreenAction</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

🧾 Conclusion

Using a getter/setter ensures your Quick Action initializes immediately with the record context and avoids late execution bugs.