While migrating to Lightning Experience, this is always the biggest challenge – To customize UI of existing Visualforce pages and make it comparable to lightning pages.Well we all know how bad we were in making visualforce look n feel so far…
So just by adding slds (lightning design system) classes doesn’t helps and it goes beyond that.
Here comes the rescue part by Salesforce – just add a tag in VF page and most of your work done 🙂 🙂
Yes its true, after being in Beta for a year finally its available for our use.
Style Existing Visualforce Pages with Lightning Experience Stylesheets
You can control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce app with the lightningStylesheets attribute. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling (Yeah, thats the magic part 🙂 ).
How to do that then?
Go to your existing VF page (which you want to use in both lightning & classic mode) and set lightningStylesheets=“true” in the <apex:page> tag.
Supported Visualforce Components?
The following Visualforce components support the lightningStylesheets attribute or don’t require styling.
Any Exceptions ??
- Commonly used Visualforce components that don’t require styling, such as <apex:form>, <apex:outputText>, and <apex:param>, are still supported.
- some components differ slightly in style from Lightning Experience. For example, <apex:selectOptions>, <apex:selectRadio>, <apex:inputFile>, and some <apex:inputField> elements use the browser’s default styling instead.
- To include custom SLDS components that aren’t part of the Visualforce component library, use the <apex:slds/> tag with the code and the lightningStylesheets attribute.
- The lightningStylesheets attribute isn’t supported in Communities.
Will it impact custom styling of VF page?
- The lightningStylesheets attribute doesn’t affect custom styling. Custom code must be updated to match the page’s SLDS styling.
Can I switch it off for sometime to revert back to previous UI?
- Yes set it to false, the standardStylesheets attribute for <apex:page> overrides and suppresses lightningStylesheetsin Lightning Experience, Salesforce Classic, and the mobile app.
Here are few examples of Visualforce Pages, before & after adding lightning tag in it.
For any queries, add your questions on Question/Answer page or in comment section. You can also connect to Technical Experts directly with Live Chat.