Salesforce Lightning – Design a Visualforce Page(Standard Account Creation Page) using Lightning design System

Before we move on to Visualforce Page in Lightning Design System users should know what is Lightning Design System?

Lightning Design System is a Pure CSS framework or it is a collection of design patterns, components and guidelines for creating unified UI in Salesforce ecosystem.

Lightning Design System along with Visualforce Build a Page in the Lightning UI Look and feel.

For more details, please check out the Lightning Design System

Using the Lightning Design System in Visualforce you Must have to Use Below 2 Tags

  1. <apex:slds /> tag : This tag Import the Design system Styles and assets in your Visualforce Page.
  2.  <div class = “slds-scope” > wrapper : wrap All your Code in this Wrapper because Lightning Design System Styles can only applied to elements within this wrapper.

Use SVG icons, add the xmlns attributes to the element Like

xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink&#8221;

So Start Making a Visualforce Page Step by Step

Step 1 – Add the <apex:slds /> and <div class = “slds-scope” > wrapper in Visualforce Page.

<apex:page showHeader="false" standardController="Account" standardStylesheets="false" sidebar="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>

<!-- Import the Lightning Design System style sheet -->
<apex:slds />
</head>

</html>

<body>

<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<p class="slds-text-heading--label slds-m-bottom--small"> Hi ! This is Your Visualforce Page with Lightning Design System</p>


</div>
</body>
</apex:page>

Preview of Step 1

1st Image

Step 2 – Add a Modal in <div class = “slds-scope” > tag.

<!-- Modal -->
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal--medium">
<div class="modal-container slds-modal__container">
<!-- Modal Header -->
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
<svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header43" class="slds-text-heading--medium">Create Account</h2>
</div>
<!-- / Modal Header -->
<!-- Modal Content -->
<div class="slds-modal__content slds-p-around--medium">

</div>
<!-- / Modal Content -->
<!-- Modal Footer -->
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral">Cancel</button>
<button class="slds-button slds-button--brand">Save</button>
</div>
<!-- / Modal Footer -->

</div>
</div>
<!-- / Modal -->
<div class="slds-backdrop slds-backdrop--open"></div>

Code Highlights

  1. ‘aria-labelledby’ attribute in Modal whose Value is the Id of Modal Heading.
  2. <use> tag under the <svg> Tag Must Bound with
    xmlns:xlink=”http://www.w3.org/1999/xlink&#8221;

Preview of Step 2

2nd Image

Step 3 – Insert Compound Form for Account Input Fields in Modal Content<div class=”slds-modal__content slds-p-around–medium”> tag.

Compound Form consists of form groups that are by . It requires the .slds-form–compound class .

<h3 class="slds-section-title--divider">Account Information</h3>
<fieldset class="slds-form--compound">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<span class="slds-form-element__label">Account Owner</span>
<div class="slds-form-element__control ">
<span class="slds-form-element__static">Sagar Sindhi</span>
</div>
</div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="select-01">Rating</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="select-01" class="slds-select">
<option>--None--</option>
<option>Hot</option>
<option>Warm</option>
<option>Cold</option>
</select>
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-03">
<abbr class="slds-required" title="required">*</abbr> Account Name</label>
<input type="text" required="" id="input-03" class="slds-input" />
</div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-04">Phone</label>
<input type="text" id="input-04" class="slds-input" />
</div>
</div>
</div></fieldset>

Preview of Step 3

3rd image

For More Details of Html Tags  for Lightning Design you can go to Lightning Design System .  Here you can Everything for Lightning Design System .

Please Like if you like my Blog and share your valuable inputs.

Advertisements

2 thoughts on “Salesforce Lightning – Design a Visualforce Page(Standard Account Creation Page) using Lightning design System

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

SFDC Panther

A hub for Salesforce Tutorial - Salesforce Classic/Lightning

SFDC Knowledge Bank

Solutions With Best Possible Options

ForceAdventure

Adventures in Salesforce

Analysis Paralysis

Ramblings from a Salesforce Business Analyst

Ajomon Joseph

APEXCODER.COM

Adam To Architect

Journey from Adam to Architect

Andy in the Cloud

From BBC Basic to Force.com and beyond...

Sara Has No Limits

Good Programmers Evaluate, Simplify, Automate and Document

Douglas C. Ayers

My journey with Salesforce and Technology

Shruti Sridharan

Salesforce Enthusiast | Tech Addict | IoT Specialist | Travel Maniac | Photography | Music Lover | Foodie

Andrew Boettcher - Salesforce Technologist

Random musings from a dad with a passion for technology...

Nitin Gupta

Just One Idea

Salesforce coding lessons for the 99%

Finally, Apex tutorials for point-and-click admins! Written by a self-taught Google engineer.

Automation Champion

Automating Salesforce One Click at a Time

Pritam Shekhawat

All About Salesforce.com

Sagar Sindhi

Salesforce Developer | Passionate for Salesforce | Salesforce Lover | Trailhead Addicted | Blogger

%d bloggers like this: