Use quick actions to invoke a custom Lightning web component on a record page. First, configure a component for quick action and then add it to a record page by adding it to your page layout. A headless quick action doesn’t open a modal window, but a screen quick action does.
To create a component for a headless quick action, create an empty template for your component and use the [NavigationMixin.Navigate](pageReference, [replace]) function.
The lwc-recipes repo has a navigateToRecordHeadlessAction component example that uses a headless quick action to navigate to a contact create page.
Tip
In this example, clicking the quick action button on a record page opens a modal window that displays the contact create page.
1// navigateToRecordHeadlessAction.js
2import { LightningElement, api } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavigateToRecordHeadlessAction extends NavigationMixin(LightningElement) {
6 @api invoke() {
7 this[NavigationMixin.Navigate]({
8 type: "standard__objectPage",
9 attributes: {
10 objectApiName: "Contact",
11 actionName: "new",
12 },
13 });
14 }
15}By default, replace is false. When the modal window opens, the URL changes. So you can use the browser’s Back button to return to the record page that you previously opened. Similarly, if you use the lookup field to open another modal window, such as to create a new record via the Account Name field, the URL changes again when the New Account modal is displayed.
If replace is true, the pageReference replaces the existing entry in the browser history. When you are on the modal window that’s defined by pageReference, clicking the Back button on the browser returns you to the page you visited before the record page that contains the quick action button.
1this[NavigationMixin.Navigate](
2 {
3 type: "standard__objectPage",
4 attributes: {
5 objectApiName: "Contact",
6 actionName: "new",
7 },
8 },
9 true,
10);Let’s say you have a screen quick action that displays a modal, and that modal uses the [NavigationMixin.Navigate](pageReference, [replace]) function to display another modal with the specific pageReference, such as a record create page.
By default, replace is false and the previous modal isn’t closed automatically. In this case, the newer modal overlays and stacks on the previous modal.
For example, if your component navigates to a record create page, the modal that contains your component remains open but inactive while another modal overlays it with the record create page. When you dismiss the new modal with the record create page, the previous modal that contains your component becomes active again.
To automatically close the previous modal when navigating, set replace to true.
This screenQuickAction example shows a screen quick action that contains a button. The button navigates to a contact create page.
1<!-- screenQuickAction.html -->
2<template>
3 <lightning-quick-action-panel header="Quick action">
4 <lightning-button onclick={navToRecord} label="Create Contact"></lightning-button>
5 <!-- Standard footer with cancel/save buttons -->
6 <div slot="footer">
7 <lightning-button
8 variant="neutral"
9 label="Cancel"
10 onclick={handleCancel}
11 ></lightning-button>
12 <lightning-button
13 variant="brand"
14 label="Save"
15 onclick={handleSave}
16 ></lightning-button>
17 </div>
18 </lightning-quick-action-panel>
19</template>By default, replace is false. So when you click the button to navigate to the contact create page, your screenQuickAction modal remains open and inactive while the contact create modal overlays and stacks on it.
1// screenQuickAction.js
2import { LightningElement, api, wire } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4import { CloseActionScreenEvent } from "lightning/actions";
5
6export default class ScreenQuickAction extends NavigationMixin(LightningElement) {
7 navToRecord() {
8 this[NavigationMixin.Navigate]({
9 type: "standard__objectPage",
10 attributes: {
11 objectApiName: "Contact",
12 actionName: "new",
13 },
14 });
15 }
16}When you successfully created a record from the page reference, such as the contact create modal in the previous example, you’re redirected back to the record page that contains your quick action.
If replace is true, opening the page reference via the Create Contact button on the quick action removes the quick action modal. However, opening a new modal via the following methods preserve the previous modal.
LightningModal from the lightning/modal module from the quick action modalWhen you successfully create a record from the page reference, such as from a contact create modal, you’re redirected to the newly created record.
See Also
Release Preview
j