[SalesForce] overriding standard buttons with lightning components

This behavior is Working as Designed or rather it is an idea as of now.

Idea Exchange link : https://success.salesforce.com/ideaView?id=0873A0000003RDIQA2

Currently the interface lightning:actionOverrideis intended to enable developers to customize the record detail page entirely. Generally this behavior is observed when you do either of the following.

• Using e.force.createRecord event on component load.

When you try to mock the standard interface using standard events such as e.force.createRecord in the doInit controller of your action override component. You will observe a modal for new record creation rendered in a modal with an empty background.

This empty or blank background is nothing but the component body of your "lightning:actionOverride" component that you have created.

• Using Slds Modal & Modal backdrop

In the example that is provided in the trailhead - https://trailhead.salesforce.com/content/learn/projects/workshop-override-standard-action/override_4

The modal__container & slds-backdrop contains the entire form logic or the visible components hence the background appears to be blank & grayed out.

Alternatives

However if you want to make your override component appear close to a standard action - then you can try doing the following.

• lightning:listView :

Use lightning:listView in the lightning:actionOverride component body , so that it renders a list view in the background and modal on top of it. This would resemble close to the standard action as shown in the image.

Reference : https://developer.salesforce.com/docs/component-library/bundle/lightning:listView/documentation

Component

<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:listView aura:id="listObjects"
                        objectApiName="xyz__TestObject__c"
                        listName="xyz__testlist"
                        rows="5"
                        showSearchBar="true"
                        showActionBar="false"
                        enableInlineEdit="true"
                        showRowLevelActions="false"
                        />
</aura:component>

Controller

({
    doInit : function(component, event, helper) {
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": "xyz__TestObject__c"
        });
        createRecordEvent.fire();
    }
})

Output:

When the lightning:listView is not added to the lightning:actionOverride component's body.

When lightning:listView is added to the body of the lightning:actionOverride component.

By Default, You can override the lightning Interface button with Vf Page and Lightning Component. If you have flow and want to override the button with a flow:-

1. You can create a lightning component where you do call your flow on load.
2. You can create a new custom button on contact record using flow.
3. Or you can create a url button that launches flow