I have created a Flow with modal using Aura Component and Visualforce page. I have a lookup input field on the flow to search for an account. However, the "Show All Results for .." option is not working.
When I clicked on it, it shows an error on the browser developer console:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$setParams$') at Object.dispatchGlobalEvent (aura_proddebug.js:56715:44) at eval (deprecatedOverlayUtils.js:32:18) at Object.getAura (auraUtils.js:28:9) at eval (deprecatedOverlayUtils.js:31:21) at eval (platformOverlayUtils.js:324:11) at new Promise () at Object.showCustomOverlay (platformOverlayUtils.js:318:14) at eval (deprecatedOverlayUtils.js:30:37)
And an error on the background page:
This page has an error. You might just need to refresh it. [Cannot read properties of undefined (reading '$setParams$')] Failing descriptor: {markup://lightning:deprecatedOverlayUtils}
I am not very familiar with Aura Component and Visualforce page. How do I resolve this?
Codes:
Flow.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
<aura:attribute name="isOpen" type="Boolean" default="false" access="private"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:if isTrue="{!v.isOpen}">
<div style="height: 640px;">
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container" style="z-index:9990;">
<header class="slds-modal__header slds-modal__header_empty" style="overflow: visible;">
<lightning:buttonIcon iconName="utility:close" class="slds-modal__close" onclick="{!c.closeFlowModal}"/>
</header>
<div class="slds-modal__content slds-p-around_medium" style="overflow: visible;">
<lightning:icon iconName="standard:opportunity" alternativeText="Opportunity" title="Opportunity" /> <strong>Opportunity</strong>
<lightning:flow aura:id="flow" onstatuschange="{!c.closeModalOnFinish}" />
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</aura:if>
</aura:component>
Flow.js
({
doInit : function(component, event, helper) {
component.set('v.isOpen', true);
var flow = component.find('flow');
flow.startFlow('Opportunity_Rapid_Creation');
},
closeFlowModal : function(component, event, helper) {
component.set("v.isOpen", false);
window.history.back();
},
closeModalOnFinish : function(component, event, helper) {
if(event.getParam('status') === "FINISHED") {
component.set("v.isOpen", false);
window.history.back();
}
}
})
Flow.app
<aura:application extends="ltng:outApp">
<aura:dependency resource="c:*" type="COMPONENT"/>
</aura:application>
Flow.vfp
<apex:page standardController="Opportunity" recordSetVar="s" tabStyle="Opportunity">
<apex:includeLightning />
<div id="lightning" />
<script>
$Lightning.use("c:Flow", function() {
$Lightning.createComponent
("c:MyFlow","","lightning",function(cmp) {
});
});
</script>
</apex:page>
UPDATE I have tried to Embed the Flow inside a VF Page and show as List Button:
<apex:page standardController="Opportunity" recordSetVar="s" tabStyle="Opportunity">
<flow:interview name="Opportunity_Rapid_Creation"/>
</apex:page>
but I got this error:
We can’t display component 'flowruntime:lookup', because it isn't supported in Classic runtime. Ask your Salesforce admin to distribute this flow in Lightning runtime instead.
