override standard button with lightning components

Override Standard Buttons With Lightning Component – Lightning Experience

Admin Configuration, Lightning Component

 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]

override standard button with lightning component sfdcmonkey

 

  • Select your Lightning Component Bundle from dropdown.

override standard button with lightning component sfdcmonkey

 

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.

override standard button with lightning component sfdcmonkey

( 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:

Summer 17 release notes

Lightning Developer guide

About The contributor: 

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.

  • 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 !!

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

Leave a Reply