Override Standard Button Using Lightning Web Component (LWC)

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.

Table of Contents

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.

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.
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>

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,
                objectApiName: 'Project__c',
                actionName: 'view'
            }
        });
    }
}

After this, enter the code below in the meta.xml file to expose the Lightning web component to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
<targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
</targetConfigs>

Now, deploy the source code to the Salesforce org, and with this, the lighting web component is created. Now we need to create a Lightning page to deploy the lightning web component.

Create a Lightning Action to Deploy the Lightning Web Component

In this example, we are overriding the Create New Record action button with the LWC action that will also create a new record but with the fields that we have defined in the lightning web component.

On the lightning setup page, navigate to Object Manger > object Project_c > Button, Links, and Actions.

In the New action, select the Action type as Lightning Web Component and then select the LWC we created as a record action.

In the Label field, enter the name for the quick action button and click Save.

With this, we have created the Lightning web component as a quick action, and in the next steps, we will override the New button action on the Project_c object.

Create an Aura Component to Call the LWC Quick Action

Now, we will call the LWC quick action in an Aura component and override the standard New button quick action.

Follow the steps below to create the Aura embedded with the lighting web component.

Open the IDE integrated with your Salesforce org. and from the folder aura, create a new aura component projectNewFormAura.
Enter the code below in the .cmp file to embed the LWC component in the Aura component.

<aura:component implements="force:lightningQuickAction, lightning:actionOverride, force:hasRecordId" access="global">
    <c:projectNewForm recordId="{!v.recordId}"/>
</aura:component>

Enter the below code in the cmp-meta.xml file to expose the Aura component to the lightning pages.

<isExposed>true</isExposed>
    <targets>
        target>lightning__RecordPage</target>
  </targets>

After this, deploy the Aura component source code to the Salesforce org.

Overriding the Standard Action button with LWC

Now, to override the standard new button in the custom object Project_c, follow the steps below.

On the setup page on Salesforce, go to the Object Manager tab. In the object manager tab, select the object (Project_c).
Select the Buttons, Links, and Actions, then click on the New button dropdown and select Edit.

Override the new button action in Salesforce using LWC

In the edit window, go to the Lightning Component Override and click on the Lightning Component drop-down. Select the Aura component projectNewFormAura embedded with LWC action.

Override default action in New button usign LWC

At last, click on the Save button to apply the changes.

Now, we will navigate to the object tab and click on the New action button to create a record.

When we click on the New button, the fields we have defined in the lightning web component will be displayed instead of the default new record fields.

Override the Action Button in Lightning web components

This way, we can override the standard or custom buttons in Salesforce using the Lightning Web Component, where we wrap or embed the Lightning Web Component inside the Aura component.

Conclusion

In this Salesforce tutorial, we have learned how to override standard buttons in Salesforce using the Lightning web components. In the above example, by overding the button, we modified the new record form that appears as we click on the New action in the object.

Since Salesforce doesn’t allow us to use LWC for button overrides directly, we used an Aura component to wrap our LWC. Then, we used that Aura component to replace the standard New button on a custom object.

By doing this, we can show our custom form instead of the default Salesforce form by overriding the standard or custom button.