You need to sign in to do that
Don't have an account?
![Megan D Moody Megan D Moody](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
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?
Your flows use Lightning runtime when someone runs them from:
- A direct link
- A custom button
- 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> .
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
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
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-
I hope it helps!