Usage of lightning:picklistPath

A 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. Paths created by this component do not have key fields or guidance and do not display the Mark Complete button. In this example, Lead Record Status is updated based on the path selected.

Apex Class

public class LeadStatusUpdate {
    @AuraEnabled
    public static void updateStage(String leadStatus , String recordId){
        Lead l = [Select Id ,Status from Lead where Id=:recordId] ; 
        l.Status =leadStatus ; 
        update l ;
        
    }
    
}

Lightning Component 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="LeadStatusUpdate">
    <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
                            variant="linear"
                            picklistFieldApiName="LeadSource"
                            onselect="{!c.handleSelect}">
    </lightning:picklistPath>
</aura:component>

 

({  
    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        console.log(stepName);
        console.log(component.get("v.recordId"));
        var action = component.get("c.updateStage");
        action.setParams({leadStatus:stepName , recordId : component.get("v.recordId")});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var toastEvent = $A.get("e.force:showToast");
                if (state === 'SUCCESS'){
                    toastEvent.setParams({
                        "title": "Success!",
                        "message": " Status is Update Succesfully !."
                    });
                }
                toastEvent.fire();
                $A.get('e.force:refreshView').fire();
                
            }
        });
        $A.enqueueAction(action);
    }})