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
Megan D MoodyMegan D Moody 

Make flow launched via Visualforce display in lightning skin

If I run a flow from within Salesforce using a button, it will display in a lightning skin. However, if I launch that flow via a Visualforce page, it displays with the classic skin. Is there any code I can add to the Visualforce page to make it display in with the lightning skin? 
Megan D MoodyMegan D Moody
Yes, that is checked. It will run with the lightning skin if I launch it from a button. The problem is I need to embed the launching of the flow in a Visualforce page. That overrides the lightning skin. So I'm wondering if changes can be made in the Visualforce page code to force lightning skin. 
Alain CabonAlain Cabon
Your problem is a flow launched from a Visualforce page.

Your flows use Lightning runtime when someone runs them from:
  1. A direct link
  2. A custom button
  3. Setup: the flow list page, flow detail page, and the Cloud Flow Designer
The Visualforce page is not in the previous list for the Lightning skin but you can change the CSS used by your Visualforce page.

The result won't be perfect and perhaps weird. It is moreover difficult to find these CSS classes and custom style from the existing flows in LEX.
You can try <apex:slds/> and "slds-scope" but that won't work directly for your flow without using the classes and styles in a <div> and  <apex:pageBlockButtons> .
  
<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">

<head>
  <apex:slds /> 
</head>

<body class="slds-scope">
  <!-- Your SLDS-styled content -->
</body>

</apex:page>

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

Customize a Flow’s User Interface
After you’ve embedded a flow in a Visualforce page, you can customize what the flow looks like at run time by applying custom styles using CSS. Using a combination of flow attributes and CSS classes, you can customize the individual parts of a flow, such as the button location, button style, background, and the look and feel of the screen labels.

The <div> element containing the flow.
The <apex:pageBlockButtons> element containing the flow navigation buttons.

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

Regards
goravsethgoravseth
With winter18 you can now embed a lightning flow component in a visualforce page, which gets you lightning runtime on a vf page.  you can even get flow output variables without a custom controller.

here is the info on developerforce : https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_flows_lightningruntime.htm?search_text=finish

i found some things didnt quite work as written.  see these two sfse posts and these 2 blog posts for more details

https://salesforce.stackexchange.com/questions/200727/handling-output-variables-from-a-lightning-flow-component-embedded-in-visualforc

https://salesforce.stackexchange.com/questions/200113/unable-to-customize-style-for-flow-text-area-with-lightning-component-on-visualf

http://goravseth.com/chatter-profile-tab-to-update-user-fields

http://goravseth.com/setting-flow-finish-behavior-without-a-custom-controller
Okey Ihekweazu 1Okey Ihekweazu 1
Simply add the attribute lightningStyleSheets="true" to the <apex:page> tag
Hans Post 21Hans Post 21
Okey Ihekweazu 1 has the correct answer.
Brandon HolmesBrandon Holmes
I am attempting to do the same thing - however adding the attribute lightingStyleSheets="true" to the apex:page tag is not making a difference for me. Can anyone provide additional instruction?
Vincent Drader 2Vincent Drader 2
Adding the lightningStyleSheets="true" to the <apex:page> tag worked for me
goravksethgoravkseth
@vincent drader - can you add more details on how you embedded the flow on the vf page where setting stylesheet parameter on the page worked?  I've tried that using the winter18 approach and it doesn't make any difference in how the flow tenders - it renders in a pseudo lightning runtime w some jankyness.
Vincent Drader 2Vincent Drader 2
I will admit there is some jankyness still - it has the "Next" button for the flow at the bottom and at the top of the page. And it also does not render in a pop-up lightning display as I might like it to... but it is styled in a lightning skin, which is all I really wanted from a user experience. I am also keeping in mind that this feature is in beta, and SF is still working out kinks. Also be sure to add the tag (lightningStyleSheets="true") to the very top of the apex:page tab, and that you have no other style tags or CSS that might interfere - just my guess. I admit it's not perfect, but because it's still a beta feature, I don't expect it to be. I also expect I'll have to do some maintainence on it as SF changes things and rolls it out eventually...
Sharad Chandra Maheshwari 1Sharad Chandra Maheshwari 1

Adding the following attiributes to the apex:page tag did the trick for me- rendered the flow in lightning with only a single next button at the bottom.

lightningStyleSheets="true" showHeader="false" applyHtmlTag="false" applyBodyTag="false"


my final code looked like-
<apex:page standardController="Case" tabStyle="Case" lightningStyleSheets="true" showHeader="false" applyHtmlTag="false" applyBodyTag="false">

and this is how the flow rendered in community-

User-added image

I hope it helps!