Create Quick Actions With Lightning Web Components in Salesforce

In Salesforce, we can create a custom quick action to perform tasks like creating records, updating fields, or triggering custom logic directly from a record page. In this Salesforce tutorial, we will learn how to create quick actions with lightning web components in Salesforce.

This Tutorial Covers:

LWC Quick Actions in Salesforce

To create a Quick Action with LWC, we first create an LWC component, then configure it in the meta.xml file by specifying lightning__RecordAction or lightning__GlobalAction as targets, and then add it to a Salesforce page. These actions perform tasks like form submissions, record updates, or any actions that can be called through button actions.

Create Quick Actions With Lightning Web Components

In Salesforce, using the Lightning Web Components, we can create two types of actions.

1. Screen Quick Actions: When triggered, these actions display a custom user interface in a modal window. They are ideal for scenarios where user input is required, such as performing tasks like creating or editing records directly within the model.

2. Headless Quick Actions: These actions execute custom logic without displaying a modal screen. They are triggered by a button click and run the JavaScript code defined in the LWC using the @api invoke() method to define the action. These actions are used for tasks that don’t require user interaction, such as updating a record, navigating to another page, or dispatching an event.

Create Screen Quick Actions Using Lightning Web Components

In the example below, we will create a quick action, “Send Payment Reminder”. This quick action will be added to the Opportunity object record page. When clicked, it will display a screen to confirm sending a payment reminder to the Opportunity’s primary contact via a custom Apex method.

Follow the steps below to create a quick action with Lightning Web Components.

First, create a controller class from which we will fetch the opportunity details for various field values.

public with sharing class PaymentReminderController {
    @AuraEnabled
    public static String sendPaymentReminder(String opportunityId) {
            Opportunity opp = [SELECT Name, Amount, CloseDate, Account.Name 
                              FROM Opportunity 
                              WHERE Id = :opportunityId 
                              LIMIT 1];
            System.debug('Payment reminder sent for Opportunity: ' + opp.Name);
            return 'Payment reminder sent successfully for ' + opp.Name;
        }
    }
}

We will deploy this LWC component as an action, so we kept the limit as one to fetch the current Opportunity record ID.

Create an LWC component and enter the code below in the HTML file.

This will create a modal popup for the “Send Payment Reminder” action and display the opportunity details. In the footer, the Send Reminder button triggers an Apex method for sending the reminder.

<template>
    <lightning-modal-header label="Send Payment Reminder"></lightning-modal-header>
    <lightning-modal-body>
        <template if:true={isLoading}>
            <p>Loading Opportunity details...</p>
        </template>
        <template if:false={isLoading}>
            <template if:true={opportunity}>
                <p>Send a payment reminder for the following Opportunity:</p>
                <lightning-card ti