How to Style Existing Visualforce Pages with Lightning Experience Stylesheets ??

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.

Click to See
  • analytics:reportChart
  • apex:actionFunction
  • apex:actionPoller
  • apex:actionRegion
  • apex:actionStatus
  • apex:actionSupport
  • apex:areaSeries
  • apex:attribute
  • apex:axis
  • apex:barSeries
  • apex:canvasApp
  • apex:chart
  • apex:chartLabel
  • apex:chartTips
  • apex:column
  • apex:commandButton
  • apex:commandLink
  • apex:component
  • apex:componentBody
  • apex:composition
  • apex:dataList
  • apex:dataTable
  • apex:define
  • apex:detail
  • apex:dynamicComponent
  • apex:enhancedList
  • apex:facet
  • apex:flash
  • apex:form
  • apex:gaugeSeries
  • apex:iframe
  • apex:image
  • apex:include
  • apex:includeLightning
  • apex:includeScript
  • apex:inlineEditSupport
  • apex:input
  • apex:inputCheckbox
  • apex:inputField
  • apex:inputFile
  • apex:inputHidden
  • apex:inputSecret
  • apex:inputText
  • apex:inputTextArea
  • apex:insert
  • apex:legend
  • apex:lineSeries
  • apex:listViews
  • apex:map
  • apex:mapMarker
  • apex:message
  • apex:messages
  • apex:outputField
  • apex:outputLabel
  • apex:outputLink
  • apex:outputPanel
  • apex:outputText
  • apex:page
  • apex:pageBlock
  • apex:pageBlockButtons
  • apex:pageBlockSection
  • apex:pageBlockSectionItem
  • apex:pageBlockTable
  • apex:pageMessage
  • apex:pageMessages
  • apex:panelBar
  • apex:panelBarItem
  • apex:panelGrid
  • apex:panelGroup
  • apex:param
  • apex:pieSeries
  • apex:radarSeries
  • apex:relatedList
  • apex:remoteObjectField
  • apex:remoteObjectModel
  • apex:remoteObjects
  • apex:repeat
  • apex:scatterSeries
  • apex:scontrol
  • apex:sectionHeader
  • apex:selectCheckboxes
  • apex:selectList
  • apex:selectOption
  • apex:selectOptions
  • apex:selectRadio
  • apex:stylesheet
  • apex:tab
  • apex:tabPanel
  • apex:toolbar
  • apex:toolbarGroup
  • apex:variable
  • chatter:feed
  • chatter:feedWithFollowers
  • chatter:follow
  • chatter:newsFeed
  • flow:interview
  • site:googleAnalyticsTracking
  • site:previewAsAdmin
  • topics:widget

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.

lightningStylesheets_attr_set_false_example

lightningStylesheets_attr_set_false_example

 

lightningStylesheets_attr_set_true_example

lightningStylesheets_attr_set_true_example

lightningStylesheets_attr_set_false_example_registration_page

lightningStylesheets_attr_set_false_example_registration_page

lightningStylesheets_attr_set_true_example_registration_page

lightningStylesheets_attr_set_true_example_registration_page

lightningStylesheets_attr_set_false_example_login_page

lightningStylesheets_attr_set_false_example_login_page

lightningStylesheets_attr_set_true_example_login_page

lightningStylesheets_attr_set_true_example_login_page

Do you find this post helpful ?

View Results

Loading ... Loading ...

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.

Hope it will help someone in need. #HappyLearning
Posted in Configuration, UI / UX, VisualforcePage.

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of