lightning:picklistPath (Beta)

Displays a path based on a specified picklist field. This component requires API 41.0 and later.

A lightning:picklistPath component displays the progress of a process, which is based on the picklist field specified by the picklistFieldApiName attribute. The path is rendered as a horizontal bar with one chevron for each picklist item. Paths created by this component do not have key fields or guidance and do not display the Mark Complete button.

This example creates a path for contact records that's based on the record ID and the LeadSource picklist field.

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" >
    <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
        variant="non-linear"
        picklistFieldApiName="LeadSource"
        onselect="{!c.handleSelect}">
    </lightning:picklistPath>
</aura:component>

Clicking a step in the path 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

To create a path based on forecast categories, use the ForecastCategoryName field.

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.

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
onselect Action The action triggered when a step on the path is clicked.
picklistFieldApiName String The API name of the field from which the path is derived. For example, StageName for Opportunity.
recordId String The record's ID
variant String Changes the appearance of the path. Valid variants are linear and non-linear. In linear paths, steps prior to the current step are displayed with a checkmark to indicate completion. In non-linear paths, step names are displayed instead. By default, the path displays as a linear path.