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.

Featured post

Salesforce Lightning – Brief Introduction to Lightning

Build Beautiful apps fast for the new Salesforce Lightning Experience with new developer tools and design resources

What is Salesforce Lightning Experience ?

Lightning Experience is the name for the all new Salesforce desktop app, with over 25 new features, built with a modern user interface and optimized for speed.

Use the Lightning App Builder to customize theLightning Experience and Salesforce1 Mobile app.

What is the need to switch to Salesforce Lightning?

New Selling features – Lightning offers more than 55 new Sales Cloud pages and well over 150 new Features. Each one is designed to make sales reps more productive and drive business forward.

Here are the five highlighted features: Opportunity Kanban, Quality Performance chart,Assistant, Opportunity Workspace, Custom Dashboards.

Lightning Voice – Lightning Voice, it enables Salespeople to connect with their customers and prospects faster by enabling voice calls directly within Sales cloud.

Lightning is mobile First – Lightning provides the facility to sales reps so that they can access each and everything from mobile using Salesforce1 mobile app. Any customization that is done is accessibleimmediately on any mobile device using Salesforce1.

Lightning builder – You do not need to be a hardcore developer to build apps. Using Lightning Builder anyone can drag and drop Lightning Components to build mobile &desktop apps, and customize pages in Lightning Experience.

AppExchange Apps – There are now more than 157 Lightning ready third party apps available on App Exchange .

Lightning Snap -Ins – It is the newest feature in Service Cloud Lightning. Snap – Ins allow Companies to quickly integrate customer support directly into their apps and webpages.

To Learn more about Snap-Ins from this Videos .

How Sales reps can find Lightning Experience right for his organization or not?

Salesforce provide Evaluate option so that user can Evaluate Is Lightning Experience Right for your Organization or not.

Here are the steps:

Setup | Lightning Experience | Evaluate

This Will send a Lightning Experience Readiness Report to Registered Email Id From which you can identify features which are supported in Lightning Experience or not Supported.

1st

Here is the Lightning Experience Readiness Report.

report final

How to Enable Lightning Experience for your Organization?

Steps to Enable Lightning Experience :

Setup |Lightning Experience |Enable the New Salesforce Experience Section | Enable.

1st

After Enabling Lightning Experience you will find option Switch to Lightning Experience using which you can Switch to Your Organization to Lightning Experience

1st-2

IF Sales Reps want to Give Permissions of Lightning Enabled Organization to Paticular users who are ready for Lightning Experience Instead of giving Permission to all the users in the Organization Even they are ready or not for Lightning Experience So how can he achieve this?

Permission Sets /Profiles – Permission Set or Profile are the only solutions by which sales reps can give Lightning Enable User Permission to an Individual User.

Here are the Steps

Setup |Permission sets |New Permission set| System Permissions | Enable Lightning Experience User

2nd

3rd

Assign this Permission set to particular user who is Ready for Lightning Experience.

Is Every App made in Classic Available in Lightning Experience if not How can user make it available in Lightning Experience?

Setup | App Manager | Click on small button in Last column | Click Upgrade or Edit

If user Clicks Edit, Then Enables Show in Lightning Experience Checkbox Otherwise Do Custom Branding and Click Save.

Now Lightning Experience Provides Two options

Edit – Edit Make Classic App Visible in Lightning Experience however using Edit user cannot do Custom Branding.

Upgrade – Upgrade Make Classic App Visible in Lightning Experience,using upgrade user can do custom Branding Like SetImage , colour of your App According to own choice.

4th

5th

app branding

What is the Console App?

Console apps to give your users a productivity boost, allowing them to edit and reference multiple records at once. When a user chooses a record from a related list, it opens as a tab in the console. When a user opens a related record, it opens as a subtab. Console apps remember tabs, so that when a user navigates away from the page, they don’t lose any time when they come back.

Console apps in Lightning Experience have much of the same console functionality that you’re used to with Salesforce Classic, such as the three-column layout and pinned tabs, but updated with the styling of Lightning Experience. You can also customize Lightning console apps with Lightning pages and components.

To Create a New Custom Lightning Console App in Lightning Experience

Setup | App Manager | New Lightning App

console app - 1

console app - 2

Here is the screenshot of Console apps in Lightning Experience.

console app - 4

Please Follow if you like my Blog and share your valuable inputs

Featured post

Blog at WordPress.com.

Up ↑