1

I have an Aura/Lightning based custom object Meeting Note record input page with Apex and JavaScript controllers. It opens correctly as a floating window when I click the Edit button, but when I click the New button it opens full screen. I need it to open as a floating window, just like when Edit is clicked. (like other tabs)

The reason I need this is that I added a Meeting Note lookup on Event. When you open an event you can click in the Meeting Note field, then click "+ New Meeting Note" which appears in the picklist. The user creates a new meeting note, and then when he clicks Save the floating new record input page closes, the event edit page appears from the background, and the newly created meeting note's name should be automatically displayed in the Event's Meeting Note lookup field. For some reason custom object tabs are full screen in Aura when creating a New record, not modal by default.

Properly displayed when Edit button is clicked:

But when New is clicked it is full screen:

2 Answers 2

1

You can use lightning:overlayLibrary.

COMPONENT file:

<aura:component>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
</aura:component>

CONTROLLER js:

({
    handleShowModal: function(component, evt, helper) {
        var modalBody;
        $A.createComponent("c:modalContent", {},
           function(content, status) {
               if (status === "SUCCESS") {
                   modalBody = content;
                   component.find('overlayLib').showCustomModal({
                       header: "Application Confirmation",
                       body: modalBody,
                       showCloseButton: true,
                       cssClass: "mymodal",
                       closeCallback: function() {
                           alert('You closed the alert!');
                       }
                   })
               }
           });
    }
})

in place of modalContent component, you should mention your component name which should be shown as modal.

2
  • Hello, the thing is this is not really a modal dialog, it is just a tab for a custom object. There is no button to display it. I am wondering if I just add role=dialog to the component tag will it work. The first line of the aura page for this custom object's input screen is: <aura:component implements="lightning:hasPageReference,lightning:isUrlAddressable,force:appHostable,force:lightningQuickActionWithoutHeader,lightning:actionOverride,force:hasRecordId,force:hasSObjectName,forceCommunity:availableForAllPageTypes" access="global" controller="GC_InputMeetingNoteInfoController">
    – skycafe
    Sep 1, 2019 at 10:36
  • To clarify, when the Edit button is clicked on the record page, it opens as a floating dialog window as you would expect. But when you click the New button it opens full width. I want it to open as a floating window when you click New. I added screenshots above.
    – skycafe
    Sep 1, 2019 at 11:43
0

It turns out that it is not possible to override the New button with a Lightning component and have it display as a modal window, the way it would for a standard object. (It works for the Edit button which doesn't make sense either.) It is mentioned here: New/Edit Lightning Action Overrides should behave like native new/edit actions Also in the docs for lightning:actionOverride

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .