Override Standard New & Edit Button with Lightning Component

Are you working on a Lightning Component which you want to invoke on Standard Edit and New Button and want to know that from where it is being invoked then you are at the right place.

First of all, create a Lightning component with these interfaces

<aura:component implements="lightning:isUrlAddressable,force:hasRecordId,lightning:actionOverride">
	
</aura:component>

Now go the Button & Action Section for the Object on which you want to override the button with a Lightning Component.

Click on the “New” or “Edit” standard button, and override them with the lightning component you just create.

Lightning Standard Button Override

Excellent, now whenever you click the New button for this Object, it will always show the component and not the standard record Creation form.

If you have Record Types on this object you should consider this option “Skip Record type selection page”, if you mark it true then it will not show the record type selection screen when you click the New button, otherwise it will show record Type Selection screen after the button is clicked and then you custom component.

How to know where the component is invoked from?

Notice that in the Lightning Experience, whenever you click on Edit or New button from any place be it List page, Related List and even Relation Tab in a New Page, the URL that is generated looks something like this.

We are interested in just one Variable in the URL which is inContextOfRef

https://abhimanyud3dx-dev-ed.lightning.force.com/lightning/o/Case/new?navigationLocation=MRU_LIST&saveNewUrl=%2F500%2Fe&nooverride=true&useRecordTypeCheck=true&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX29iamVjdFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJDYXNlIiwiYWN0aW9uTmFtZSI6Imxpc3QifSwic3RhdGUiOnsiZmlsdGVyTmFtZSI6IlJlY2VudCJ9fQ%3D%3D&backgroundContext=%2Flightning%2Fo%2FCase%2Flist%3FfilterName%3DRecent

Salesforce actually sends the base64 Encoded information to the fired component using this variable.

now in order to know what’s in this, you just need to remove the starting ‘1.’ from this variable and decode it in base64.

You can try decoding the string

eyJ0eXBlIjoic3RhbmRhcmRfX29iamVjdFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJDYXNlIiwiYWN0aW9uTmFtZSI6Imxpc3QifSwic3RhdGUiOnsiZmlsdGVyTmFtZSI6IlJlY2VudCJ9fQ

here https://www.base64decode.org/

This is what you will see as the output based upon where you get parameter string.

1. If Clicked on New Button from Tab List

{
   "type":"standard__objectPage",
   "attributes":{
      "objectApiName":"Case",
      "actionName":"list"
   },
   "state":{
      "filterName":"Recent"
   }
}

2. If Clicked on New Button from Related List on Account

{
   "type":"standard__recordPage",
   "attributes":{
      "recordId":"0010K000023YoSPQA0",
      "actionName":"view",
      "objectApiName":"Account"
   },
   "state":{}
}

3. If Clicked on New Button from Related Tab

{
   "type":"standard__recordRelationshipPage",
   "attributes":{
      "recordId":"0010K000023YoSPQA0",
      "relationshipApiName":"Cases",
      "actionName":"view"
   },
   "state":{}
}

To get this data just use the following code snippet.

  1. Add lightning:isUrlAddressable interface along with lightning:actionOverride interface in the Lightning component. Read more about this interface here.

Component

<aura:component implements="lightning:isUrlAddressable,force:hasRecordId,lightning:actionOverride">
	<aura:attribute name="addressData" type="String"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	{!v.addressData}
</aura:component>

Controller.js

({
	doInit : function(component, event, helper) {
		
		var pageRef = component.get("v.pageReference");
		var state = pageRef.state;
		var base64Context = state.inContextOfRef;
		
		if (base64Context.startsWith("1\.")) {
			base64Context = base64Context.substring(2);
		}
		var addressData = JSON.parse(window.atob(base64Context));
		console.log(addressData);
		component.set('v.addressData',JSON.stringify(addressData));   
	}
})

Perfect, now whenever you will click the New or Edit button, it will show the information of its source.

Standard button override component

Was this post useful? If yes then please share.



Leave a Comment

All fields marked with an asterisk (*) are required


shares