[SalesForce] How to override standard buttons with a custom Lightning page

I have created a Lightning page using the Lightning App Builder with a type Record Page. It's purpose is to provide a custom experience for creating and editing a custom object. I would like to use this page as the default for the new and edit actions in the object's list but haven't found a way.

For VisualForce pages, overriding the action is straightforward. I can navigate to the object in Object Manager. In the Buttons, Links, and Action section, I can override the New and Edit actions with a custom VisualForce page.

How do I do this for a Lightning page?

Best Answer

After a day of searching, I wasn't able to come up with an easy answer, so I implemented a work-around. I wrapped my Lightning component in a VisualForce page and overrode the content source for the New and Edit actions to use the new host page. Using Lightning within a VisualForce page takes some work. See the link below to get started.

Use Lightning Components in Visualforce Pages

Here's the code I wrote to get things working. One issue I'm still researching is getting the force:* events (ex: force:showToast and force:navigateToObjectHome) to fire correctly. I added them as a dependency with no luck.

Host.page

<apex:page standardcontroller="CallReport__c">
    <!-- This page is a host page for the call report lightning component. -->
    <apex:includeLightning />

    <div class="slds">
        <div class="slds-grid slds-grid--align-center slds-p-around--small">
            <div class="slds-large-size--3-of-12"></div>

            <div class="slds-size--1-of-1 slds-large-size--6-of-12">
                <div id="callReport"></div>         
            </div>

            <div class="slds-large-size--3-of-12"></div>
        </div>
    </div>

    <script>
        var recordId = '{!callreport__c.id}';

        // c:callReport implements force:hasRecordId and requires the call report ID
        $Lightning.use("c:DepApp", function() {
          $Lightning.createComponent('c:callReport',
              { recordId : recordId },
              'callReport',
              function(cmp) {
                // do some stuff
              });
        });
    </script>
</apex:page>

DepApp.app

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:callReport"/>
    <aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>
Related Topic