Automatic style your VF into Lightning Experience – lightningStylesheets

After winter 18 release, you do not need to put external CSS into your VF page to make lightning ready. You can do this by following only three simple steps, Yes it is 100% right.

Salesforce has released a brand new tag lightningStylesheets which enable automatic style sheets to VF page to run into Lightning Environment.

You can put true or false as the value of the lightningStylesheets tag in apex page.

 

Follow three simple steps to make your VF page as lightning ready

  1. Make sure to check Available for Lightning Experience, Salesforce1, and Lightning Communities checkbox while developing VF page.
  2. Put lightningStylesheets=”true” syntax into page Tag.
  3. Put  tag on the top of the page.

VF page

Here is the code of VF page that I used for testing purpose.

<apex:page standardController=”Opportunity” tabStyle=”Opportunity” lightningStylesheets=”true” >
<apex:slds />
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection columns=”2″>
<apex:inputField value=”{!Opportunity.Name}” />
<apex:inputField value=”{!Opportunity.StageName }” /> <br/>
<apex:inputField value=”{!Opportunity.CloseDate}” />
</apex:pageBlockSection>
<apex:pageBlockButtons location=”bottom”>
<apex:commandButton action=”{!save}” value=”Save”/>
<apex:commandButton action=”{!cancel}” value=”Cancel”/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

You can see the demo image below

20171016_140900 (1).gif

 

Happy reading and coding 🙂