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.

Lightning Components for Visualforce is based on Lightning Out (Beta), a powerful and flexible feature you can use to embed Aura and Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App.

In other ways, using Lightning Components for Visualforce is identical to using Lightning Out. See Use Components Outside Salesforce with Lightning Out (Beta) in the Lightning Web Components Developer Guide.

Important

Create a Lightning Out app that declares a dependency on the lightning:flow component. This app is globally accessible and extends ltng:outApp.
Your Lightning Out app must exist in the same org as the Visualforce page.
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