Posted in Lightning, Lightning Experience, Release Notes

Salesforce Summer’17: Top 17 Features of Lightning Experience

Salesforce published Summer’17 release(Preview) notes. If You are a lightning lover like me then In this release, you can find lot’s of new features as well as new enhancements, for example, Field History Tracking, New Setup Tab, Keyboard Shortcut, Updated Activity Timeline, Classic Email template in Lightning.

Admin Checklist Get Ready for Summer 17 Salesforce Admins

Take a look below new features in Summer 17 released for Lightning Experience:

1.Access Field History Related Lists in Lightning Experience

This is great news for all Lightning Lovers. Yes, finally you can track the history in Lightning. I posted this idea here  Track and display the field history for standard or custom objects, regardless of which Salesforce interface you’re using. If you added the History related list to objects in Salesforce Classic, you can now see it in Lightning Experience. You can also set up a field history related list in Lightning Experiences.

If you already added the History related list to your objects in Salesforce Classic, you’re all set. In Lightning Experience, look for your History related list (1) under the Related tab (2).

208_field_history_rl_lex.png

2.Switch More Users to Lightning Experience

When you enable Lightning Experience, it’s important to get your users working in—and benefiting from—the new interface. To help, the Switch Users to Lightning Experience tool now displays all users in your org so you can switch the exact group that you want in one go. The tool also makes it easier to find specific users on the list and to see which users in your org are eligible to switch. This change applies to both Lightning Experience and Salesforce Classic.

  1. The Switch Users to Lightning Experience tool is available from the Lightning Experience Migration Assistant in Setup. In the Migration Assistant, click the Set Up Users tab, then click Switch Users.

    lex_switch_user_wizard

Search the user list to find exactly the user you want (1). See at a glance which users have permission to access Lightning Experience and are eligible to switch (2), which users have already switched (3), and which users can’t be switched because they don’t have the Lightning Experience User permission (4).To switch users to Lightning Experience, click the button next to their names.

Unlike before, you can’t use this tool to switch users back to Salesforce Classic. But users can switch themselves back as needed, using the Switcher in their profile menus.

3.Make Lightning Experience the Only Experience

Ready to move from Salesforce Classic to Lightning Experience without looking back? Just hide the option to switch to Salesforce Classic from your Lightning Experience users so that they stay in Lightning Experience. This feature is new in both Lightning Experience and Salesforce Classic.

By default, when you enable Lightning Experience, your users get the Switcher, allowing them to switch back and forth between Lightning Experience and Salesforce Classic. But if you want some or all of your users to stick to Lightning Experience, you can remove the Switcher (1) .

Hide option to switch to Salesforce Classic

In Setup, enable the Hide Option to Switch to Salesforce Classic permission (2) in profiles and permission set.When you enable the permission for your Lightning Experience users, new and existing users see Lightning Experience the next time they log into Salesforce. And, they no longer see the Switch to Salesforce Classic link.

rn_lex_hide_switcher_perm

4. Ditch Your Mouse—Keyboard Shortcuts Are Here

You can now use keyboard shortcuts to maximize your efficiency and speed while working in Lightning Experience. You can search for, edit, save, and close a record—all without touching a mouse. So start planning what you want to do with all the time you’re going to save! By default, keyboard shortcuts work in all Lightning apps. This change applies to Lightning Experience only.

To view the available keyboard shortcuts, press:

  • Windows: Ctrl+/
  • macOS: Cmd+/

Screen shot of the available keyboard shortcuts for standard navigation apps.

For Lighting apps with console navigation, extra shortcuts are available to help users navigate tabs, utilities, and more.

5.Get Better Assistance with the Restyled Lightning Experience Migration Assistant

To guide you through the optimal path to enabling Lightning Experience, we’ve given the Migration Assistant an easier-to-use, wizard-style interface. The tools for assessing and previewing your org’s readiness, setting up features and users, and flipping the switch are now visible at a glance—and faster to access. Oh, and it’s also easier to find the Migration Assistant in Setup. This change applies to both Lightning Experience and Salesforce Classic.

Accessing the Migration Assistant in Salesforce Classic is a no-brainer now. From Setup, click Get Started in the Lightning Experience Migration Assistant tile at the top of the menu. (From Setup in Lightning Experience, continue to access the Migration Assistant from the Lightning Experience link.)

Lightning Experience Migration Assistant tile in Salesforce Classic Setup Menu

 The new Migration Assistant is a clean, concise wizard, with tabs that highlight the steps for transitioning to Lightning Experience.

Restyled Lightning Experience Migration Assistant, with highlight around tabs at the top of the page

The interface focuses on specific tasks, one at a time. But you aren’t restricted to going through the tabs in a sequential order. As before, you can use the Migration Assistant to run tools like the Readiness Check and the Preview whenever and as often as needed. Simply click the desired tab to get down to business.

Check Readiness tab in the Lightning Experience Migration Assistant

6. Relate Accounts to Leads Faster with Account Matching

When sales users convert leads, if the lead company name matches any of your accounts, it’s quick and easy to choose one of the matching accounts. This change applies to Lightning Experience only.

Previously in Lightning Experience, if there was a single exact match between the lead company name and an existing account name, the account populated the Account Name field during lead conversion. New account matching brings Lightning Experience in line with Salesforce Classic.

  • Support for person accounts—If the lead contains a company name, we search business accounts. If there is no company name, we search person accounts instead.
  • Enhanced type ahead—Type-ahead search in the Account Name field now searches across all accounts rather than searching only the user’s recently used accounts.
  • Multiple match—When a user clicks the Account Name field during lead conversion, a dropdown menu includes a list of all accounts that match the lead’s company name. If the lead does not have a company name, the list contains matching person accounts.

7.Add Members to Campaigns from Reports in Lightning Experience

Your marketing department can quickly target specific groups of leads, contacts, or person accounts by adding them to campaigns directly from standard and custom reports. This change applies to both Lightning Experience and Salesforce Classic.

Reps can add up to 50,000 returned records to campaigns by clicking Add to Campaign (1).

The Add to Campaign action on reports

To let marketers add members to campaigns from custom reports, the report’s primary object must be Lead or Contact. The custom report type must also include the Full Name field.Previously, Salesforce Classic allowed members to be added to campaigns only from standard reports. The ability to add members to campaigns from custom report types is available in both Salesforce Classic and Lightning Experience.

8.Decide How Path Displays

A path is now closed when the page loads, helping users view more record details without scrolling. You can configure how users display Path. This change applies to Lightning Experience only.

To view or hide a path’s key fields and guidance, users click.Show More

The Show More button with a closed path.

To let your users decide whether a path’s guidance and key fields display automatically when the page loads, from Setup, enter Path Settings in the Quick Find box, then select Path Settings. Then enable Remember User’s Path Preferences.

9.See Opportunity Stage History in Lightning Experience

Review changes to an opportunity’s amount, probability, stage, and close date on the Stage History related list in Lightning Experience. This change applies to Lightning Experience only.

The Opportunity Stage related list on an opportunity.

10.Show Who Reports to Whom from Contact Pages in Lightning Experience

Give your sales team a key tool for planning sales strategy. Use Lightning Contact Hierarchy to visualize the contacts on an account according to what sales reps enter in the Reports To field. Plus, customize contact hierarchy columns to show the information that’s most useful to your sales teams. This feature is new in Lightning Experience.

Give your sales reps access to the hierarchy from contact pages. In Setup, in the Salesforce1 and Lightning Experience Actions section of your contact page layout, add the View Contact Hierarchy action. The Actions menu includes the View Contact Hierarchy action unless you customized the contact page layout before Summer ’17.

contact_hierarchy_action

The hierarchy shows who reports to whom according to the Reports To field. Sales reps can expand or collapse areas as they navigate. They can view up to 2,000 contacts from each point where they enter a hierarchy. To view contacts in a different part of the hierarchy, a sales rep can enter the hierarchy from a different contact.

contact_hierarchy_action

Email Quote PDFs with One Click

In Lightning Experience, reps can now email one or more quote PDFs by clicking Email PDF in the Quote PDFs related list or list view. This change applies to Lightning Experience only.

11. Be More Productive with the Sales Console (Generally Available)

The Lightning Sales Console app is now generally available. Plus, it also benefits from all the great improvements we’ve made to all Lightning console apps, such as person account support, split view navigation, and keyboard shortcuts. These changes apply to Lightning Experience only.

208_sales_cloud_console.png

12.Lightning Voice: New Name, Call List General Availability, and Voicemail Drop

Lightning Voice has a new name and more call list features. Sales reps can also send pre-recorded voicemail messages and dial numbers in reports and dashboards. These changes apply to Lightning Experience only.

Organize Calls with a Call List (Generally Available)

To create a call list, reps can select the people they want to call, and click Add to Call List.

voice_call_list_select
The prioritized list appears in the call panel. In addition to leads, call lists also support accounts, person accounts, and contacts.

voice_call_list_panel
Reps can click Call Next to dial the number at the top of the list and open the related record. Only one call list is available at a time.

Send Prerecorded Voicemail Messages

Save time with custom voicemail messages. Reps can “drop” (or send) prerecorded messages to recipients’ voicemail boxes to focus their time on selling. This change applies to Lightning Experience only. To create a voicemail message, reps can select Voicemail Settings from the call panel or their personal settings.

voice_voicemail_record

13.Use Your Classic Email Templates in Lightning Experience

Leverage all the work and planning that went into your Salesforce Classic email templates by using the same templates in Lightning Experience. You can use your Text, Custom HTML, and Letterhead email templates in Lightning Experience. This change applies to Lightning Experience only.

When you insert an email template, change the filter to Classic Templates.

rn_sales_productivity_email_templates_CEX_in_LEX

14.Stay on Top of Things with the Updated Activity Timeline

Quickly see what each activity is about with easily read summaries. Need the details? Click Expand to see more, without leaving the timeline. Want to drill deeper into your day? Click Expand All to see all the details on all the activities in your timeline. This change applies to Lightning Experience only.
rn_sales_productivity_activity_timeline_annotated
You can expand each activity individually, or expand and collapse the entire list of activities at once. Expanded emails are shown just like they were sent, with paragraphs and line breaks in the same place. You can take actions from within the email summary, too.

rn_sales_productivity_activity_timeline_expanded_email

15.Home: Assistant and Performance Chart Updates

The Assistant has a new look, and the performance chart now has both a weekly and daily view. These changes apply to Lightning Experience only.

See Assistant Updates in a New Way

The Assistant has a slightly different look and feel. Click > to see more details about a specific update. This change applies to Lightning Experience only. Your sales reps can also quickly act on different updates with the new action buttons, such as sending an email or editing an opportunity.

home_assistant_revamp

See Multiple Views of the Performance Chart

The performance chart displays opportunities for the current sales quarter that are closed or open with a probability over 70%. Sales reps can now switch between a weekly and daily view. This change applies to Lightning Experience only.
home_performance_chart_view

16.Add Dashboard Filters in Lightning Experience

Add, edit, or remove filters from your Lightning Experience dashboard directly from the lightning dashboard builder. Filters let people choose different views of a dashboard, so one dashboard does the job of many. Without dashboard filters, you’d have to create multiple dashboards, each with its own set of filtered reports. For example, add a filter on the industry field to track opportunities by industry. This feature is new in Lightning Experience.

rd_dashboards_filter_add

17. Create Report and Dashboard Folders in Lightning Experience

Folders are key to sharing and organizing reports and dashboards. Now you can create them in Lightning Experience. Switch to Salesforce Classic to grant other people access to folders. This feature is new in Lightning Experience.

rd_reports_dashboards_folders_create

There are many more powerful features in Summer’17 Release notes. For complete list of Summer’17, Release Notes click here  

Advertisements
Posted in Lightning Design System, Lightning Experience, Salesforce

Salesforce Lightning View All Activities

Are you working on Lightning experience? Then definitely you are missing the View All Activities button in Lightning.I am a big fan of Salesforce Lightning Experience. However, many community people keep asking me how to get the activities > VIEW ALL functionality they know and love from Classic. I got this blog post idea from Salesforce MVP @David Giller to think about a workaround for View All button in Lightning.

You can promote and upvote this idea here Allow View All Activities on records in Lightning

Collaboration   Salesforce Success Community.png

So I am writing this post to give step by steps solutions for this issue. Follow below steps :

Step 1. First, create an apex controller to get all the activities related to your sObjects. Here I created one solution for all sObjects. Use below apex controller.

public class ShowAllSObjectActivity {
Id sObjectname= ApexPages.currentPage().getParameters().get(‘Id’);

public list<Task> tasklist{get;set;}
public ShowAllSobjectActivity(){

if(sObjectname !=null )
tasklist= [select id,Status,ActivityDate,Subject,Who.Name,What.Name,Description,LastModifiedDate,Owner.Name FROM Task WHERE WhatID=:sObjectname OR whoId=:sObjectname];
}
public PageReference cancel() {
PageReference ldPage = new PageReference(‘/’+sObjectname);
ldPage.setRedirect(true);
return ldPage;
}
}

Step 2. Create visualforce page to display all activities on click on View All button in Lightning Experience. Here I used SLDS(Salesforce Lightning Design System) to design the page similar to lightning experience. So don’t forget to add SLDS in your static resource before creating this page.

<apex:page controller="ShowAllSObjectActivity" sidebar="false" standardStylesheets="false">
	<apex:sectionHeader title="View Activity History"/>
	<apex:form >
		<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.SLDS103, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
			head>
			<div class="slds">
				<div class="slds-grid slds-wrap slds-grid--pull-padded">
					<div class="slds-p-horizontal--small slds-size--1-of-1">
						<center>
							<apex:commandLink action="{!cancel}" value="cancel" styleClass="slds-button slds-button--neutral"/>
						center>
					div>
					<div class="slds-p-horizontal--small slds-size--1-of-1">
						<apex:repeat value="{!tasklist}" var="oSobject">
							<div class="slds-border--top">
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Subjectspan>b>
										<span class="slds-form-element__static">
											<apex:outputText value="{!oSobject.Subject}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Namespan>b>
										<span class="slds-form-element__static">
											<apex:outputText value="{!oSobject.Who.Name}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Related Tospan>b>
										<span class="slds-form-element__static">
											<apex:outputText value="{!oSobject.What.Name}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Due Datespan>b>
										<span class="slds-form-element__static">
											<apex:outputField value="{!oSobject.ActivityDate}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Assigned Tospan>b>
										<span class="slds-form-element__static">
											<apex:outputText value="{!oSobject.Owner.Name}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Last Modified Date/Timespan>b>
										<span class="slds-form-element__static">
											<apex:outputField value="{!oSobject.LastModifiedDate}" />
										span>
									div>
								div>
								<div class="slds-form-element">
									<div class="slds-form-element__control slds-has-divider--bottom">
										<b> <span class="slds-form-element__addon">Commentsspan>b>
										<span class="slds-form-element__static">
											<apex:outputText value="{!oSobject.Description}" />
										span>
									div>
								div>
							div>
							<hr style="background-color:black;"/>
						apex:repeat>
					div>
				div>
			div>
		html>
	apex:form>
apex:page>

Steps 3. Then you are ready to use this custom solution to display all activities in lightning. You can create a custom button to call this visualforce page in lightning. Go to your object where do you want to add this button. Then go to Buttons, Links, and Actions >
Click New > Add New Detail page button and in Content Source use URL and in formula editor paste this

/apex/YourVisualforcePageName?Id={!Sobject.Id}

edit-account-custom-button

You can now create these buttons for All sObjects and use the same Formula /apex/YourVisualforcePageName?Id={!Sobject.Id} and use your object name in place of sObject.

Step 4. In the previous step, you created the View All Button now we have to add that button to page layout in the respective object. Here, for example, I am adding this button to Lead page layout. Follow these steps here

A.  On object detail page click on  Setting Gear Icon on top of the page > Edit Object

Kathy Snyder   Salesforce2.png

B. Go to page layouts.

object-manager-lead-salesforce

C.Click on respective Lead page layout where you want to add View All button.

Lead Layouts.png

D.Click ‘Override the Predefined actions’

Edit Page Layout  Opportunity Layout   Salesforce   Developer Edition   Salesforce.png

E. Drag and Drop ‘View All’ from salesforce 1 Actions and save the page layout and go to Lead record detail page.

Edit Page Layout  Lead Layout   Salesforce   Developer Edition.png

F.Now you can see ‘View All’ button appear in a Lead object.

view-all

Wow, You are ready to view all activities now. Click on “View All” button and it will open a new page and you can view all your activities on the same page similar to classic.

Salesforce   Developer Edition   Salesforce.png

In the same way, we can add this View All button to any objects in Lightning experience. Kindly let me your feedback in comment section below.

lightning

GitHub Repository

You can also download the code from the github repository here.

Posted in Lightning, Lightning Design System, Salesforce

Salesforce Lightning Design System-Part I

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.

148344587327880

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.

account-classic

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>
								&nbsp;
								<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>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<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>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<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.

account-lightning

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…

pjimage.jpg

Posted in Lightning, Lightning Design System, Salesforce

Introducing Salesforce Lightning Design System

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 lightning project for 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.

Introduction To Lightning Design System (SLDS)

SLDS.png

The Salesforce User Experience team has been working hard to bring Enterprise UX into the 21st century, and is proud to present the Lightning Design System. 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. In fact using the new Design System Markup results in pages which have the lightning look and feel without writing any CSS.

Lightning Design System is quite a mouthful, so we’re referring to it here as the “Design System”.

You might have used other similar design systems, such as Twitter Bootstrap or Foundation for building websites. The key benefits of this Design System are:

  • It’s tailored for building Salesforce apps. Using the Design System markup and CSS framework results in UIs that reflect the salesforce Lightning look and feel. The focus on building applications is an important ane to keep in mind. The Design System does not over-enforce defaults such as padding and margins, in contrast to some other frameworks which are focused on building marketing pages. The Design System lets you easily specify the exact layouts you require, whilst conforming to the new Lightning UI.
  • It’s continuously updated.as long as you’re using the latest version of the Design System, your pages are always up to date with Salesforce UI changes.
  • Accessibility is baked into the CSS framework behind the components.
  • The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.

The Design System bundles four types of resources to help you build applications.

  • CSS Framework – Defines the UI components, such as pages headers, labels, and form elements, a grid layout system, and a single-purpose helper classes, to assist with spacing, sizing, and other visual adjustments.
  • Icons – Includes PNG and SVG (both individual and spritemap) versions of our action, custom doctype, standard, and utility icons.
  • Font – Typography is at the core of our product. We’ve designed the new Salesforce Sans font from the ground up to give our product a distinct visual voice and personality, and we’re making it available to you as part of the Design System.
  • Design Tokens – These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.

The Design System is built around the capabilities of modern browsers and has some minimum browser requirements.Modern versions of chrome, Safari, and Firefox are fully tested. For Microsoft Internet Explorer (MSIE), the Design System Supports only version 11 as well as Microsoft Edge. Users of earlier versions of MSIE might encounter issues such as missing icons.

Core Design Principle

The Lightning Experience UI, which the Design represents, was crafted using four core design principles. We encourage you to keep them in mind as you develop your applications.

  • Clarity – Eliminate ambiguity. Enable people to see, understand, and act with confidence. The new UI has reduced clutter so that users can easily find the information they need.
  • Efficiency – Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster. For instance, the new Lightning UI buttons improve the prominence of calls to action.
  • Consistency – Create familiarity and strengthen intuition by applying the same solution to the same problem. For example, the new UI enforces one button style across all contexts.
  • Beauty – Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship. Can a UI ever be beautiful? We think so!

Where you can use the Design System

The new Design System makes it straightforward to build Lightning-compliant salesforce apps across a range of technology stacks.

  • Visualforce pages accessing Salesforce data via remote objects or JavaScript remoting. The Design System is not yet compatible with tags, but watch this space.
  • Lightning pages and components made available to Salesforce1 and Lightning Experience.
  • Mobile apps accessing Salesforce through the Mobile SDK or another API
  • Standalone web apps served by Heroku or a similar platform.

Module Prerequisites

The rest of the module includes some fun hand-on technical work. Before you dive in, review the following prerequisites:

  • You must have access to a Salesforce Developer account.
  • The example pages assume that you have some knowledge of web              development   (HTML,CSS,JavaScript,Jquery) and Salesforce administration.
  • The module focuses on using the Design System within Visualforce pages, so it’s beneficial to have some experience with that technology. But although the code examples are specific to Visualforce, you can reuse them in other stacks with minor customization.

We would also suggest you to go through this awesome Trailhead module – Lightning Design System so that you are familiar with Lightning Design System.

What’s Next ?

Keep your eyes on up coming blog entry Part I for Design your visualforce page utilizing Lightning Design System.