Render Lightning Runtime for Flows in a Visualforce Page

By default, when you embed a flow in a Visualforce page, the flow renders in Classic runtime. Like its name suggests, Classic runtime looks and feels like regular Visualforce pages and the Salesforce Classic desktop experience. To render a flow in Lightning runtime, add the lightning:flow Aura component to your Visualforce page.

Create a Lightning app that declares a dependency on the lightning:flow component. This app is globally accessible and extends ltng:outApp.
To add the Lightning Components for Visualforce JavaScript library to your Visualforce page, use the <apex:includeLightning/> component.
In the Visualforce page, reference the dependency app by using the syntax $Lightning.use("theNamespace:theAppName”, function() {});
Write a JavaScript function that creates the component on the page by using the syntax $Lightning.createComponent(String type, Object attributes, String domLocator, function callback).

Example

Here’s an example of a Lightning app named lightningOutApp.

1<aura:application access="global" extends="ltng:outApp" >
2    <aura:dependency resource="lightning:flow"/>
3</aura:application>

To render a pre-existing flow called myFlowName in Lightning runtime, add lightningOutApp to the Visualforce page. The $Lightning.createComponent() function creates the component and inserts it into a div element called flowContainer. The component passes in initial values for the flow and handles a change in the flow interview status using the onstatuschange event handler.

1<apex:page >
2    <html>
3        <head>
4            <apex:includeLightning />
5        </head>
6        <body class="slds-scope" >
7            <div id="flowContainer" />
8            <script>
9                var statusChange = function (event) {
10                    if(event.getParam("status") === "FINISHED") {
11                        // Control what happens when the interview finishes
12                        var outputVariables = event.getParam("outputVariables");
13                        var key;
14                        for(key in outputVariables) {
15                            if(outputVariables[key].name === "myOutput") {
16                                // Do something with an output variable
17                            }
18                        }
19                    }
20                };
21                $Lightning.use("c:lightningOutApp", function() {
22                    // Create the flow component and set the onstatuschange attribute
23                    $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
24                        "flowContainer",
25                        function (component) {
26                            // Set the input variables
27                            var inputVariables = [
28                                {
29                                    name : "myInput",
30                                    type : "String",
31                                    value : "Hello, world"
32                                }
33                            ];
34                            // Start an interview in the flowContainer div and
35                            // initialize the input variables
36                            component.startFlow("myFlowName", inputVariables);
37                        }
38                    );
39                });
40            </script>
41        </body>
42    </html>
43</apex:page>

Visualforce Developer Guide

Render Lightning Runtime for Flows in a Visualforce Page

Example

See Also