Today we are going to learn about how can we override the ‘Edit’ button of order object by Lightning Web component , i.e standard button given for Edit a record in salesforce .
step 1:- create a LWC component for edit a record
editOrderDetails.html
<template>
<!-- modal start -->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close"
onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small">
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Edit Order Record</h2>
</header>
<!-- modal header end -->
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-card title="Order">
<lightning-record-form
onsuccess={handleSuccess}
object-api-name={objectApiName}
record-id={recordId}
fields={fields}></lightning-record-form>
</lightning-card>
</div>
<!-- modal body end -->
</div>
</section>
<!-- modal end -->
</template>
editOrderDetails.js
import { LightningElement,api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import NAME_FIELD from '@salesforce/schema/Order.Name';
import ACCOUNT_FIELD from '@salesforce/schema/Order.AccountId';
import STARTDATE_FIELD from '@salesforce/schema/Order.EffectiveDate';
import STATUS_FIELD from '@salesforce/schema/Order.Status';
export default class EditOrderDetails extends NavigationMixin(LightningElement) {
// objectApiName is "Order" when this component is called
@api objectApiName;
@api recordId;
// Expose field to make it available in the template
fields = [NAME_FIELD, ACCOUNT_FIELD, STARTDATE_FIELD, STATUS_FIELD];
closeModal() {
// Navigation to Order record
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Order',
actionName: 'view'
},
});
}
handleSuccess(event){
const evt = new ShowToastEvent({
title: 'Message',
message: 'The order '+this.recordId+' has been updated successfully.',
variant: 'success',
});
this.dispatchEvent(evt);
// Navigation to Order record
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: 'Order',
actionName: 'view'
},
});
}
}
editOrderDetails.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
step 2:- Create a Lightning component
Call Lightning web component that created above in this component because in salesforce we can’t override Edit action button with Lightning web component .
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global">
<c:editOrderDetails objectApiName="Order" recordId="{!v.recordId}"/>
</aura:component>
While creating lightning component just put “lightning:actionOverride” in implement section it allow us to override edit standard button.
step 4 :- from object manager tab select order object
Click :- Button links & Action .
Click :- On Edit button .
select your lightning component in lightning component section .
Click :- Now click on save button .
Output :
