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(); } })
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.
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. |