Override Tab with Lightning Component

 Hi,

Here are we are going to learn about overriding standard object or custom object tab for the following scenario.

Scenario: Invoke an apex method when the Account tab is loaded and then navigate to the Account default list view.

Solution:

Lighning Component: 

AccountOverride.cmp

<aura:component implements="flexipage:availableForAllPageTypes,lightning:actionOverride" access="global">

    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

<div class="spinnerCss" >

      <div class="slds-spinner_container">

        <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">

          <span class="slds-assistive-text">Loading</span>

          <div class="slds-spinner__dot-a"></div>

          <div class="slds-spinner__dot-b"></div>

        </div>

      </div>

</div>

</aura:component>

AccountOverrideController.js:

({    

    init : function(component, event, helper) {  

        var action = component.get("c.sampleMethod");

        action.setCallback(this, function(response){

            var state = response.getState();          

        });

        $A.enqueueAction(action);         

        window.open(`${window.location.origin}/lightning/o/Account/list`,'_top')

    }  

})

AccountOverride.css:

.THIS.spinnerCss{

    position: relative;

    display: inline-block;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 1);

}

Apex Class:

public class AccountTabOverride {

   @AuraEnabled

    public static String sampleMethod() {       

        return 'Thank You';

    }

}

Reference:

https://developer.salesforce.com/docs/component-library/overview/components