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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
({ 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); } }) |
