Convert VF Page to Lightning Experience

Untitled.png

The Lightning Design System is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS.

The Design System bundles four types of resources:

  • The CSS framework
  • Icons – PNG and SVG (both individual and spritemap) versions of the Salesforce action, custom, doctype, standard, and utility icons.
  • Font – 
  • Design Tokens

You can use the Design System across a range of technology stacks:

  • Visualforce pages  but, only HTML markup because the Design System is not yet compatible with <apex> tags, but it might be compatible in the future.
  • Lightning pages and components
  • Mobile apps
  • Standalone web apps

Stylesheet 

We can download the design system from the below link

https://lightningdesignsystem.com/downloads/

Either we can clone it from GitHub or download the zip file. Salesforce also provides a tool for us to create custom-scoped CSS. For your information

https://tools.lightningdesignsystem.com/css-customizer

LDS in Visual Force Page 

To use the stylesheet in VF page

<apex:stylesheet value=”{!URLFOR($Resource.SLDS_Custom, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}” />

Assets includes styles for Visualforce and style which is specially compiled for lightning.

The important points , when using SLDS with Visualforce Pages:

  • All your Design System markup needs to be contained within a  <div class="slds"> as outer wrapper. Ex:- <apex:Slds/>
  • To use the SVG spritemap icons, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to the <html> element (the html tag).
  • Wrap your code in a container:

     
    <div class="slds-scope">...</div>

    Now create a new visualforce page tab and assign your visualforce page to this tab.To create visualforce page tab Goto|SetUp|Tabs|Lightning Page TabsNew | Assign your Lightning Page.

    To style your Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, set lightningStylesheets=“true” in the <apex:page> tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.

    Sample Format

    To get started we need to set up the basic structure of our Visualforce page.

    <apex:page>
    <apex:slds />
    </apex:page>

 

Simply like below

<apex:page showHeader="false" lightningStylesheets=“true”standardStylesheets="false" sidebar="false" docType="html-5.0" applyBodyTag="False" applyHtmlTag="False">

<html>
<head>
<apex:slds />
</head>
<body class="slds-scope">
...Lightning Design System Ready...
</body>
</html>

</apex:page>

 

By Using SLDS we can add specific slds tags to each of the element.

Find Best practices of using SLDS on below link….

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm

Advertisements

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