4

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?

3

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.