Override Standard Button Using Lightning Web Component (LWC)

Updated on by

In Salesforce, overriding the standard buttons like New, Edit, and View helps us to customize the form that appears as we click on this action button. For example, you want to edit a record and on clicking the Edit button you want the fields other than those available in the standard Edit form.

Let’s learn how to override the standard button using the Lightning Web Component.

Override Standard Button Using Lightning Web Component

In Salesforce quick actions, we cannot directly override the standard ot custom buttons with an LWC component alone. Salesforce only allows Aura components to be used for standard and custom button overrides.

To make an LWC quick action override the button, you need to create an Aura component that implements the lightning:actionOverride interface and then call LWC within that Aura component.

Whether you override a standard or custom action button in Salesforce, the method will be the same as Salesforce requires you to create an Aura component to wrap the LWC and implement the lightning:actionOverride interface.

Create a Lightning Web Component Quick Action

To override the standard button using Lightning Web Component, let’s take an example where we will override the New button for the custom object Project_c. In this, we will replace the standard New button with a custom form built using Lightning Web Component.

Follow the below steps to create a Lightning web component. In this component, we will define the form that opens when we click on the New button.

  1. In the VS code IDE, press the keys ctrl+shift+p to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.
  2. Enter the code below in the HTML file to define the UI of the new record form.

In this HTML template, we have included the object fields Name, Status, Start Date, and Priority. It will replace the fields that appear in the standard new record form.

<template>
    <lightning-card title="Create New Project">
        <div class="slds-p-around_medium">
            <lightning-record-edit-form object-api-name="Product__c"
                                        onsuccess={handleSuccess}>
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Status__c"></lightning-input-field>
                <lightning-input-field field-name="Start_Date__c"></lightning-input-field>
                <lightning-input-field field-name="Priority__c"></lightning-input-field>
                                                                      
                <lightning-button class="slds-m-top_small" type="submit" label="Create" variant="brand"></lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>
  1. After this, enter the below code in the Javascript file to define the logic for displaying the object fields in the new record form and the new button action.

In this, I have also imported the ShowToastEvent to display a success message on record creation and NavigationMixin to navigate to the form that will open on button click.

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class ProjectNewForm extends NavigationMixin(LightningElement) {
    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: "Success",
            message: "Project created successfully!",
            variant: "success"
        });
        this.dispatchEvent(evt);

        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.detail.id,