0

I'm trying to load lightning component from visualforce page. The component works fine if added to the case detail pagelayout. But I'm getting below error when loaded from vf page(This page is included on case detail page). Below is my code

Error: **

Uncaught (in promise)
[c:overlaylibrary] > [lightning:overlayLibrary] > [lightning:overlayLibrary]", action: null, name: "TypeError", message:

"Error in $A.getCallback() [Cannot read property 'setParams' of undefined]", …}

message: "Error in $A.getCallback() [Cannot read property 'setParams' of undefined]"
name: "TypeError"

**

overlaylibraryApp:

<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:overlaylibrary" type="COMPONENT"/>
    <aura:dependency resource="markup://force:navigateToMyComponent" type="EVENT"/> 
</aura:application>

overlaylibrary.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="isEditBtnClicked" type="Boolean" default="false" />
    <aura:attribute name="isCancelBtnClicked" type="Boolean" default="true" />
    <!--<aura:if isTrue="{!v.isEditBtnClicked}">-->
        <lightning:overlayLibrary aura:id="overlayLib"/>
 <!-- </aura:if>-->
    <aura:handler name='init' action="{!c.init}" value="{!this}" />
</aura:component>

overlaylibraryController.js

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

})

LoadingRecord.cmp:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction"
                access="global" >
    <iframe src="{!'VFpageURL'}" frameborder="0" border="0" style="overflow:hidden;height:100%;width:100%;" height="100%" width="100%"/>

</aura:component>
1

lightning:notificationsLibrary is not supported in Lightning Out (e.g. in a Visualforce page). Please review the documentation for this component. You'll need to use an alternative component to display modals in Visualforce, such as an open-source modal component.

4
  • thanks for your response. Documentation you've shared is blank.
    – Ravi Teja
    May 11 '20 at 20:34
  • @RaviTeja Copy-paste error, it should work now.
    – sfdcfox
    May 11 '20 at 20:37
  • If I don't use lightning:notificationsLibrary or lightning:overlayLibrary to show the modal I'm seeing the popup only inside the visualforce page which is added to the case detail page. But what I'm expecting is to show the modal in center of the detail page with fade-in container to fit the entire screen.
    – Ravi Teja
    May 11 '20 at 22:41
  • @RaviTeja Correct. That's a limitation of using VF in a page. You can't "pop out" to the main window. And the library components don't work in Visualforce. If this is for Classic, you'll need to use a full page Visualforce page, not just embedded in a page layout. If you're using Lightning, use an Aura component directly.
    – sfdcfox
    May 11 '20 at 23:13

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.