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.
This example changes the path variant depending on which stage is clicked.
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" > <aura:attribute name="variant" type="String" default="non-linear"/> <aura:attribute name="hideUpdateButton" type="Boolean" default="false"/> <lightning:path aura:id="path" recordId="{!v.recordId}" variant="{!v.variant}" hideUpdateButton="{!v.hideUpdateButton}" onselect="{!c.handleSelect}" /> </aura:component>
The client-side controller displays a toast with the step name that's clicked.
({ handleSelect : function (component, event, helper) { var stepName = event.getParam("detail").value; var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "Toast from " + stepName }); toastEvent.fire(); } })
Usage Considerations
If an invalid attribute value is used, an error is displayed in place of the component.
Implementing the force:hasRecordId interfaces provides the record Id of the record that's currently viewed to the component. To make your component available in Lightning App Builder, implement the flexipage:availableForAllPageTypes interface, which enables admins to drag-and-drop the component onto a Lightning page easily.
To use a path component in the Salesforce app, display it in a custom tab.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
recordId | String | The record's ID | |
variant | String | Changes the appearance of the path. Choose between linear and non-linear formats. In linear paths, completed steps show a checkmark. In non-linear paths, completed steps show the step name. We show linear paths by default. | |
hideUpdateButton | Boolean | Specified whether the Mark Complete button is displayed next to the path. If true, the button is not displayed. The Mark Complete button is displayed by default. | |
onselect | Action | The action triggered when a step on the path is clicked. |