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.

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.

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.

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…

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)

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.

 

Salesforce Export Reports In Lightning Experience

Salesforce launch Lightning in Winter last year. So not all the features in Salesforce Classic are available in Lightning. Currently, Lightning Experience ( LEX ) doesn’t support export report functionality.  

That doesn’t mean you can’t get your data out in Lightning, Yes you can of course use the DataLoader, or the super cool Pilot for Salesforce Reports for Excel but the quick and easy “Export Report” button, is not there in lightning.

Meanwhile, you can promote and upvote this idea here By Rakesh Gupta

Remark: As of now if we want to export reports in Salesforce Lightning then we have to switch back to Salesforce classic and then only we can export the reports. So using Cloud4J’s Report Builder app(Free) there is no need to switch back to salesforce classic view. User can export the reports in lightning view without leaving the lightning view.

Cloud4J’s Report Builder(http://www.cloud4j.com/report-builder.html)  is a great app that lets you schedule reports as PDF and Excel attachments (as well as many other cool features).It’s currently free, there no installation necessary, and it works with your existing Salesforce reports.To try it, simply log in with your Salesforce username and password at:https://reportbuilder.cloud4j.com/login They even have an on-premise option where you can host the app on your own servers in case you have security requirements that prevent third party apps from accessing your Salesforce data.

 

How to use this in Lightning to Export Report? 

You can set up the Cloud4J’s Report Builder as a Web Tab in Salesforce and then add this tab to your custom Navigation menu and use it for export reports.

Below are the instructions on how to set up the Report Builder Web Tab

Go to Setup > Create > Tabs > Select New

Step 1. Choose Tab Layout

For a better experience, Full page width is the preferred layout.

Step 2. Define Content and Display Properties

Enter a Tab Label, Tab Name, and a Tab Style. Content Frame Height can be changed based on user preference, but a safe pixel height is 1000.

Step 3. Enter the URL Details

Paste the following link in the URL input box

https://reportbuilder.cloud4j.com/webtab/login?apiSessionId={!API.Session_ID}&apiPartnerServerUrl={!API.Partner_Server_URL_340}&userId={!User.Id}&organizationId={!Organization.Id}&environmentType=Production

Step 4. Add to Profiles

Step 5. Add to Custom Apps

Now Customize your Lightning Navigation menu. If you are not familiar with that then please look into my old post here http://bit.ly/1SmJCGc

After Customize Navigation Menu and added this tab to navigation menu it will appear in your navigation menu .

So click on Report Builder tab.So here we are using Report Builder from within Salesforce without any app installation. Users no longer have to leave Salesforce Lightning to use Report Builder and export the reports.

Report Builder covers roughly 75 ideas from the Salesforce IdeaExchange totaling over 80,000 points! Click below to see more detail. Salesforce IdeaExchange Ideas

Reference : ADD EXPORT REPORTS IN SALESFORCE LIGHTNING

 

Salesforce Customize Lightning Opportunity Kanban Card Layout

Opportunity Board Is Now Opportunity Kanban

Opportunity Kanban visually summarizes all of the opportunities for an opportunity record type. It’s more than just a board: this tool helps your reps keep their deals on track and moving forward. The word kanban refers to a system for optimizing work to increase continuous production and balance workload. This feature is available in Lightning Experience only. By seeing all opportunities at once, sales managers can effectively monitor the pipeline and sales reps can keep deals moving forward.

The Opportunity Kanban board displays opportunities from a particular sales path

(1). The opportunities are sorted by stage and include the sum of all opportunities for that stage.The fields shown on the card are the first four fields of the corresponding list view.

(2). Easily move an opportunity by dragging the card to the next stage

(3). Alerts tell how to keep a deal on track; for example, create a task or event on an opportunity that doesn’t have any open activities

(4). You can then create an activity without navigating away from this view. Easily toggle between board view and grid view

(5) and quickly filter the view (6) to see a specific set of opportunities.

I recently Got question in Salesforce success community about How to  Customize card layout in Opportunity Kanban  then I came to know about it that we can easily customize this in lightning using corresponding list view.

Here am customizing the Card Layout for All Opportunity list view: You can take a look below screenshot for before customizing Opportunity Kanban view for All Opportunity it will display four fields in card layout: Opportunity Name, Amount, Account Name and Close Date.

Before Customize the Card Layout for Kanban View:

So Suppose sales Team wants to display Who owns the Opportunity. So here we can add Opportunity owner also and they also don’t want to display Account name here. So we can customize this card layout for Kanban view here by customizing the corresponding list view.

Go to Lightning List view and select All Opportunity to click on Setting Gear Icon>Click on Select Fields to Display

You can only display four fields there on the card layout. So move fields from available fields to selected fields and move fields position as per your needs. Here I want to display Opportunity owner so I move the opportunity owner to in top four fields for list view and save.

Then again open All opportunities List view kanban view. You will get now opportunity owner on card layout for an opportunity. See below screenshot here:

After Customize Card Layout for Kanban View 

So now you can see that on Card Layout it display the Opportunity Owner Name on Kanban view. Same as you can customize for other list view as well. Let me know if you find any difficulty in this. Give me your feedback in below comment section.