3

Here is my first Component called Modal:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <lightning:overlayLibrary aura:id="cmp1" />  

    <div class="slds-col slds-size_1-of-1">
        <lightning:button label="Open Modal" title="Open Modal" onclick="{!c.openAnotherComponent}"/>        
    </div>

</aura:component>

Controller for Modal Component looks like this:

({  
    openAnotherComponent: function(component, event, helper) {
        $A.createComponent("c:OpenModal", {},
        function(content, status) {
            if (status === "SUCCESS") {
                component.find('cmp1').showCustomModal({
                    body: content,
                    showCloseButton: false,
                    showCloseButton: true,
                })
            }
        });   
    }
})

My second component which I want to open in a modal pop-up is called OpenModal and here is the code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <lightning:overlayLibrary aura:id="cmp1" /> 

    <p class="headerDiv">
        Welcome to Modal Box
    </p>
</aura:component>

Controller for OpenModal:

({
    myAction : function(component, event, helper) {

    }
})

This code works if Modal component is placed inside a Lightning page. However, if I place it within an app as shown below it errors out.

My App code is as follows:

<aura:application  extends="force:slds">
    <c:Modal/>
</aura:application>

Here is the error I encounter only if called from an app but not from a lightning page:

This page has an error. You might just need to refresh it. [Cannot read property 'ja' of undefined]

2

lightning:overlayLibrary is not supposed to work in standalone Lighting App and thus you are getting that error.

If you refer to the documentation, the Experience section highlights all areas where a component can be utilized. So unless that specifies standalone Lightning App (as is the case with this specific component), that component is not supposed to work there.

Below is a screenshot just for comparison from the documentation to show which component works in which Experience.

For lightning:overlayLibrary, which is not supported in app:

enter image description here

For lightning:accordion, which is supported in app: enter image description here

|improve this answer|||||

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.