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 🙂

 

Advertisements

One thought on “Automatic style your VF into Lightning Experience – lightningStylesheets

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s