Lightning custom path for picklist field in salesforce using lightning:picklistPath

This blog shows how to create a custom path for a picklist field using lightning:picklistPath component.

The lightning:picklistPath component 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.

This component requires API 41.0 and later.

Paths created by this component do not have key fields and do not display the Mark Complete button.

In the example given below we have created a custom object named Application which contains a picklist field named Application Status having API name Application_Status__c.

The Application Status field is used to create the progress path of the application record.

 

PickListPath.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" >
    <aura:attribute name="PicklistField" type="object"/>
    
    <!--force:recordData to update picklist value-->
    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetFields="{!v.PicklistField}"
                      mode="EDIT"/>
    
    <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
        variant="linear"
        picklistFieldApiName="Application_Status__c"
        onselect="{!c.handleSelect}">
    </lightning:picklistPath>
</aura:component>

 

PicklistPathController.js

({
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        component.set("v.PicklistField.Application_Status__c", stepName);
        
        component.find("record").saveRecord($A.getCallback(function(response) {
            if (response.state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();
            }
        }));
    }
    
})