Another year filled with sweet memories and joyous times has passed. You have made my year very special, and I wish for you to continue to do so. With you around, every moment is a special occasion for me. I hope you have a great year ahead. May the New year 2017 will bring a lot of love, happiness, well-being and prosperity in your life.
Introducing ‘ Salesforce Lightning Design System ’ Series
Salesforce Lightning Design System is the series where We would share the key practical examples to create your own Lightning page and share the examples to convert your existing Visualforce pages to Lightning page using Lightning Design System.So stay tuned and enjoy our series for Lightning.
Background & Blog Contributors
Dev Shukla and I had worked together on a lightning project for a couple of months and We decided to start a blog series to share our learning and experiments with “Lightning Lovers”.Many thanks to Dev Shukla for his contributor to this blog series.You can connect with Dev at twitter and check more about him here.
Converting Salesforce Classic Visualforce Page To Lightning Experience
Use Case – Your company wants to migrate to Lightning Experience and you having some custom visualforce in classic. So while switching to lightning you have to redesign the visualforce page to look like similar to lightning experience. So you can use the Lightning Design system to design your page to give similar look and feel like lightning experience in Salesforce. If you want to know more about lightning design system then take a look here Introducing Salesforce Lightning Design System
So here first I am going to add a new custom visualforce page here for New Account and later on, I will show you how you can convert your visualforce look and feel similar to lightning. I hope you are very familiar with creating visualforce page in Salesforce. If you are not then there is awesome free app exchange app here so it will provide you complete visualforce page code in just a second. You can create any page using this free app and use that code to add your business more value. Or you can use this Visualforce Generator. Login with your org and then choose any object for which you want to generate the visualforce page.
Let’s play with this app and create an account page.
Account Visualforce Code :
<apex:page standardController="account">
<apex:sectionHeader title="Account Edit" subtitle="{!account.Name}"/>
<apex:form >
<apex:pageBlock title="Account Edit" mode="edit">
<!------------------Button -------------->
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Save & New" action="{!save}" />
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
<!---------------End-------------------->
<!---------------Account Information-------------------->
<apex:pageBlockSection title="Account Information" columns="2">
<apex:inputField value="{!account.OwnerId}" required="false"/>
<apex:inputField value="{!account.Rating}" required="false"/>
<apex:inputField value="{!account.Name}" required="true"/>
<apex:inputField value="{!account.Phone}" required="false"/>
<apex:inputField value="{!account.ParentId}" required="false"/>
<apex:inputField value="{!account.Fax}" required="false"/>
<apex:inputField value="{!account.AccountNumber}" required="false"/>
<apex:inputField value="{!account.Website}" required="false"/>
<apex:inputField value="{!account.Site}" required="false"/>
<apex:inputField value="{!account.TickerSymbol}" required="false"/>
<apex:inputField value="{!account.Type}" required="false"/>
<apex:inputField value="{!account.Ownership}" required="false"/>
<apex:inputField value="{!account.Industry}" required="false"/>
<apex:inputField value="{!account.NumberOfEmployees}" required="false"/>
<apex:inputField value="{!account.AnnualRevenue}" required="false"/>
<apex:inputField value="{!account.Sic}" required="false"/>
<apex:inputField value="{!account.No_of_Contacts__c}" required="false"/>
<apex:inputField value="{!account.Source__c}" required="false"/>
<apex:inputField value="{!account.Amount__c}" required="false"/>
<apex:inputField value="{!account.Number_of_Contacts__c}" required="false"/>
<apex:inputField value="{!account.Match_Billing_Address__c}" required="false"/>
<apex:inputField value="{!account.Location__Longitude__s}" required="false"/>
</apex:pageBlockSection>
<!---------------End-------------------->
<!--------------Address Information-------------------->
<apex:pageBlockSection title="Address Information" columns="2">
<apex:inputField value="{!account.BillingStreet}" required="false"/>
<apex:inputField value="{!account.ShippingStreet}" required="false"/>
<apex:inputField value="{!account.BillingCity}" required="false"/>
<apex:inputField value="{!account.ShippingCity}" required="false"/>
<apex:inputField value="{!account.BillingState}" required="false"/>
<apex:inputField value="{!account.ShippingState}" required="false"/>
<apex:inputField value="{!account.BillingPostalCode}" required="false"/>
<apex:inputField value="{!account.ShippingPostalCode}" required="false"/>
<apex:inputField value="{!account.BillingCountry}" required="false"/>
<apex:inputField value="{!account.ShippingCountry}" required="false"/>
</apex:pageBlockSection>
<!---------------End-------------------->
<!---------------Additional Information-------------------->
<apex:pageBlockSection title="Additional Information" columns="2">
<apex:inputField value="{!account.CustomerPriority__c}" required="false"/>
<apex:inputField value="{!account.SLA__c}" required="false"/>
<apex:inputField value="{!account.SLAExpirationDate__c}" required="false"/>
<apex:inputField value="{!account.SLASerialNumber__c}" required="false"/>
<apex:inputField value="{!account.NumberofLocations__c}" required="false"/>
<apex:inputField value="{!account.UpsellOpportunity__c}" required="false"/>
<apex:inputField value="{!account.Active__c}" required="false"/>
</apex:pageBlockSection>
<!---------------End-------------------->
<!---------------Description Information-------------------->
<apex:pageBlockSection title="Description Information" columns="1">
<apex:inputField value="{!account.Description}" required="false"/>
</apex:pageBlockSection>
<!---------------End-------------------->
</apex:pageBlock>
</apex:form>
</apex:page>
Your visualforce User Interface looks like this.
Converting Classic Visualforce page to Lightning Visualforce page
Let’s redesign the Account page into Lightning Account page using Salesforce Lightning Design System’ or in short ‘SLDS’.
GET THE SLDS
Previously it was possible just to download a zip file, but now a custom scope is required in the CSS so you have to generate your own download via the CSS customizer tool. Once you’ve generated the file, upload it to Salesforce as a static resource – I’ve gone with the name SLDS, again if you change this remember to update the references in the sample code.
Good News from Spring 17 you don’t have to upload the Lightning Design System as a static resource, you can keep the syntax of your page simple and stay under the 250-MB static resource limit. To use Lightning Design System stylesheets in your Visualforce page, add anywhere in your page markup.
Create Account Lightning Page
Create a new Visualforce page, making sure to check the box so that your page is available in LEX and change the tag to the following:
standardController="Account" applyHTmlTag="false">
Set the applyHtmlTag attribute is set to false – this gives you control over the,andtags, which is necessary to use the SVG icons in the LDS.One more thing you have to use HTML tags at start and End and HTML start should contain this and set page standardStylesheets should be false. After that, you can write normal apex tags in the page and call style class in visualforce page.
http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink“
Then you can call static resource in your page:
Then I add the Master of the Divs – one Div to rule them all – that wraps all content and specifies the SLDS namespace.
Lightning Visualforce Page:
<apex:page standardController="Account" sidebar="false" standardStylesheets="false" showHeader="false" applyHtmlTag=”false” >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">script>
<script src='js/jquery-sortable.js'>script>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js">script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">script>
</head>
<!-- jquery Date Picker --->
<script type="text/javascript">
$(function(){
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('[id$=myPicker]').datepicker({
minDate: new Date(currentYear, currentMonth, currentDate),
dateFormat: 'dd/mm/yy'
});
});
</script>
<!---- End Of Date Picker --->
<body class="container">
<apex:form >
<apex:pageBlock >
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!----------------Header----------------->
<center>
<br/>
<div class="slds-p-horizontal--small slds-size--1-of-1" style="font-size:24px;">
Create Account
</div>
</center>
<hr/>
<!-------------End------------------>
<!-------ACCOUNT FEILDS------------>
<div class="slds-box slds-box--small slds-theme--shade slds-text-align--left">Account Information</div>
<br/>
<div class="slds-grid">
<div class="slds-col" style="width:90%;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Account Owner</label>
<div class="slds-form-element__control">
{!$User.FirstName} {!$User.LastName}
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Account Name</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Name}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Parent Account</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Parent}" id="hiddId"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Account Number</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.AccountNumber}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Account Site</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Site}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Type</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Type}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Industry</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Industry}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Annual Revenue</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.AnnualRevenue}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Source</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.AccountSource}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Amount</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Amount__c}" styleClass="slds-input"/>
</div>
</div>
<br/>
<br/><br/>
</div>
<div class="slds-col" style="width:90%;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Rating</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.rating}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Phone</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.phone}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Fax</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.fax}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Website</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.website}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Ticker Symbol</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.TickerSymbol}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Ownership</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Ownership}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Employees</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.NumberOfEmployees}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">SIC Code</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Sic}" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Customer Priority</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.CustomerPriority__c}" styleClass="slds-select"/>
</div>
</div>
<br/>
<div class="slds-form-element" id="myPickerWrapper">
<label class="slds-form-element__label" for="text-input-01">SLA Expiration Date</label>
<div class="slds-form-element__control">
<div class="slds-input-has-icon slds-input-has-icon--right">
<a id="myPickerToday" href="#">
<svg aria-hidden="true" class="slds-input__icon input-text-default">
<use xlink:href="{!URLFOR($Resource.SLDS103, 'assets/icons/utility-sprite/svg/symbols.svg#event')}"></use>
</svg>
</a>
<apex:inputField value="{!account.SLAExpirationDate__c}" showDatePicker="false" styleClass="slds-input" id="myPicker"/>
</div>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Active</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.Active__c}" styleClass="slds-select"/>
</div>
</div>
<br/>
</div>
</div>
<div class="slds-box slds-box--small slds-theme--shade slds-text-align--left">Address Information</div>
<br/>
<div class="slds-grid">
<div class="slds-col" style="width:90%;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Shipping Street</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.ShippingStreet}" id="shippingStreet" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Shipping City</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.ShippingCity}" id="shippingCity" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Shipping State/Province</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.ShippingState}" id="shippingState" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Shipping Zip/Postal Code</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.ShippingPostalCode}" id="shippingPostalCode" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Shipping Country</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.ShippingCountry}" id="shippingCountry" styleClass="slds-input"/>
</div>
</div>
</div>
<div class="slds-col" style="width:90%;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Billing Street</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.BillingStreet}" id="billingStreet" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Billing City</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.BillingCity}" id="billingCity" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Billing State/Province</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.BillingState}" id="billingState" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Billing Zip/Postal Code</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.BillingPostalCode}" id="billingPostalCode" styleClass="slds-input"/>
</div>
</div>
<br/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Billing Country</label>
<div class="slds-form-element__control">
<apex:inputField value="{!account.BillingCountry}" id="billingCountry" styleClass="slds-input"/>
</div>
</div>
</div>
</div>
<!----------------End------------>
<!------------Footer----------><br/>
<div class="slds-modal__footer">
<apex:commandButton value="Cancel" styleClass="slds-button slds-button--neutral"/>
<apex:commandButton value="Save & New" styleClass="slds-button slds-button--neutral" />
<apex:commandButton value="Save" action="{!Save}" styleClass="slds-button slds-button--neutral"/>
</div>
<!--------------End----------->
</div>
</apex:pageBlock>
</apex:form>
</body>
</html>
</apex:page>
Wow, Your page is ready now for Lightning. You can preview the page it will look like this.
We would also suggest you go through this awesome Trailhead module here Build a Visualforce App with the Lightning Design System.
What’s Next?
Keep your eyes on upcoming blog entry Part II for more examples to Design your visualforce page utilizing Lightning Design System.
Wait and Watch, more to come…
Pritam Shekhawat 