Override Standard Buttons With Lightning Component – Lightning Experience
Till Spring 16, we do not have ability to override standard buttons with lightning component. ( Ofcourse we have an ability to override standard button with visualforce page and we can embed lightning component. But some of the features are not available in Lightning components created via visualforce pages). Summer 17 upgrade will help us in overriding standard buttons in Lightning.
Follow below steps on how to achieve this. Here we are going to override the standard New button in Account object with a sample custom lightning component.
Step 1: Create Lightning Component And Apex Controller
overrideStandabuttonwithLC.aspx
public with sharing class overrideStandabuttonwithLC { @AuraEnabled public static ID saveAccount(Account accRec){ try{ insert accRec; } catch(Exception e){ system.debug('e-->' + e.getMessage()); } return accRec.Id; } }
Create a component by implementing interface lightning:actionOverride
overrideComponent.cmp
<aura:component implements="lightning:actionOverride" access="global" controller="overrideStandabuttonwithLC"> <aura:attribute name="acc" type="Account" default="{'sobjectType': 'Account', 'Name':'', 'Description':''}" /> <div class="slds-m-around--xx-large"> <div class="slds-form--stacked"> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputText aura:id="accName" label="Name" value="{!v.acc.Name}" class="slds-input"/> <ui:inputText aura:id="accDescription" label="Description" value="{!v.acc.Description}" class="slds-input"/> </div> </div> <div class="slds-m-around--medium"> <button class="slds-button slds-button--brand" onclick="{!c.createAccount}">Save</button> </div> </div> </div> </aura:component>
overrideComponentController.js
({ createAccount : function(component, event, helper) { var action = component.get("c.saveAccount"); action.setParams({ "accRec":component.get("v.acc") }); action.setCallback(this, function(response){ if(response.getState()==='SUCCESS'){ var accId = response.getReturnValue(); var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "type":"Success", "message": "Account created successfully." }); toastEvent.fire(); var navEvt = $A.get("e.force:navigateToSObject"); navEvt.setParams({ "recordId": accId, "slideDevName": "related" }); navEvt.fire(); } }); $A.enqueueAction(action); }, })
Step 2: Override Standard Button With Lightning Component
- Go to Setup >> Object Manager >> Account >> from Buttons, Links and Actions section edit standard button [for this i have override New button]
- Select your Lightning Component Bundle from dropdown.
You can skip record type selection page by check Skip Record Type Selection checkbox when overriding the New or Standard Action.
Hit Save. That’s it 🙂
Let’s check how it works.
- Go to Accounts and click on [New] button and create new account.
( Of course this component can look much better but as it is a demo on actionoverride interface, we just added 2 fields with less styling ).
This table lists the standard actions you can override for an object as the actions are named in Setup, and the resulting action that’s overridden in the three different user experiences.
Override in Setup | Salesforce Classic | Lightning Experience | Saleforce 1 |
---|---|---|---|
Tab | object tab | object home | search |
List | object list | n/a | object home |
View | record view | record home | record home |
Edit | record edit | record edit | record edit |
New | record create | record create | n/a |
Delete | record delete | record delete | record delete |
Resources:
About The contributor:
Brahmaji Tammana
Name: Brahmaji Tammana
Email: [email protected]
Salesforce Associate
Post By Brahmaji :
- Spring 18 Lightning Components Features/Enhancement/Critical Updates – Highlights
- How To Detect a Device In Salesforce Lightning Component ?
- Powerful Lightning Datatable base component – Example Using Fieldset
- How to use design resource in Lightning Component ?
- Use Lightning Data Service – No To Apex Controller In Lightning Components
- Override Standard Buttons With Lightning Component – Lightning Experience
- Custom Record Type Selection Lightning Component with force:createRecord event
- How to Add Lightning Component as a Quick Action in Salesforce
- How to use SVG in Salesforce Lightning Component ?
- Work Fast With Keyboard Shortcuts in Salesforce Lightning Experience
14 comments
When I select “Skip RecordType Selection”,when overriding standard “New” button, it is still showing the record type selection. Any idea what I am doing wrong?
Also I am unable to get recordId when I am trying to create a child record (related list) from the parent record.
I wants to have a lookupfields and picklist fields to save how we can achieve this.
How to override edit for special record type lightning
Record is getting saved without entering any details
This solution doesn’t override new record buttons in lightning lookup fields so you can still create records by clicking New <Some Record> inside a look up field in lightning and the override action won’t get triggered.
Hi
Can we fire an event on loading of lightning component like action in <apex:page>?
I am overriding standard new button to open account edit page.i want to fire force:editrecord event on click of New button.
Can u pls help me
Thanks,
Sindhu
Hi Team,
In the lightning, we want to the control the “Lightning Record” page tab label through the custom label, so is there any way to achieve this in lightning, if possible then how ?
Thanks in advanced !!
Hi Brahmaji, Can you please add code to display overrideComponent in modal popup ?
Can you add a lookup field while creating the record??
They don’t allow some lightning event(Create Record ) to be fire from component when we do override or crate a button to invoke the same lightning component. Is there any solution for this ?
Hi, team
Thanks for sharing this post. Really awesome post. But my question is i want the same look after overriding the button as it is in standard new button.
Like whenever we click on new button it will open a modal pop up, but after overriding the button, it is simply redirecting like pgae or component.
when I am on Contact and click on Account(Lookup) and click ” + New Account ” then it opens the standard account layout
How can override this button so that the custom component opens to create new account
Hello Brahmaji,
Thanks for the post. We have a special case including the record type. if i select a customer records we want to show this custom layout
and for partner record we want to use the standard layout. do you have any suggestions how we can do that. we are using force-di to inject the record type in aura component but results are not quite satisfactory highly appreciate your help.