function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
wadams2010wadams2010 

Render TWO COLUMN Lightning Flow Runtime in a Visualforce Page

I have been working on rendering a Lightning flow in a visualforce page. Main reason I want to accomplish this is to allow for a redirect to the new record along with a good looking flow for my current Classic users. I have gotten everything buttoned up except for redering the flow in two columns.

This link goes to the info I have gotten to this point. But I still can't find any documentation on how to render the flow with two columns. Is this possible? If so, is there documentation over it? 

Thanks in advance! Code below.  
<aura:application access="global" extends="ltng:outApp">
    <aura:dependency resource="lightning:flow"/>
</aura:application>
  
<apex:page >
    <html>
        
      <head>
         <apex:includeLightning />
      </head>
      <body class="slds-scope">
         <div id="flowContainer"/>
         <script>
          function getQueryVariable(variable)
            {
                   var query = window.location.search.substring(1);
                   var vars = query.split("&");
                   for (var i=0;i<vars.length;i++) {
                           var pair = vars[i].split("=");
                           if(pair[0] == variable){return pair[1];}
                   }
                   return(false);
            };
            var statusChange = function (event) {
               if(event.getParam("status") === "FINISHED") {
                  var outputVariables = event.getParam("outputVariables");
                  var outputVar;
                  for(outputVar in outputVariables) {
                     if(outputVariables[outputVar].name === "VarT_OpportunityId" && outputVariables[outputVar].value != null){
                     window.parent.location = '/' + outputVariables[outputVar].value;
                     }
               		}
                  } 
            };           
			$Lightning.use("c:lightningflow", function() {
               $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
                  "flowContainer",
                  function (component) {
                     var inputVariables = [
                        {
                           name : 'VarT_AccountId',
                           type : 'String',
                           value : getQueryVariable("VarT_AccountId")
                        }
                     ];
                     component.startFlow("Create_Opportunity_Flow", inputVariables);
                  }
               );
            });
         </script>
      </body>
   </html>
</apex:page>