Table of Contents
Introduction
Hello #Trailblazers,
In this blog post, we will learn how we can develop a custom path using the lightning web component. We all know that we have a standard path component that can work in most of the scenarios however there are many use cases where you might need to implement a custom path.
For Example, you need to have a custom logic when a value in the path is selected or you wanted to display the path in Lightning flows in those scenarios you need to develop a custom path.
Features
This component has the following features
- The component can be used inside Record Page & Lightning Flows
- The component can be used to display the picklist based on record types
- Can pass values manually if the field is not picklist
Limitations
This initial version of the component has some limitations.
- Not all objects can be used to display the picklist
- The supported objects can be found here
Configure component
Once you have created the lightning web component.
You can either add the component inside any record page or inside lightning flows.
configure record page
Open any record detail page, click on the gear icon and then click on the Edit page
Now, as you are there inside lightning app builder for record page.
From the left-hand side search for “path component” & drag and drop on the page where you wanted to add.
Configure input element
Once you have dragged the component, time is to configure the input elements
- Record Id – If you are inside record detail page you can leave this field blank
- Object API Name – If you are inside record detail page you can leave this field blank
- Picklist Field API Name – The field API name which has the values to display in the path
- The Current Value of Picklist – If you are inside record detail page you can leave this field blank
- Type of path – The type of the path. Valid values are base & path
- The picklist field values – If you wanted to create a path without using picklist values then you can pass the values here comma separated
- Location of the button – Where you wanted to display the button. Valid values are Top & SameRow
- The label of the button – What should be the label of the button
- The Name of the record type – If you are using the record type for the object then provide any values while using the component inside record detail page
- Show Action button – The boolean value which will indicate either to display the button or not
Output
How can we refresh the path if the picklist field values are change manually rather than using the path?
I am working on this functionality to auto refresh the path.
How can we deploy this on parent object layout, if we are using path for child picklist ?
If you are using for Child Picklist then why you would want on parent object layout? That does not make sense to me. But if you still want to then you need to pass the Picklist Values manually