Salesforce Path – Read Only Lightning Component

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 17 Comments on Salesforce Path – Read Only Lightning Component

Chevron Component build in Lightning with Same look and feel as of Salesforce Path in read only mode

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.

Related posts

17 thoughts on “Salesforce Path – Read Only Lightning Component”

  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.)

  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?

      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?


  5. 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..

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

    display:none !important;
    that`s all

Leave a Reply

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