Usage Of lightning:path

In this post, I am going to explain how to use lightning:path component. A lightning:path component displays the progress of a process, which is based on the picklist field that’s specified by Path Settings in Setup. The path is rendered as a horizontal bar with a chevron for each picklist item. The key fields and guidance for success are displayed below the path. In this example, I customized the opportunity path. Based on the user selection on the path, opportunity record stage will be updated.

Apex Class

public class OpportunityStageUpdate {
    @AuraEnabled
    public static void updateStage(String stageName , String recordId){
        Opportunity opp = [Select Id ,StageName from Opportunity where Id=:recordId] ; 
        opp.StageName =stageName ; 
        update opp ;
        
    }
}

Lightning Component

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="OpportunityStageUpdate">
    <aura:attribute name="variant" type="String" default="non-linear"/>
    <aura:attribute name="hideUpdateButton" type="Boolean" default="true"/>
    <lightning:path aura:id="path" recordId="{!v.recordId}"
                    variant="{!v.variant}"
                    hideUpdateButton="{!v.hideUpdateButton}"
                    onselect="{!c.handleSelect}"
                    />
</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({stageName: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);
    }
})