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.

Advertisements
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.

 

Posted in Dreamforce, Salesforce

Dazzling Dreamforce

Inspired by Blog Series – Kevin Bacon by Eric ,Girly Geek By Lauren , Answers Community Leaders by Vinay & the Answers Community   forum of which I have been a part from a long time,I decided to put this series to share astounding truths about dreamforce. Special thanks to Eric Dreshfield for being an Awesome Mentor, Supporter, and a True Evangelist.

 

dreamforce-2014-salesforce-conference

A Paradise where we have the time of our life & its Memories, that last a Lifetime…

What is Dreamforce :

Isn’t this only a Salesforce annual user conference? Strictly, yes, it is Salesforce’s primary yearly gathering. Yet, Dreamforce is so much more than that.

Individuals assemble in San Francisco from everywhere in the world to share thoughts and challenges, learn about new product capabilities, associate and network with one another, and, in general, be educated and enlightened about the Salesforce ecosystem. You get the opportunity to engage with thought pioneers, industry leaders, and a great many your companions from the ecosystem. What’s more, you’ll leave with great learning, new connections, and memories that will endure forever.  With more than 2,000 breakout sessions, helpful keynotes, an exceptional expo, and a rockin’ show, Dreamforce is the world’s biggest innovation gathering. Basically, it’s the spot to be for the Salesforce Community.

Dreamforce offers:

Learn Without Boundaries:

Learn and share best practices on more than 2,000 sessions, including expert and MVP led sessions and hands-on trainings, a Cloud Expo (the world’s biggest!), exceptional selections for admins and developers, as well as Circles of Success, where you can get your inquiries addressed by product specialists.

Network like There’s No Tomorrow:

Make connections and share best practices. Whatever your part, organization size, or industry, the Community is prepared to share its knowledge and skills, and is eager to connect with you outside of Dreamforce, or even simply share lunch with you at Dreamforce.

Give Back in a Big Way:

The Dreamforce community consistently meets the challenges to make an impact on other that is as large as the event itself. It’s mind-boggling what we can accomplish when we join together as a whole community. In previous years we’ve given 3 million dinners to those in need and gathered over a million books!

History Of Dreamforce

Untitled.png

Dreamforce may be the greatest cloud meeting anyplace, and it’s rapidly getting to be one of the biggest innovation gatherings in the world. With that developing notoriety, the industry has generally expected huge names when Salesforce declares the gathering’s keynote speakers. From Dreamforce’s first year, CEO Marc Benioff has shared conversations with VPs, performing artists, CEOs, and illuminating tech industry celebrities.

A list of all the Dreamforce keynote speakers from 2003-2016

Here’s a far-reaching history of Dreamforce keynote speakers since 2003, the first year of the Salesforce gathering. In the initial couple of years, Dreamforce was called a “Client and Developer Conference” and the speaker rundown did not feature such recognizable names as it does today. Still, Benioff figured out how to stock the speaker list with pioneers and innovators: Note beginning in 2013, Dreamforce and the Benefit for UCSF Benioff Children’s Hospital were joined. Earlier years, they were separate events.

2003 – Dreamforce 1 –(November 9-11)

Adam Bosworth (SVP of BEA Systems), Halsey Minor (Chairman and CEO, Grand Central), Chris Thomas (Chief E-Strategist, Intel), David Vaskevitch (SVP and CTO, Microsoft Corporation), Ernie Cormier (VP of Business Solutions, Nextel)

2004 – Dreamforce 2 –(November 1-4)

Brad Boston, (SVP and CIO, Cisco Systems), Adam Bosworth (VP of Engineering, Google), Marie Wieck, (GM, IBM), Jim Balsillie (Chairman and Co-CEO, Research In Motion) Jonathan Schwartz (President and COO, Sun Microsystems), Joe Rymsza, (President and CEO, Vettro), and Subrah Iyar, Chairman and CEO, WebEx)

2005 – Dreamforce 3 – (September 11-14)

Chris Anderson (Tech Luminary, Editor-in-Chief, WIRED Magazine), Adam Bosworth (VP of engineering, Google), John Freeland (Global Managing Partner, CRM practice, Accenture), Laurent Philonenko (VP & General Manager, Cisco), Chris Thomas (Chief strategist, Intel)

2006 – Dreamforce 4 – ( October 8 – 11)    Colin Powell

2007 – Dreamforce 5 – (September 16-19)  George Lucas

2008 – Dreamforce 6 –  (November 2-5)

Michael Dell, Neil Young, Sheryl Sandberg (Facebook), Dave Girouard (President of Enterprise, Google)

2009 – Dreamforce 7 – (November 17-20)

Colin Powell, Shantanu Narayen (President and CEO, Adobe), Dave Girouard (President of Enterprise, Google)

2010 – Dreamforce 8 – (December 6-9)      Bill Clinton

2011 – Dreamforce 9 – (August 30 – September 2)

Eric Schmidt, Gary Vaynerchuk

2012 – Dreamforce 10 – (September 18-21)

Colin Powell, Jeff Immelt, Tony Robbins, Sir Richard Branson

2013 – Dreamforce 11 –(November 18-21)

Sheryl Sandberg, Marissa Mayer (CEO and President, Yahoo!), Deepak Chopra.

2014 – Dreamforce 12 – (October 13-16)

Hillary Clinton, Al (October 13-16) Hillary Clinton, Al Gore, Max Levchin

2015 – Dreamforce 13 (September 15-18)

Marc Benioff(Chairman & CEO, Salesforce),Satya  Nadella(CEO,Microsoft), Jessica Alba(Founder,The Honest Company),Sujan Wojcicki(CEO,YouTube),Goldie Hawn(Founder,TheHawnFoundation), Hikmetersek(President/CEO,Western Union), DR. Laura Esserman(MD,UCSF School of Medicine),

2016 – Dreamforce 14- (October 4-7)

Melinda Gates (Co Chair , Bill & Melinda Gates Foundation),MARC BENIOFF (Chairman & CEO, Salesforce),Patricia Arquette,Billie Jean King ,Deborah Duggan (CEO, RED)

References : 

Dreamforce ’16 Ready

Get Ready for Dreamforce

5 Things to Know About Dreamforce ’16