Posted in Lightning, Lightning Component, Lightning Design System

Winter’18 Lightning Tree Component

Dev Shukla  and I had worked together on a lightning venture 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.

Using lightning: tree To Display Leads with Activity Information

Winter’18 Salesforce has added a new lightning component called lightning:tree, using this we can display the hierarchy of Salesforce. lightning: tree component provides visualization of a structure hierarchy. Tree items, also known as branches, can be expanded or collapsed.This component supports only version 41.0 and above.
Winter18.png 620×378
Business Use Case: We can use this component for displaying the Hierarchy structure like Account Hierarchy, Role Hierarchy, Custom Object Hierarchy. Also, we can use this component to display the information in hierarchy level like Leads with Activity Information, Top customers with Top Deals information.
Here I created a sample component to display my Leads with respective Tasks and on click on respective Task it will display the Task important information in modal like Subject, Status, Assigned To, Due Date and comments.

Here is the working demo: Live Demo

Here you go step by step Instructions to create the Lightning tree component.

  1. Apex Controller

public class LightningTreeAuraController{
    public static List<item> getLeadTree(){
        List<item> items = new List<item>();
        List<Lead> leadList = new List<Lead>();
        //get list of leads and respective tasks
        leadList = [SELECT Id, Name, (SELECT Id, Subject From Tasks) From Lead LIMIT 10];
        for(Lead lead: leadList){
            //get task of current lead record
            List<item> taskItems = new List<item>();
            for(Task task: lead.Tasks){
                //add task items
                item taskItem = new item('Task :'+ task.Subject, String.valueOf(task.Id), false, null);
            //add lead items
            item leadItem = new item('Lead :' +lead.Name, String.valueOf(lead.Id), false, taskItems);
        return items;
    //Item Wrapper Class
    public class item{
        public String label {get; set;}
        public String name {get; set;}
        public Boolean expanded {get; set;}
        public List<item> items {get; set;}
        public item(String label, String name, Boolean expanded, List<item> items){
            this.label = label;
   = name;
            this.expanded = expanded;
            this.items = items;
     //get task information based on Subject click
    public static Task getTaskDetails(Id recordId){
        Task task = [Select id,Subject,Owner.Name,Description,ActivityDate,Status from Task where Id=:recordId];
        return task;

2.  Lightning Component code


You can take complete component code here

3.Lightning Component JS Controller Code

    doInit: function (component, event, helper) {
    openModel: function(component,event, helper) {
        var TaskId = event.getParam('name');

    closeModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle"
        component.set("v.isOpen", false);

4. Lightning Component Helper code

    getLeadtree : function(component, event, helper) {
        var spinner = component.find("spnr");
        var action = component.get('c.getLeadTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                //get lead and respective task list, and initialize with items
                component.set('v.items', response.getReturnValue());
                //hide spinner after getting data
                $A.util.toggleClass(spinner, "slds-hide");
                $A.util.toggleClass(spinner, "slds-hide");

    getTaskDetails : function(component, TaskId) {
        var action = component.get('c.getTaskDetails');

            recordId : TaskId
        action.setCallback(this, function(response){
            var state = response.getState();
            //get task information and initialize with task attribute
            component.set('v.task', response.getReturnValue());
            component.set("v.isOpen", true);


Here is Output of Component :

This slideshow requires JavaScript.

GitHub Repository
You can also download the code from the github repository here.

References :

Salesforce Documentation
Lightning Design System : Lightning Tree

lightning:tree to display Account Hierarchy

Posted in Lightning, Lightning Component

Lightning Data Service

Salesforce has released the most awaited feature for Lightning Developers, Lightning Data Services – Standard Controller of Lightning Components! To speed up Lightning component development, Salesforce brought in Lightning Data Services. Lightning Data Service is a collection of lightning tags, methods, and events. We can relate it to Visualforce Standard Controller. 

  • Use Lightning Data Service to load, create, edit, or delete a record in your component without requiring Apex code. Lightning Data Service handles sharing rules and field-level security for you.
  • At the simplest level, you can think of Lightning Data Service as the Lightning Components version of the Visualforce standard controller. Whenever possible, use Lightning Data Service to read and modify Salesforce data in your components.
  • Lightning Data Service provides other benefits aside from the code. It’s built on highly efficient local storage that’s shared across all components that use it. Records loaded in Lightning Data Service are cached and shared across components.

LDS Architecture

Lightning Data Services consist of following:

  • force:recordPreview tag
  • getNewRecord() method
  • saveRecord() method
  • deleteRecord() method
  • recordUpdated Event
  • changeType event parameter to check record update status

Let’s see what are the benefits of Lightning Data Services:

Lightning Data Service provides reusable Aura components that:

  • Fetch records once, reducing network transfers, app server load, and database server load
  • Cache record data on the client, separate from component metadata
  • Share record data across components
  • Enable progressive record loading, caching, and merging more fields and layouts into the cache
  • Enable proactive cache population
  • Promote consistency by using only one instance of the record data across multiple components
  • Create notifications when record data changes
  • Lightning components does not enforce Field Level security while displaying data fetched from Apex controller, unlike Visualforce pages. So, it was required to check CRUD permission in apex controller. This can be skipped if you use Lightning Data Services.
  • If there are many components on record detail page, then for each component there was SOQL to fetch data which affects the performance of the entire page. But if we use LDS it’s performance will improve as time lag to fetch data from server side will be saved.
  • Also, prebuilt Lightning controller methods like Save(), getNewRecord() will help to perform DML in Lightning itself with writing any Apex.
  • Data consistency – As the record values stored on client side in the cache, it will remain same across all the components. If you update value of any field in one component, it will be consistent on another component and it notify & refresh other components automatically.

If you have a Lightning application that creates, reads, updates or deletes records, LDS is the best, most efficient way to do CRUD operations.

LDS is here to simplify developer life. Adopting LDS means you no longer have to write your own controller code. All of your data access code is contained within the LDS component, significantly reducing the complexity of your apps and pages. This reduced complexity means that you don’t have to spend as much time on performance and quality testing.

Lightning Data Service Example

References :

  1. Lightning Data Service – Standard Controller for Lightning Components
  2. Use Lightning Data Service – No To Apex Controller In Lightning Components 
  3. Lightning Data Service Basics

What’s Next?

Keep your eyes on an upcoming blog entry for more real-time examples to develop the Lightning Components using Lightning Data Service.

Wait and Watch, more to come…


Posted in Lightning, Lightning Experience, Release Notes

Salesforce Summer’17: Top 17 Features of Lightning Experience

Salesforce published Summer’17 release(Preview) notes. If You are a lightning lover like me then In this release, you can find lot’s of new features as well as new enhancements, for example, Field History Tracking, New Setup Tab, Keyboard Shortcut, Updated Activity Timeline, Classic Email template in Lightning.

Admin Checklist Get Ready for Summer 17 Salesforce Admins

Take a look below new features in Summer 17 released for Lightning Experience:

1.Access Field History Related Lists in Lightning Experience

This is great news for all Lightning Lovers. Yes, finally you can track the history in Lightning. I posted this idea here  Track and display the field history for standard or custom objects, regardless of which Salesforce interface you’re using. If you added the History related list to objects in Salesforce Classic, you can now see it in Lightning Experience. You can also set up a field history related list in Lightning Experiences.

If you already added the History related list to your objects in Salesforce Classic, you’re all set. In Lightning Experience, look for your History related list (1) under the Related tab (2).


2.Switch More Users to Lightning Experience

When you enable Lightning Experience, it’s important to get your users working in—and benefiting from—the new interface. To help, the Switch Users to Lightning Experience tool now displays all users in your org so you can switch the exact group that you want in one go. The tool also makes it easier to find specific users on the list and to see which users in your org are eligible to switch. This change applies to both Lightning Experience and Salesforce Classic.

  1. The Switch Users to Lightning Experience tool is available from the Lightning Experience Migration Assistant in Setup. In the Migration Assistant, click the Set Up Users tab, then click Switch Users.


Search the user list to find exactly the user you want (1). See at a glance which users have permission to access Lightning Experience and are eligible to switch (2), which users have already switched (3), and which users can’t be switched because they don’t have the Lightning Experience User permission (4).To switch users to Lightning Experience, click the button next to their names.

Unlike before, you can’t use this tool to switch users back to Salesforce Classic. But users can switch themselves back as needed, using the Switcher in their profile menus.

3.Make Lightning Experience the Only Experience

Ready to move from Salesforce Classic to Lightning Experience without looking back? Just hide the option to switch to Salesforce Classic from your Lightning Experience users so that they stay in Lightning Experience. This feature is new in both Lightning Experience and Salesforce Classic.

By default, when you enable Lightning Experience, your users get the Switcher, allowing them to switch back and forth between Lightning Experience and Salesforce Classic. But if you want some or all of your users to stick to Lightning Experience, you can remove the Switcher (1) .

Hide option to switch to Salesforce Classic

In Setup, enable the Hide Option to Switch to Salesforce Classic permission (2) in profiles and permission set.When you enable the permission for your Lightning Experience users, new and existing users see Lightning Experience the next time they log into Salesforce. And, they no longer see the Switch to Salesforce Classic link.


4. Ditch Your Mouse—Keyboard Shortcuts Are Here

You can now use keyboard shortcuts to maximize your efficiency and speed while working in Lightning Experience. You can search for, edit, save, and close a record—all without touching a mouse. So start planning what you want to do with all the time you’re going to save! By default, keyboard shortcuts work in all Lightning apps. This change applies to Lightning Experience only.

To view the available keyboard shortcuts, press:

  • Windows: Ctrl+/
  • macOS: Cmd+/

Screen shot of the available keyboard shortcuts for standard navigation apps.

For Lighting apps with console navigation, extra shortcuts are available to help users navigate tabs, utilities, and more.

5.Get Better Assistance with the Restyled Lightning Experience Migration Assistant

To guide you through the optimal path to enabling Lightning Experience, we’ve given the Migration Assistant an easier-to-use, wizard-style interface. The tools for assessing and previewing your org’s readiness, setting up features and users, and flipping the switch are now visible at a glance—and faster to access. Oh, and it’s also easier to find the Migration Assistant in Setup. This change applies to both Lightning Experience and Salesforce Classic.

Accessing the Migration Assistant in Salesforce Classic is a no-brainer now. From Setup, click Get Started in the Lightning Experience Migration Assistant tile at the top of the menu. (From Setup in Lightning Experience, continue to access the Migration Assistant from the Lightning Experience link.)

Lightning Experience Migration Assistant tile in Salesforce Classic Setup Menu

 The new Migration Assistant is a clean, concise wizard, with tabs that highlight the steps for transitioning to Lightning Experience.

Restyled Lightning Experience Migration Assistant, with highlight around tabs at the top of the page

The interface focuses on specific tasks, one at a time. But you aren’t restricted to going through the tabs in a sequential order. As before, you can use the Migration Assistant to run tools like the Readiness Check and the Preview whenever and as often as needed. Simply click the desired tab to get down to business.

Check Readiness tab in the Lightning Experience Migration Assistant

6. Relate Accounts to Leads Faster with Account Matching

When sales users convert leads, if the lead company name matches any of your accounts, it’s quick and easy to choose one of the matching accounts. This change applies to Lightning Experience only.

Previously in Lightning Experience, if there was a single exact match between the lead company name and an existing account name, the account populated the Account Name field during lead conversion. New account matching brings Lightning Experience in line with Salesforce Classic.

  • Support for person accounts—If the lead contains a company name, we search business accounts. If there is no company name, we search person accounts instead.
  • Enhanced type ahead—Type-ahead search in the Account Name field now searches across all accounts rather than searching only the user’s recently used accounts.
  • Multiple match—When a user clicks the Account Name field during lead conversion, a dropdown menu includes a list of all accounts that match the lead’s company name. If the lead does not have a company name, the list contains matching person accounts.

7.Add Members to Campaigns from Reports in Lightning Experience

Your marketing department can quickly target specific groups of leads, contacts, or person accounts by adding them to campaigns directly from standard and custom reports. This change applies to both Lightning Experience and Salesforce Classic.

Reps can add up to 50,000 returned records to campaigns by clicking Add to Campaign (1).

The Add to Campaign action on reports

To let marketers add members to campaigns from custom reports, the report’s primary object must be Lead or Contact. The custom report type must also include the Full Name field.Previously, Salesforce Classic allowed members to be added to campaigns only from standard reports. The ability to add members to campaigns from custom report types is available in both Salesforce Classic and Lightning Experience.

8.Decide How Path Displays

A path is now closed when the page loads, helping users view more record details without scrolling. You can configure how users display Path. This change applies to Lightning Experience only.

To view or hide a path’s key fields and guidance, users click.Show More

The Show More button with a closed path.

To let your users decide whether a path’s guidance and key fields display automatically when the page loads, from Setup, enter Path Settings in the Quick Find box, then select Path Settings. Then enable Remember User’s Path Preferences.

9.See Opportunity Stage History in Lightning Experience

Review changes to an opportunity’s amount, probability, stage, and close date on the Stage History related list in Lightning Experience. This change applies to Lightning Experience only.

The Opportunity Stage related list on an opportunity.

10.Show Who Reports to Whom from Contact Pages in Lightning Experience

Give your sales team a key tool for planning sales strategy. Use Lightning Contact Hierarchy to visualize the contacts on an account according to what sales reps enter in the Reports To field. Plus, customize contact hierarchy columns to show the information that’s most useful to your sales teams. This feature is new in Lightning Experience.

Give your sales reps access to the hierarchy from contact pages. In Setup, in the Salesforce1 and Lightning Experience Actions section of your contact page layout, add the View Contact Hierarchy action. The Actions menu includes the View Contact Hierarchy action unless you customized the contact page layout before Summer ’17.


The hierarchy shows who reports to whom according to the Reports To field. Sales reps can expand or collapse areas as they navigate. They can view up to 2,000 contacts from each point where they enter a hierarchy. To view contacts in a different part of the hierarchy, a sales rep can enter the hierarchy from a different contact.


Email Quote PDFs with One Click

In Lightning Experience, reps can now email one or more quote PDFs by clicking Email PDF in the Quote PDFs related list or list view. This change applies to Lightning Experience only.

11. Be More Productive with the Sales Console (Generally Available)

The Lightning Sales Console app is now generally available. Plus, it also benefits from all the great improvements we’ve made to all Lightning console apps, such as person account support, split view navigation, and keyboard shortcuts. These changes apply to Lightning Experience only.


12.Lightning Voice: New Name, Call List General Availability, and Voicemail Drop

Lightning Voice has a new name and more call list features. Sales reps can also send pre-recorded voicemail messages and dial numbers in reports and dashboards. These changes apply to Lightning Experience only.

Organize Calls with a Call List (Generally Available)

To create a call list, reps can select the people they want to call, and click Add to Call List.

The prioritized list appears in the call panel. In addition to leads, call lists also support accounts, person accounts, and contacts.

Reps can click Call Next to dial the number at the top of the list and open the related record. Only one call list is available at a time.

Send Prerecorded Voicemail Messages

Save time with custom voicemail messages. Reps can “drop” (or send) prerecorded messages to recipients’ voicemail boxes to focus their time on selling. This change applies to Lightning Experience only. To create a voicemail message, reps can select Voicemail Settings from the call panel or their personal settings.


13.Use Your Classic Email Templates in Lightning Experience

Leverage all the work and planning that went into your Salesforce Classic email templates by using the same templates in Lightning Experience. You can use your Text, Custom HTML, and Letterhead email templates in Lightning Experience. This change applies to Lightning Experience only.

When you insert an email template, change the filter to Classic Templates.


14.Stay on Top of Things with the Updated Activity Timeline

Quickly see what each activity is about with easily read summaries. Need the details? Click Expand to see more, without leaving the timeline. Want to drill deeper into your day? Click Expand All to see all the details on all the activities in your timeline. This change applies to Lightning Experience only.
You can expand each activity individually, or expand and collapse the entire list of activities at once. Expanded emails are shown just like they were sent, with paragraphs and line breaks in the same place. You can take actions from within the email summary, too.


15.Home: Assistant and Performance Chart Updates

The Assistant has a new look, and the performance chart now has both a weekly and daily view. These changes apply to Lightning Experience only.

See Assistant Updates in a New Way

The Assistant has a slightly different look and feel. Click > to see more details about a specific update. This change applies to Lightning Experience only. Your sales reps can also quickly act on different updates with the new action buttons, such as sending an email or editing an opportunity.


See Multiple Views of the Performance Chart

The performance chart displays opportunities for the current sales quarter that are closed or open with a probability over 70%. Sales reps can now switch between a weekly and daily view. This change applies to Lightning Experience only.

16.Add Dashboard Filters in Lightning Experience

Add, edit, or remove filters from your Lightning Experience dashboard directly from the lightning dashboard builder. Filters let people choose different views of a dashboard, so one dashboard does the job of many. Without dashboard filters, you’d have to create multiple dashboards, each with its own set of filtered reports. For example, add a filter on the industry field to track opportunities by industry. This feature is new in Lightning Experience.


17. Create Report and Dashboard Folders in Lightning Experience

Folders are key to sharing and organizing reports and dashboards. Now you can create them in Lightning Experience. Switch to Salesforce Classic to grant other people access to folders. This feature is new in Lightning Experience.


There are many more powerful features in Summer’17 Release notes. For complete list of Summer’17, Release Notes click here  

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);
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="" xmlns:xlink="" lang="en">
		<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')}" />
		<div class="slds">
		<div class="slds-grid slds-wrap slds-grid--pull-padded">
		<div class="slds-p-horizontal--small slds-size--1-of-1">
		<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



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.


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.


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.


GitHub Repository

You can also download the code from the github repository here.