Path (Beta)

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.

1<aura:component
2  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
3>
4  <aura:attribute name="variant" type="String" default="non-linear" />
5  <aura:attribute name="hideUpdateButton" type="Boolean" default="false" />
6  <lightning:path
7    aura:id="path"
8    recordId="{!v.recordId}"
9    variant="{!v.variant}"
10    hideUpdateButton="{!v.hideUpdateButton}"
11    onselect="{!c.handleSelect}"
12  />
13</aura:component>

The client-side controller displays a toast with the step name that’s clicked.

1({
2  handleSelect: function (component, event, helper) {
3    var stepName = event.getParam("detail").value;
4    var toastEvent = $A.get("e.force:showToast");
5    toastEvent.setParams({
6      title: "Success!",
7      message: "Toast from " + stepName,
8    });
9    toastEvent.fire();
10  },
11});

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.