Lightning Picklist Path Component

Create your custom path for picklist field in any standard and custom objects. The new lightning picklistpath component in Winter18 helps us to display the picklist field progress similar to the lightning path. The path is rendered as a horizontal bar with one chevron for each picklist item, this component doesn't have key fields or guidance information and doesn't display the mark complete button similar to the lightning path. 

<lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"

picklistFieldApiName="status" />

The picklist path will display the progress based on the recordId and picklistApiName attribute value. Specify the API name of the picklist field in the picklistAPIName attribute which you want to display in the page layout and specify the Salesforce record ID in the recordID attribute so it renders the current value for the field in the page. In this example, the status field in the case object displayed in the horizontal bar with one chevron for each picklist item.

Let’s make this picklist path component writeable using lightning data service. Once the user clicks the picklist value, the onselect action will call the client-side controller and use the event.getParam("detail").value function we can get the selected value. Then assign the value to the lightning data service target fields and save the record. All these actions are performed at the client-side controller without calling any apex class

PicklistPath Component

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >
<lightning:notificationsLibrary aura:id="notifLib"/>
<aura:attribute name="picklistField" type="object"/>
    
<force:recordData aura:id="record"
    layoutType="FULL"
    recordId="{!v.recordId}"
    targetFields="{!v.picklistField}"
    mode="EDIT"/>
    
<lightning:picklistPath recordId="{!v.recordId}"
        				variant="non-linear"
        				picklistFieldApiName="Status"
                onselect="{!c.handleSelect}" />

</aura:component>

Client-side Controller

handleSelect : function (component, event, helper) {     
    	var stepName = event.getParam("detail").value;
    	component.set("v.picklistField.status",stepName);
        
     	component.find("record").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                component.find('notifLib').showToast({
            		"variant": "success",
            		"message": "Record was updated sucessfully",
                    "mode" : "sticky"
        		});
            } else {
                component.find('notifLib').showToast({
            		"variant": "error",
            		"message": "Unfortunately, there was a problem updating the record.",
                    "mode" : "sticky"
        		});
            }
        }));
   
    }