function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Vf page in lightning mode


We have developed VF page in SF classic mode but now the requirement is to use this page in lightning mode. How do we do it as i have no idea about lightning mode.

NagendraNagendra (Salesforce Developers) 
Hi Desai,

WINTER-18 Update

new property for VF <apex:page> tag lightningStyleSheets="[false|true]" will supposedly be the single thing you need to do to convert VF pages to SLDS typestyles Previous Comments

Too much for a comment

This is the Template page I use for all VF pages now. It allows me to control the Navigation and add SLDS styling all starting from the same point:
<apex:page name="SLDS_template" showHeader="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

        <apex:includeScript value=""/>

        <apex:insert name="title"/>

        <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

            #loader {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: #000;
                opacity: 0.6;
                filter: alpha(opacity=100);
                z-index: 99999;


            function goHome(){
                ForceUI.isSalesforce1() ?'/home/home.jsp',true) : window.location.href='/';

            function goretURL(){
                ForceUI.isSalesforce1() ?'{!$CurrentPage.parameters.retURL}') : window.location.href='{!$CurrentPage.parameters.retURL}';

            function gotoURL(u, isParent){ //isParent to indicate if Inline VF
                ForceUI.isSalesforce1() ? : (isParent ? = u : window.location.href=u);

            function showPr
Add in your own Error Message div to replace the standard page messages and use code to populate the message and go from there.

My VF pages now start like so:
<apex:page id="THEID" showHeader="false" sidebar="true"
           standardController="Account" extensions="EXTENSION" tabStyle="Account"
           standardStylesheets="false" applyHtmlTag="false"
           applyBodyTag="false" docType="html-5.0" cache="false">

    <html xmlns="" xmlns:xlink="">

    <apex:composition template="SLDS_Template">
        <apex:define name="title">

        <apex:define name="body">



For more information please check below link. Hope this helps.

Kindly mark this as solved if the information was helpful.


Hi Nagendra,

I have a similar issue going on, it would be great if you could help with this!

We have a VF page page for the Account page layout. Since we are in th process of migrating to lightning, I was succesfully able to add the  lightningstylehseets="true" to the vf page and change the UI to look like a lightning page. But I have a couple of broken links in the page. One of them is the 'Go to List' in the Activity History related list.

Here is the code for the related list on the vf page

 <div data-dojo-type="dijit/layout/ContentPane" id="tabActivityHistoryPA" title="Activity History">
                <apex:relatedList list="ActivityHistories" />

When the user clicks on 'Go to list' in Classic, it takes them to the list view of all the activities, but in in lightning it shows the following error message. Is there any workaround for this ? Please suggest

User-added image

User-added image

The Go to list link works perfectly fine in Lightning for all the related lists except Activity History & Notes&Attachments.