Override Standard Button Using Lightning Web Component (LWC) : Bijay Kumar

Override Standard Button Using Lightning Web Component (LWC)
by: Bijay Kumar
blow post content copied from  SalesForce FAQs
click here to view original post


**Summary of Overriding Standard Buttons in Salesforce Using LWC** In Salesforce, you can customize the actions triggered by standard buttons like New, Edit, and View by overriding them. This allows you to change the fields that appear when these buttons are clicked. Specifically, you can enhance the New button for a custom object, such as Project_c, using a Lightning Web Component (LWC). ### Key Details: 1. **LWC and Aura Components**: Salesforce does not allow direct use of LWCs for overriding standard buttons. Instead, you must create an Aura component that wraps the LWC. This Aura component uses the `lightning:actionOverride` interface. 2. **Creating the LWC**: - Use VS Code to create a new Lightning Web Component that defines a custom form with specific fields. - Example fields include Name, Status, Start Date, and Priority. - Include code for displaying success messages and navigating to the newly created record. 3. **Creating the Aura Component**: - This component calls the LWC and is essential for overriding standard button actions. - It’s embedded with the LWC to make it functional. 4. **Deploying the Components**: - After creating both components, deploy them to the Salesforce org. - Set the Aura component to override the standard New button for the Project_c object. 5. **Final Steps**: - Navigate to Salesforce settings to edit the New button. - Replace the standard action with the Aura component that includes your LWC. ### Conclusion: By following these steps, you can successfully override the standard New button on custom objects in Salesforce, allowing you to display a tailored form instead of the default fields. ### Additional Context: This method is particularly useful for organizations that require specific data entry fields that differ from Salesforce’s standard offerings. Customizing forms can enhance user experience and data accuracy. ### Hashtags for SEO: #Salesforce #LWC #LightningWebComponents #AuraComponents #CustomButtons #SalesforceDevelopment #SalesforceCustomization #SalesforceTutorial #SalesforceAdmin #CRM #TechTips

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>

3. 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'
            }
        });
    }
}

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

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

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

1. Open the IDE integrated with your Salesforce org. and from the folder aura, create a new aura component projectNewFormAura.
2. 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>

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

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

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

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

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.

The post Override Standard Button Using Lightning Web Component (LWC) appeared first on SalesForce FAQs.

April 14, 2025 at 10:01AM
Click here for more details...

=============================
The original post is available in SalesForce FAQs by Bijay Kumar
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================