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
- Download the Salesforce Lightning Design System CSS zip file and upload in static resource
- 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/