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 in connectedCallback(). If you need access to recordId, set the value of recordId in your code.
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.
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.
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.
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.
When a user clicks the submit button, the handleSuccess event handler is called. The handler closes the modal window using the CloseActionScreenEvent function.
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.
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).
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.
See Also