Now you can create your custom lightning path for picklist field of any standard and custom objects. In Winter’18 release, Salesforce introduced lightning:picklistPath
component, it displays the progress of a process, which is based on the picklist field specified by the picklistFieldApiName
attribute. The path is rendered as a horizontal bar with one chevron for each picklist item. Paths created by this component do not have key fields or guidance and do not display the Mark Complete button.
Here is an example to create a path for Application Custom Object records that’s based on the record Id and the Status__c
picklist field.
Component:
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global"> <lightning:notificationsLibrary aura:id="notifLib"/> <!--Picklist Field Attribute--> <aura:attribute name="picklistField" type="object"/> <!--Force Record Data to update picklist value--> <force:recordData aura:id="record" layoutType="FULL" recordId="{!v.recordId}" targetFields="{!v.picklistField}" mode="EDIT"/> <!--For changing from left-to-right use dir="ltr" and from to right-to-left use dir="rtl"--> <div dir="ltr"> <!--Lightning Picklist Path For Applicatin Status--> <lightning:picklistPath recordId="{!v.recordId}" variant="linear" picklistFieldApiName="Status__c" onselect="{!c.handleSelect}" /> </div> </aura:component>
Component JS Controller:
({ handleSelect : function (component, event, helper) { //get selected Status value var selectStatus = event.getParam("detail").value; //set selected Status value component.set("v.picklistField.Status__c", selectStatus); component.find("record").saveRecord($A.getCallback(function(response) { if (response.state === "SUCCESS") { $A.get('e.force:refreshView').fire(); component.find('notifLib').showToast({ "variant": "success", "message": "Record was updated sucessfully", "mode" : "sticky" }); } else { component.find('notifLib').showToast({ "variant": "error", "message": "There was a problem updating the record.", "mode" : "sticky" }); } })); } })