How to create Custom Path using Lightning web component?

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

1. The component can be used inside Record Page & Lightning Flows
2. The component can be used to display the picklist based on record types
3. Can pass values manually if the field is not picklist

Limitations

This initial version of the component has some limitations.

1. Not all objects can be used to display the picklist
2. 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

1. Record Id – If you are inside record detail page you can leave this field blank
2. Object API Name – If you are inside record detail page you can leave this field blank
3. Picklist Field API Name – The field API name which has the values to display in the path
4. The Current Value of Picklist – If you are inside record detail page you can leave this field blank
5. Type of path – The type of the path. Valid values are base & path
6. The picklist field values – If you wanted to create a path without using picklist values then you can pass the values here comma separated
7. Location of the button – Where you wanted to display the button. Valid values are Top & SameRow
8. The label of the button – What should be the label of the button
9. 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
10. Show Action button – The boolean value which will indicate either to display the button or not

Output

Complete Code