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 {
    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}"


    handleSelect : function (component, event, helper) {
        var stepName = event.getParam("detail").value;
        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'){
                        "title": "Success!",
                        "message": " Status is Update Succesfully !."