With the Winter 18 release, Salesforce has introduced Lightning Experience Stylesheets (Beta). This enables the visualforce page to be rendered with the look nad feel of lightning experience when viewed in Salesforce1 or in Lightning experience. This can be achieved using the “lightningStylesheets” attribute in the <apex:page> tag. When this attribute is set to true the visualforce page loads with the lightning style sheets in the lightning experience and with the classic look and feel in the classic experience.

Earlier styling an existing page for Lightning Experience involved searching the SLDS reference site for matching components and altering your code. The new attribute gives unstyled Visualforce pages the Lightning Experience looks automatically.

To style the visualforce page to lightning stylesheet use the following in the page markup. This is similar to the extends=”force:slds” for lightning apps.


1 Comment

Preethi Sharma · May 22, 2018 at 3:37 pm

Hallo There,

Interesting piece!Great to see someone write Auto Style Existing Visualforce Pages with Lightning Experience Stylesheets who is not a fanatic or a complete skeptic.

I am working through the Visual Force Basics module and in Use Standard Controllers I am up to this part:

For example, while viewing the object details for Account, you might have noticed that the Account object has a field called Account Owner…

WHERE would I be viewing the object details for Account? Adding a link to that text referencing the page it is referring to would definitely be helpful. And a possibly related question is, are there any API docs that just have all of the objects, methods, and fields listed as a reference?

Anyways great write up, your efforts are much appreciated.

Thank you,
Preethi.

Leave a Reply

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

Related Posts

Apex

Using Salesforce Reports and Dashboards REST API

The Reports and Dashboards REST API gives you programmatic access to your report and dashboard data as defined in the report builder and dashboard builder. The API lets you integrate the data into any web Read more…

Lightning

LockerService for Secure Lightning Components

Lightning LockerService is a security architecture for Lightning components, that enhances security by isolating individual Lightning components in their own namespace. LockerService also promotes best practices that improve the supportability of your code by only Read more…

Lightning

Get Started with Lightning Data Service

Data access in lightning components was a slightly complex task when compared to the visualforce pages. The ‘Standard Controller’ gave an advantage to visualforce over lightning apps/components. Finally, Salesforce introduced the ‘Lightning Data Service’ in the Read more…