Posted in Lightning Component, Lightning Web Component, LWC, Salesforce

Lightning Web Components for AURA Developers Part – I

The best way to compare the Aura Component and Lightning Web Components programming models is to look at code for similar components written in the two models. The goal of this post is to help you to leverage your Aura components skills to accelerate learning about Lightning web components. You learn how the two types of components work well together.

Prerequisites

Before you dive into this post, complete the Lightning Web Components Basics module, which gives you a great introduction to the new programming model.
I am assuming that you’re familiar with the Aura Components programming model, and we won’t explain its features, except in comparison to the Lightning Web Components programming model. If you’re not familiar with Aura components, start with the Aura Components Basics module.

Component Bundles

The component bundle file structure is different for an Aura component and a Lightning web component. Here’s how the files map between the two types of component.

(Source: Trailhead )

Migrate Markup

  • An Aura component contains markup in a .cmp file. The file starts with an <aura:component> tag and can contain HTML and Aura-specific tags.
  • A Lightning web component contains markup in a .html file. The file starts with a <template> tag and can contain HTML and directives for dynamic content.

Attributes Become JavaScript Properties

Migrate attributes from tags in the markup (.cmp) of an Aura component to JavaScript properties in the JavaScript file (.js) of a Lightning web component.

Aura component:

 <aura:attribute name="recordId" type="Id" />
 <aura:attribute name="account" type="Account" />

LWC :

import { LightningElement, api, track } from 'lwc';
export default class AccountSummary extends LightningElement {
    @api recordId;
    @track account;
        ...
}

The recordId and account attributes in the Aura component become the recordId and account JavaScript properties in the Lightning web component.

The two Lightning web component properties have different decorators. The @api and @track decorators both make a property reactive, which means that when the property value changes, the component’s HTML template rerenders.

The @api decorator marks recordId as a public reactive property. A public property is part of the public API for the component, which means that it can be set in Lightning App Builder, or by a parent component that uses the component in its markup.

The @track decorator marks property as a private reactive property, also known as a tracked property. These properties are used to track internal component state and aren’t part of the component’s public API.

Basic Aura Expressions Become HTML Expressions

Migrate basic expressions from markup in an Aura component to expressions in HTML in a Lightning web component. An example of a basic expression is a reference to an attribute in an Aura component.
For example, the AccountPaginator Aura component uses basic expressions to display the values of the page, pages, and total attributes.

<aura:component >
    <aura:attribute name="page" type="integer"/>
    <aura:attribute name="pages" type="integer"/>
    <aura:attribute name="total" type="integer"/>
    
    <div class="centered">{!v.total} Accounts • page {!v.page} of {!v.pages}</div>
</aura:component>

Here’s the equivalent syntax in the HTML file of the accountPaginator Lightning web component.

<template>
    {totalItemCount} items • page {currentPageNumber} of {totalPages}
</template>

The HTML references the totalItemCount property in paginator.js. The {currentPageNumber} and {totalPages} expressions reference getters that process the pageNumber and pageSize properties.

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** The current page number. */
    @api pageNumber;
    /** The number of items on a page. */
    @api pageSize;
    /** The total number of items in the list. */
    @api totalItemCount;
    get currentPageNumber() {
        return this.totalItemCount === 0 ? 0 : this.pageNumber;
    }
    get totalPages() {
        return Math.ceil(this.totalItemCount / this.pageSize);
    }
}

Aura Conditionals Become HTML Conditionals

Migrate <aura:if> tags in an Aura component to if:true or if:false directives in a Lightning web component’s HTML file.
Here’s some conditional markup in the AccountDetails Aura component.

<aura:if isTrue="{!v.spinner}">
    <lightning:recordForm recordId="{!v.accountId}"
      objectApiName="Account"
      fields="{!v.accountFields}" columns="2"/>
</aura:if>

Here’s similar HTML in the accountDeatils Lightning web component.

<template if:true={spinner}>
    <lightning-record-form object-api-name="Account" 
      record-id={accountId} fields={accountFields} 
      columns="2">
    </lightning-record-form>
</template>

The HTML file of a Lightning web component starts with the standard HTML <template> tag, and it can also contain other <template> tags in its body. In this example, the content in the <template> tag conditionally renders depending on the result of the if:true directive.

Aura Iterations Become HTML Iterations

Migrate <aura:iteration> tags in an Aura component to for:each directives in a Lightning web component’s HTML file.
Here’s the Aura syntax in Sample.cmp.

<aura:iteration items="{!v.items}" itemVar="item">
    {!item}
</aura:iteration>

Here’s similar HTML in the sample Lightning web component.

<template for:each={items} for:item='item'>
    <p key={item.id}>{item}</p>
</template>

Stay tuned for next blog post for Lightning Web Components for AURA Developers Part- II.

References:

Lightning Web Components for Aura Developers

Working with Aura and Lightning Web Components: Interoperability and Migration

Advertisements
Posted in Lightning Web Component, LWC, Salesforce

Introducing New Lightning Web Components

Introducing Lightning Web Components

In case you missed it, Salesforce recently announced Lightning Web Components (LWCs) — a new programming model that developers can use in addition to the existing Aura-Based programming model to build Lightning components. 

Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, can coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.It’s not same as Lightning Components or built on top of Aura framework but it’s a different model which will co-exist with Lightning Components.
For more information Trailhead Project: Quick Start with Lightning Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Lightning Web Component mainly consists of below mentioned files :

  • HTML provides the structure for your component.
  • JavaScript defines the core business logic and event handling.
  • CSS provides the look, feel, and animation for your component.
  • Component Configuration File(.js-meta.xml) –  This file provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.

Here’s take a look simple Lightning web component that displays “Hello World” in an input field.

HTML

<template>
    <input value={message}></input>
</template>

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {   
message = 'Hello World'; 
}

CSS

input {
   color: blue;
}

Component Configuration File

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”helloWorld”>
<apiVersion>45.0</apiVersion>
<isExposed>true </isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
  • Required
    • apiVersion binds the component to a Salesforce API version.
    • isExposed (true or false) makes the component available from other namespaces. Only set this to true to make a component usable in a managed package or by Lightning App Builder in another org.
  • Optional
    • targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.
    • targetConfigs let you specify behavior specific to each type of Lightning page, including things like which objects support the component.

See the documentation for the full list of supported syntax.

Decorators

The Lightning Web Components programming model has three decorators that add functionality to a property or function.
The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.

@api
To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component’s template rerenders any content that references the property.
See Public Properties.
To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.
See Public Methods.
@track
To track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
See Tracked Properties.
@wire
To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.
See Use the Wire Service to Get Data and Call Apex Methods

What happens to Lightning Components?

Lightning Components are not going away and they will continue to exist in parallel to Lightning Web Components. It’s something similar when Lightning Components were available and we started thinking that if it’s going to replace Visualforce pages.
As VF pages and Lightning Components co-existed, now they are being joined with Lightning Web Components. It will be more of a choice of the framework that you will want to choose when building UI components. With the standard Web development model, it looks like Lightning Web Components definitely will be the choice in future.

Migration Strategy

The programming model for Lightning Web Components is fundamentally different than the model for Aura Components. Migrating an Aura component to a Lightning web component is not a line-by-line conversion, and it’s a good opportunity to revisit your component’s design. Before you migrate an Aura component, evaluate the component’s attributes, interfaces, structures, patterns, and data flow.

To understand more about migration strategy stay tuned for my next blog posts where i will explain in details about Lightning Web Components for AURA Developers.

Lightning Web Components for AURA Developers Part – I

References :

Lightning Web Components Basics

Introducing Lightning Web Components

Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org

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