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>