+ Start a Discussion
Haseeb Ahmad 9Haseeb Ahmad 9 

Need help in rendering lightning flow runtime in visualforce page but it is not working

Hello,

I have a flow that has some components that can only run on lightning runtime.

This the original VF I have. 
 
<apex:page controller="EngageDealSupportButtonClass" lightningstylesheets="true">
<apex:includeLightning />
<flow:interview name="pservicerequest" buttonLocation="bottom" finishLocation="/{!$CurrentPage.parameters.opportunityId}">
<apex:param name="opportunityId" value="{!$CurrentPage.parameters.opportunityId}"/>
</flow:interview>
</apex:page>

even I have lightningstylesheets="true" and <apex:includeLightning />

This still did not help so I looked around and found this help article:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_flows_lightningruntime.htm

Hence I created a lightning app by going to the developer console. Here is the code for that:
 
<aura:application access="global" extends="ltng:outApp" >
   <aura:dependency resource="lightning:flow"/>
</aura:application>

Then I went to the visualforce page and added the following code: the flow API name is pservicerequest and Appname is lightflowApp.
 
<apex:page controller="EngageDealSupportButtonClass" lightningstylesheets="true">
    <apex:param name="opportunityId" value="{!$CurrentPage.parameters.opportunityId}"/>
    <html>
        <head>
            <apex:includeLightning />
        </head>
        <body class="slds-scope">
            <div id="flowContainer" />
            <script>
            var statusChange = function (event) {
                if(event.getParam("status") === "FINISHED") {
                    // Control what happens when the interview finishes
                    
                    var outputVariables = event.getParam("outputVariables");
                    var key;
                    for(key in outputVariables) {
                        if(outputVariables[key].name === "myOutput") {
                            // Do something with an output variable
                        }
                    }
                }
            };
            $Lightning.use("c:lightflowApp", function() {
                // Create the flow component and set the onstatuschange attribute
                $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
                                           "flowContainer",
                                           function (component) {
                                               // Set the input variables
                                               
                                               
                                               // Start an interview in the flowContainer div, and 
                                               // initializes the input variables.
                                               component.startFlow("pservicerequest");
                                           }
                                          );
            });
            </script>
        </body>
    </html>
</apex:page>

with that now I can able to run flow in lightning flow runtime but when I click next on the screen it gives me error:
 
An unhandled fault has occurred in this flow
An unhandled fault has occurred while processing the flow. Please contact your system administrator for more information.

​​​​​​​With the Original VF page, I am not getting errors or If I run flow in debug it works very well so the problem must be in this new VF page. 

At this point, I am not sure what else I can do I have been trying to find an answer online but no luck if anyone able to help with this that would be great. thank you. 
AnudeepAnudeep (Salesforce Developers) 
Hi Haseeb, What you have posted is a generic error message that occurs when a flow fails as described here

Were you able to review the email/debug logs (Finest level) to see the detailed error?  Thanks