lwc quick action get record id

In this blog post, we see how to get a record id in the Salesforce lightning lwc quick action (Screen Action).

Create a lightning web component lwcQuickAction and add below-mentioned code in the respective files

lwcQuickAction.html

<!-- sldsValidatorIgnore -->

<template>

  <lightning-quick-action-panel header="My action">

    <div>Record Id: {recordId}</div>

    <div class="slds-m-top_medium">

      <lightning-button label="Display record id in the console" variant="neutral" onclick={handeBtnClick}>

      </lightning-button>

    </div>

    <div slot="footer">

      <lightning-button variant="neutral" label="Cancel" onclick={closeAction}></lightning-button>

      <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button>

    </div>

  </lightning-quick-action-panel>

</template>

 

lwcQuickAction.js

import { api, LightningElement } from 'lwc';

import { CloseActionScreenEvent } from 'lightning/actions';

export default class LwcQuickAction extends LightningElement {

    @api recordId;

    handeBtnClick(){

        console.log('Record id is ' + this.recordId);

    }

    closeAction() {

        this.dispatchEvent(new CloseActionScreenEvent());

    }

}

 

lwcQuickAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>54.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordAction</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordAction">

            <actionType>ScreenAction</actionType>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

The variable recordId decorated with @api annotation contains record id within the lightning web component.

Notice we have added recordId in the user interface (.html file), output looks like below

And on click of a button, the record id is displayed in the browser console

If you get any issues or looking for something different, please post them in the comments section below.

In the upcoming article, we see another interesting topic covering lwc quick actions.

Until then…