1

I'm trying to get the popover example from the Salesforce documentation working and it's giving me an interupt error with "Cannot read property 'na' of undefined" message.

All I have done is copy from: https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation

Have I missed something obvious? Thanksenter image description here

App

    <aura:application description="PopoverApp" extends="force:slds" access="GLOBAL" implements="ltng:allowGuestAccess">
    <c:PopoverCmp />
</aura:application>

Component

<aura:component description="PopoverCmp">
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>
    <div class="mypopover" onmouseover="{!c.handleShowPopover}">Popover should display if you hover over here.</div>
</aura:component>

Controller

({
handleShowPopover : function(component, event, helper) {
    component.find('overlayLib').showCustomPopover({
        body: "Popovers are positioned relative to a reference element",
        referenceSelector: ".mypopover",
        cssClass: "popoverclass, cMyCmp"
    }).then(function (overlay) {
        setTimeout(function(){ 
            //close the popover after 3 seconds
            overlay.close(); 
        }, 3000);
    });
}
})

CSS

    .THIS.popoverclass {
    min-height: 100px;
}

.THIS.no-pointer .pointer{
    visibility: hidden;
}
  • How are you calling the component, in aura:application or using component in record page with app builder? – Raul Nov 21 '18 at 17:47
  • Hi Raul, I'm just using a basic app. I can add it to the description ..one second – Jay Nov 21 '18 at 17:49
  • Last time I checked lightning:overlayLibrary was not supported in aura:application – Raul Nov 21 '18 at 17:51
  • Hmm ok thanks. Let me try another way.. thanks for your input – Jay Nov 21 '18 at 18:22
  • Hi Raul, it works when I use it with lightning app builder so I think you're right. Feel free to add it as an answer and I can mark it as correct – Jay Nov 22 '18 at 15:29
2

lightning:overlayLibrary does not work in aura:application.

Use component inside any component in app builder, where it works.

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.