0

I am trying to increase the size of the flow by using a visualforce page from a custom button. This is the following code that I am using but I can never get it to actually launch the flow but instead it always get stuck at 'Loading...' and would never launch the flow. Any pointers would really help.

Thanks in advance.

<apex:page standardController="Account" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <style>
                body{ 
                    background-color:#FFFFFF;
                }
                #spinner {
                    font-size: 1.5rem;
                }
            </style>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />            
            <apex:includeLightning />
        </head>
        <body>
            <div id="spinner" style="display:block">
                Loading.............
            </div>            
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope" id="vfcontainer" style="display:none">
                <!-- PRIMARY CONTENT WRAPPER -->
                <!-- RESPONSIVE GRID EXAMPLE -->
                <div class="myapp">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                            <!--<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Left Column</div>-->
                        </div>
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--2-of-4">
                            <div class="slds-box slds-box_x-small slds-m-around--x-small">
                                <div class="slds-grid slds-wrap slds-border_bottom">
                                    <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-1 slds-medium-size--1-of-1">
                                        <div class="slds-text-align_center slds-m-around--x-small slds-text-heading--medium">Screen Title</div>
                                    </div>                                
                                </div>
                                <div id="flowContainer">
                            </div>
                            </div>
                        </div>
                        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                            <!--<div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Right Column</div>-->
                        </div>                        
                    </div>
                </div>
                <!-- / RESPONSIVE GRID EXAMPLE -->
            </div>
            <script>
                var statusChange = function(event) {
                    if (event.getParam("status") === "STARTED") {
                        document.getElementById("spinner").style.display = "none";
                        document.getElementById("vfcontainer").style.display = "block";
                    }
                    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:FlowApp", function() {
                    // Create the flow component and set the onstatuschange attribute
                    $Lightning.createComponent("lightning:flow", {
                            "onstatuschange": statusChange
                        }, "flowContainer",
                        function(component) {
                            // Set the input variables
                            var inputVariables = [{
                                name: "0017Q00000Qs5wFQAR",
                                type: "String",
                                value: '{!JSENCODE($CurrentPage.parameters.Id)}'
                            }];
                            // Start an interview in the flowContainer div, and 
                            // initializes the input variables.
                            component.startFlow("Test_screen_flow_two", inputVariables);
                        }
                    );
                });               
            </script>
        </body>
    </html>
</apex:page>

Lightning App :

<aura:application extends="ltng:outApp">
    <aura:dependency resource="c:FlowComponent" />
</aura:application>

Aura component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <lightning:flow aura:id="flowData"/>
</aura:component>

0

You must log in to answer this question.