[SalesForce] Overriding “New” with a lightning aura component: there is a way to make a popup that appear in the object home page

There exist a trailhead on how to Build a Lightning Component to Override a Standard Action. Basically the final result is a lightning component that resemble the standard modal that appears when the button "New" is clicked but with a different layout.

However, the standard modal appears above the object home page while the modal of the overridingly lightning component appears on a blank page.

There is a way to mimic the standard behaviour?

For comparison, the first image is the standard behaviour, the second one is with the override.

standard
custom

Note how the background is different between these two cases.

Best Answer

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.

Without List

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

With List

Related Topic