You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Reusable Lightning Sales Path


By: Radha

Introduction 

Sales Path feature for opportunities helps sales reps to work their deals faster and smarter. Now we could get the same for other objects also, using Visualforce. This reusable sales path works both in salesforce classic and lightning.

Resources needed 

  1. Download the Salesforce Lightning Design System CSS zip file and upload in static resource
  1. JQuery, use CDN here. Either upload as a static resource and use it in Visualforce page or use the link directly. ( <script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script> )

Get the values to show it on page

Here we are using Standard Controller and the extension to get the picklist values. Add the lightning CSS and JQuery resources on the VF page.

Sales path has three stages:  completed, current and next stages. We compare the current picklist values and create the Sales Path to add it to the Sales Path component.

Add the following code to the Visualforce page

//Description : To Create sales path for custom object 

<apex:page standardController="Wishes__c" extensions="WishController_AC" docType="html-5.0"> 

<apex:stylesheet value="{!URLFOR($Resource.lightningDesign, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> 

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 

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

<div class="slds"> 

<div class="slds-grid"> 

<div class="slds-tabs--path" role="application"> 

<!--Sales Path Content UL--> 

<ul class="slds-tabs--path__nav" role="tablist" id="TheLis"> 

</ul> 

</div> 

 </div> 

</div>    

</html>   

<script> 

var j$ = jQuery.noConflict(); 

//Picklist Values From Apex 

var picArr = {!opts}; 

var picArrLen = picArr.length; 

//Get Current Picklist Value of the record 

var CurrentStg = '{!Wishes__c.Status__c}'; 

var CurrentStgPos = picArr.indexOf(CurrentStg); // Comparing the picklist values 

var theiLis = ''; 

for(var i=0; i<picArrLen; i++){ 

// For completed stage           

  if(CurrentStgPos > i){ 

   theiLis += '<li class="slds-tabs--path__item slds-is-complete" role="presentation">'+ 

'<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">'+ 

  '<span class="slds-tabs--path__stage">'+ 

'<svg aria-hidden="true" class="slds-icon slds-icon--x-small"><use xlink:href="{!$Resource.lightningDesign}/assets/icons/utility-sprite/svg/symbols.svg#check"></use></svg></span>'+ 

'<span class="slds-tabs--path__title">'+picArr[i]+'</span></a></li>'  

  } 

// For Current Stage   

else if(CurrentStgPos == i){ 

// If Current Stage is Last Stage              

  if(i == picArrLen-1){ 

  theiLis += '<li class="slds-tabs--path__item slds-is-complete" role="presentation">'+ 

'<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">'+ 

  '<span class="slds-tabs--path__stage">'+ 

'<svg aria-hidden="true" class="slds-icon slds-icon--x-small"><use xlink:href="{!$Resource.lightningDesign}/assets/icons/utility-sprite/svg/symbols.svg#check"></use></svg></span>'+ 

'<span class="slds-tabs--path__title">'+picArr[i]+'</span></a></li>'  

  }  

// If Current Stage is Not Last Stage 

  else{ 

    theiLis += '<li class="slds-tabs--path__item slds-is-current" role="presentation">'+ 

'<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">'+ 

  '<span class="slds-tabs--path__stage">'+ 

'<svg aria-hidden="true" class="slds-icon slds-icon--x-small"><use xlink:href="{!$Resource.lightningDesign}/assets/icons/utility-sprite/svg/symbols.svg#check"></use></svg></span>'+ 

'<span class="slds-tabs--path__title">'+picArr[i]+'</span></a></li>'  

  }   

  } 

// For Next Stages 

 else if(CurrentStgPos < i){ 

  theiLis += '<li class="slds-tabs--path__item slds-is-incomplete" role="presentation">'+ 

'<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">'+ 

  '<span class="slds-tabs--path__stage">'+ 

'<svg aria-hidden="true" class="slds-icon slds-icon--x-small"><use xlink:href="{!$Resource.lightningDesign}/assets/icons/utility-sprite/svg/symbols.svg#check"></use></svg></span>'+ 

'<span class="slds-tabs--path__title">'+picArr[i]+'</span></a></li>'  

} 

} 

//Adding The Created Sales Path To Sales Path Body     

j$('#TheLis').html(theiLis); 

</script>  

</apex:page> 

Extension to get picklist values and send it to VF page 

// Controller to handle the dynamic values and sent to the wishes__c status path 

public class WishController_AC { 

public List<String> options{get; set;} 

public string opts {get; set;} 

public WishController_AC(ApexPages.StandardController controller) { 

options = new List<String>();        

//To get Picklist's Values      

Schema.DescribeFieldResult fieldResult = Wishes__c.Status__c.getDescribe(); 

List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues(); 

for(Schema.PicklistEntry f : ple){ 

   options.add(f.getLabel()); 

 }      

//Assigning array to a string  

opts = JSON.serialize(options);        

} 

}

We have now created the Sales Path for Status picklist in custom object. This can be reused for other objects by replacing the field name and object name.

Add this VF to the section in page layout to highlight the status or use it in lightning page by using VF component.

Web References  

https://cloud-daemon.com/lightning-sales-path-salesforce-classic/