Create Screen Quick Actions

A screen quick action appears in a modal window. Provide your own markup or use the lightning-quick-action-panel component for a consistent user interface based on Lightning Design System.

To enable your component to be used as a screen quick action, configure a target. See Configure a Component for Quick Actions.

Unlike other Lightning web components on record pages, LWC quick actions don’t pass in recordId through connectedCallback(). To capture recordId when the framework assigns it, declare an @api setter that stores the value in a private field. In your template and JavaScript, reference this._recordId to read the record ID.

1_recordId;
2@api set recordId(value) {
3    this._recordId = value;
4}

Open and Close the Modal Window

A screen quick action opens a Lightning web component in a modal window. To close the modal window programmatically, for example, to create a Cancel button, build UI that dispatches the custom event CloseActionScreenEvent. Import the event from the lightning/actions module.

1import { CloseActionScreenEvent } from "lightning/actions";

The following sections contain complete code samples.

If you build a screen quick action with custom footer buttons, pressing X only closes the modal, there are no hooks to execute additional logic on close. If a screen quick action has logic that executes on Cancel, the logic is bypassed when the panel closes.

Note

Use lightning-quick-action-panel for a Consistent UI

To provide a consistent Salesforce UI, wrap your Lightning web component in a lightning-quick-action-panel component, which provides a header, body, and footer consistent with the modal blueprint in the Salesforce Lightning Design System.

1<template>
2  <lightning-quick-action-panel header="My action">
3    Here's some content for the modal body.
4
5    <div slot="footer">
6      <lightning-button variant="neutral" label="Cancel"></lightning-button>
7      <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button>
8    </div>
9  </lightning-quick-action-panel>
10</template>

Create a Form in the Modal Body

One way to create the modal body is to use the lightning-record-edit-form component with field values populated by lightning-input-field components. The cancel and submit buttons must be nested within the lightning-record-edit-form component, so with this approach the footer slot isn’t needed.

This example creates a form that populates the name and phone fields on the lightning-record-edit-form without a footer. It renders a modal window with a header containing the text Edit Fields Action.

1<template>
2  <lightning-quick-action-panel header="Edit Fields Action">
3    <lightning-record-edit-form
4      record-id={recordId}
5      object-api-name={objectApiName}
6      onsuccess={handleSuccess}>
7      <lightning-input-field field-name="Name"></lightning-input-field>
8      <lightning-input-field field-name="Phone"></lightning-input-field>
9      <lightning-button variant="neutral" label="Cancel"></lightning-button>
10      <lightning-button variant="brand" class="slds-m-left_x-small" label="Save" type="submit">
11      </lightning-button>
12    </lightning-record-edit-form>
13  </lightning-quick-action-panel>
14</template>

When a user clicks the submit button, the handleSuccess event handler is called. The handler closes the modal window using the CloseActionScreenEvent function.

1import { LightningElement, api } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3import { CloseActionScreenEvent } from "lightning/actions";
4
5export default class QuickEditFormExample extends LightningElement {
6  @api recordId;
7  @api objectApiName;
8
9  handleSuccess(e) {
10    // Close the modal window and display a success toast
11    this.dispatchEvent(new CloseActionScreenEvent());
12    this.dispatchEvent(
13      new ShowToastEvent({
14        title: "Success",
15        message: "Record updated!",
16        variant: "success",
17      }),
18    );
19  }
20}

Create a Custom Form with Buttons in the Footer

You can create a form in the modal body using lightning-input and lightning-button components. With this approach, use the lightning-quick-action-panel component’s footer slot to contain the buttons.

This example creates a form for a quick action on a contact record similar to the previous example, and uses buttons in the footer because it doesn’t use a record form component. The field displays the initial values using the getRecord wire adapter.

1<lightning-quick-action-panel header="Quick Contact Edit">
2  <template lwc:if={contact.data}>
3    <lightning-input
4      label="First Name"
5      value={firstname}
6      class="slds-m-bottom_x-small">
7    </lightning-input>
8    <lightning-input
9      label="Last Name"
10      value={lastname}
11      onchange={handleLastNameChange}
12      class="slds-m-bottom_x-small"
13      required>
14    </lightning-input>
15    <lightning-input
16      label="Phone"
17      type="tel"
18      value={phone}
19      class="slds-m-bottom_x-small">
20    </lightning-input>
21  </template>
22  <div slot="footer">
23    <lightning-button variant="neutral" label="Cancel" onclick={handleCancel}></lightning-button>
24    <lightning-button
25      variant="brand"
26      class="slds-m-left_x-small"
27      label="Save"
28      type="submit"
29      onclick={handleSubmit}
30      disabled={disabled}>
31    </lightning-button>
32  </div>
33</lightning-quick-action-panel>

The Save button is disabled if the Last Name field is blank. Clicking the Save button closes the modal window and displays a toast if the save is successful. To save your record changes, call updateRecord(recordInput, clientOptions).

1import { LightningElement, api, wire } from "lwc";
2import { getRecord, getFieldValue } from "lightning/uiRecordApi";
3import { updateRecord } from "lightning/uiRecordApi";
4import { CloseActionScreenEvent } from "lightning/actions";
5import { ShowToastEvent } from "lightning/platformShowToastEvent";
6import FNAME_FIELD from "@salesforce/schema/Contact.FirstName";
7import LNAME_FIELD from "@salesforce/schema/Contact.LastName";
8import PHONE_FIELD from "@salesforce/schema/Contact.Phone";
9
10const FIELDS = [FNAME_FIELD, LNAME_FIELD, PHONE_FIELD];
11
12export default class QuickEditExample extends LightningElement {
13  disabled = false;
14  @api recordId;
15  @api objectApiName;
16
17  @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
18  contact;
19
20  get firstname() {
21    return getFieldValue(this.contact.data, FNAME_FIELD);
22  }
23
24  get lastname() {
25    return getFieldValue(this.contact.data, LNAME_FIELD);
26  }
27
28  get phone() {
29    return getFieldValue(this.contact.data, PHONE_FIELD);
30  }
31
32  handleCancel(event) {
33    // Add your cancel button implementation here
34    this.dispatchEvent(new CloseActionScreenEvent());
35  }
36
37  handleLastNameChange(event) {
38    // Display field-level errors if last name field is empty.
39    if (!event.target.value) {
40      event.target.reportValidity();
41      this.disabled = true;
42    } else {
43      this.disabled = false;
44    }
45  }
46
47  handleSubmit(e) {
48    // Add your updateRecord implementation
49
50    // Close the modal window and display a success toast
51    this.dispatchEvent(new CloseActionScreenEvent());
52    this.dispatchEvent(
53      new ShowToastEvent({
54        title: "Success",
55        message: "Record updated!",
56        variant: "success",
57      }),
58    );
59  }
60}

Get Information about the Page

You can use standard LWC features to get information about the current page, including a page reference from the navigation service, the record ID, and the object API name of the current record.

To return the page reference, import CurrentPageReference from lightning/navigation. See Navigate to Pages, Records, and Lists.

To get the record ID and object API name, expose recordId and objectApiName as properties. See Make a Component Aware of Its Record Context and Make a Component Aware of Its Object Context.

This example displays the record ID and object API name of the current record. It also returns the current page reference, which describes the current page and its state.

1<template>
2  <p>These two fields are auto-populated based on the record context:</p>
3  <p>RecordId: <i>{recordId}</i>, objectApiName: <i>{objectApiName}</i></p>
4  <p>{pageRefString}</p>
5</template>

1import { LightningElement, api, wire } from "lwc";
2import { CurrentPageReference } from "lightning/navigation";
3
4export default class RecordContextAction extends LightningElement {
5  @api recordId;
6  @api objectApiName;
7
8  @wire(CurrentPageReference)
9  pageRef;
10
11  get pageRefString() {
12    return JSON.stringify(this.pageRef);
13  }
14}

See Also

Work with Records Using Base Components