Visualforce in Lightning

Automatic Lightning Styles for Visualforce

Visualforce has enabled the very rapid development of custom-coded functionality that blends in seamlessly with native functionality in Salesforce Classic. Particularly, standard Visualforce components encapsulate the styling and functionality of many different standard Salesforce user interface elements. They range from fine to coarse grained (see Steven Herod’s excellent visual reference).  The introduction of the Lightning Experience presented a problem of how to get existing pages to fit into the look and functionality of the Lightning Experience.

Lightning Experience caused a fitting in problem

One major benefit to sticking with standard Visualforce components was the idea that by doing so you would expect any future functionality or visual changes in standard Salesforce to be automatically incorporated. For example, if the look of a standard page block section was altered slightly, your apex:pageBlockSection would automatically change. Also, most of the cost/time savings of developing on the platform would go out the door if someone were to build their own components from scratch as opposed to using standard. With the introduction of the Lightning Experience, all of a sudden those standard Visualforce components no longer matched the user interface when using the Lightning Experience. Developers were dismayed, because they had played by the rules investing in using standard components and were left with pages that did not work or did not fit in to the new user interface. Ironically, those who custom coded and custom styled, not making use of standard components, likely had little or nothing do to get their pages to fit in to the Lightning Experience.

The Ideal

There have been different approaches taken to address the problem of making standard Visualforce component pages fit into the Lightning Experience. Even so, apps still had the problem of needing to support Lightning Experience and Classic. The ideal solution for developers would have been for the Visualforce standard components to automatically take on the look and functionality of the Lightning Experience when in the Lightning Experience or Classic when in Classic. After all, components abstract the look and functionality, so in theory, changes could be made to the implementations that would be transparent to pages using the components.

A Solution

This problem is being addressed with the introduction of a feature in the Winter ’18 release to automatically style existing Visualforce pages with Lightning Experience stylesheets. It is still in beta so there is some work, but this will aide greatly in making transitioning to Lightning cost effective.

A Test Page

I wrote a quick test page in a Winter ’18 org that uses an apex:pageBlock, and apex:inputFields of text, lookup, and select list.

Visualforce in Classic
Visualforce Page in Classic
Visualforce page in Lightning Experience
Same Visualforce page in Lightning Experience

The page attribute lightningStylesheets can be set to true or false to determine if Lightning Experience styles should be used or not. One interesting thing to note about it is that it can be set conditionally. In the example page code it is done so by using a global Visualforce variable $User.UIThemeDisplayed, so that if the user is in the Lightning Experience it will evaluate to true and to false, otherwise. The same exact code rendered both pages.

Final Thoughts

As I wrote in a previous post, for a variety of reasons, with the Winter ’18 release, it is time for holdouts to make, or at least re-evaluate and plan, switching to the Lightning Experience. This feature of automatic styling for Visualforce pages may be the single most important feature to influence companies with larger investments in Visualforce to make the transition as it can become cheaper for them to do so.

14 thoughts on “Automatic Lightning Styles for Visualforce

  1. Its a great thing…!! But
    i am getting a error message Error: Unsupported attribute lightningstylesheets in
    i have checked there is not attribute available lightningstylesheets in apex page tag so is there any setting for this attribute .
    please suggest me

  2. I’ve activated the stylesheet and it’s working great. Only problem: Lookup fields still open the search results in Classic. Any suggestions?

  3. Great Work,
    Attribute value is given as Theme4d,is there any other values(themes) for the same attribute with better experience.

Leave a Reply

Your email address will not be published. Required fields are marked *