Salesforce Path – Read Only Lightning Component

Chevron Lightning Component
Chevron Lightning Component

Salesforce Path is awesome feature, where you can display picklist value at top of record page and on click, it updates value in Salesforce database. However same solution does not fit in all scenario. Consider situation where picklist field is supposed to be changed by some other process or Integration. Now you don’t want anyone to change it from user interface. Even though you like Salesforce Path to show summary at top of page however it won’t be useful in above scenario.

Because of this, I created a Read Only Path Component in Lightning. I tried to keep same look and feel as of Standard Path component. This component will need only two inputs

  1. Record Id – It would be automatically passed if we use it using App Builder
  2. Field API Name – API name of picklist type of field

Now think about it. Only thing I got is Record Id. How would I know Object Name ? How would I know all picklist values for field name supplied ?

 With the help of this post, I will get Object name on basis of record Id.  And, with the help of this post, I will get Field Description. Hopefully you got it, I am talking about Dynamic Apex here 🙂 .

Below animation shows how to configure and use this component.

Read only Path (Chevron) Component in Salesforce Lightning
Read only Path (Chevron) Component in Salesforce Lightning

Source Code :

You can use below code snippet to test this component without App builder.


  1. SLDS not getting applied, it is implemented in the app but don’t know why it isn’t getting applied apart from this everything is working perfect.


  2. Hi Jitendra,
    I haven’t seen this expression syntax before


    and down below you have {#item.val}

    What is this syntax, can you pls clarify?

  3. For anyone looking to add a read-only path to a community page, I came up with a bit of a hack which achieves the read-only functionality without Apex code or a custom lightning component.

    1. Add this Custom CSS to your Community:

    .forceCommunityPathAssistant .tabs__nav .tabHeader,
    .forceCommunityPathAssistant .stepAction {pointer-events: none !important;}

    2. Set the field-level security for the field that the path is based-off to be read-only for Community user profiles, OR, create a validation rule which prevents editing this field.

    NB: It is ESSENTIAL that you do step 2. CSS can be edited by any user client-side. Therefore you need to provide some server-side data protection (the field-level security or validation rule.)

    1. Hi Justin,
      I added the CSS in Step #1 and set the field level security for my field from Step #2 and all works well. However, my client would like to hide the ability to ‘click’ any of the chevrons on the path. Is there some CSS that can do that for me?
      Very respectfully,

  4. Is it possible to add a read-only path to as a related list on an object? I have related list on an object that contains records that each have a path. When I go to the parent record, i would like to see a read-only path for each child record so that I know the status of each. How can this be achieved? Can you please assist me?

  5. Hie! I have copied same code but its showing blank in the app builder as well as while opening in app. Plz help me

      1. Good afternoon

        I’d like to also use this for Opportunity paths and also showing blank in the app. For the APEX, should I update recId = to ‘recordId’ , ‘Opportunity.Id’ , ‘Id’ or something else?


  6. Hi Jitendra, I ma using above code for my requirement, I tried to get clicked stage name but I’m not able to get clicked stage name can you please help me..

  7. Or else you can just reply use CSS hack to remove the update button from the UI using

    display:none !important;
    that`s all

  8. Now the update button can be removed from the Path component. One issue also is that this code doesn’t respect the record type of the record and it showing all values.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.