Usage of lightning:actionOverride

Here we will understand how to override the different salesforce standard action on lightning using lightning component. In order to override any action, your component must implement lightning:actionOverride interface. This interface is a marker interface. A marker interface is a signal to the component’s container to add the interface’s behavior to the component. You don’t need to implement any specific methods or attributes in your component, you simply add the interface name to the component’s implements attribute. The lightning:actionOverride doesn’t add or require any attributes on components that implement it. Components that implement this interface don’t automatically override any action. You need to manually override relevant actions in Setup. However in Lightning Experience, the standard Tab and View actions display as a page, while the standard New and Edit actions display in an overlaid panel. When used as action overrides, Lightning components that implement the lightning:actionOverride interface replace the standard behavior completely. However, overridden actions always display as a page, not as a panel. Your component displays without controls, except for the main Lightning Experience navigation bar. Your component is expected to provide a complete user interface for the action, including navigation or actions beyond the navigation bar.

Overriding the new action 

Here is the sample code to override the new action. the component has implemented the lightning:actionOverride interface and we are using the force:recordData for input form.

<aura:component implements="lightning:actionOverride,force:appHostable,force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome,flexipage:availableForAllPageTypes"> 
    
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="oppRecord" type="Object" />
    <aura:attribute name="recordError" type="String"/>
    
    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.record}"
                      targetFields ="{!v.oppRecord}"
                      mode="EDIT"/>
    
    <lightning:card title="New  Opportunity">
        <lightning:input label="Opprtunity Name" value="{!v.record.Name}"/>
        <lightning:input label="Opprtunity Amount" value="{!v.record.Amount}"/>
        <lightning:input label="Opprtunity Stage" value="{!v.record.StageName}"/>
        <lightning:input label="Opprtunity Type" value="{!v.record.Type}"/>
        <lightning:input label="Opprtunity CloseDate" value="{!v.record.CloseDate}"/>
        <lightning:input label="Account" value="{!v.record.AccountId}"/>
        <br/>
        <lightning:button label="Save Opprtunity" variant="brand" onclick="{!c.handleSaveRecord}" />
    </lightning:card>
</aura:component>
({
    handleSaveRecord: function(component, event, helper) {
        component.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving record, error: ' + 
                           JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));}
})

Now go ahead and override the new action with the above code as shown below

Once you click on the new button it will prompt the new screen as shown below.

Overriding the Edit Action 

Use the below code to override the edit action. In this example we are using force:recordEdit to show the edit form.

<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName" access="global"> 
    <lightning:card title="Opportunity Edit">
        <force:recordEdit aura:id="edit" recordId="{!v.recordId}"/>
        <lightning:button label="update" onclick="{!c.update}"/>   
    </lightning:card>
</aura:component>
({
    update : function(component, event, helper) {
        component.find("edit").get("e.recordSave").fire();
    }
})

Go and override the Edit action with the above code as shown below.
Once you click on the edit button you can able to see the screen as shown below.

 

Overring The View Action 

Use the below code to override the view action. Here I am using the force: recordView form to view the data.

<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName" access="global"> 
    <lightning:card title="Opportunity Details">
        <force:recordView recordId="{!v.recordId}" type="FULL"/>
    </lightning:card>
</aura:component>

Now override the view action as shown below.

Once you are trying to view the record you can able to see the screen as shown below

Overriding the Tab 

Use the below code to override the tab. In this example, i am using the lightning:listView  to get the list of opportunities.

<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName"> 
    <lightning:card title="Opportnity Tab Override by using action override ">
        <lightning:listView aura:id="listViewOpp"
                            objectApiName="Opportunity"
                            listName="AllOpportunities"
                            rows="25"
                            showSearchBar="true"
                            showActionBar="true"
                            enableInlineEdit="true"
                            showRowLevelActions="true"
                            />
    </lightning:card>
</aura:component>

Now override the tab action with the above code as shown below

You can see the opportunity tab now as shown below.