Chevron Lightning Component

Salesforce Path – Read Only 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


21 responses to “Salesforce Path – Read Only Lightning Component”

  1. Nilesh Borse Avatar
    Nilesh Borse

    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.


    1. Jitendra Zaa Avatar

      Included CSS as well in post.

      1. Nilesh Borse Avatar
        Nilesh Borse

        It’s looking awesome

    2. Deva Avatar

      It’s not working. It shows only the balck. Please help me. It’s very urgent

  2. Phantom Avatar

    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. vasanth Avatar

    I dont see the code snipet bro

    1. Jitendra Zaa Avatar

      Gist must be blocked by Internet provider. Please check on other network.

      1. Vasanth Avatar

        Yes, thank you Sir. I can access in other network

  4. Justin Feldman Avatar

    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. Jitendra Avatar

      Thanks Justin

    2. Maury Avatar

      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,

  5. Carrlos Boyd Avatar
    Carrlos Boyd

    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?

  6. Swastika Avatar

    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. sabeel khan Avatar
      sabeel khan

      Hi Swastika

      The Id passed in the apex controller is hard coded Id so you need to replace that with your lead id.

      Also action.setStorable(); has to be commented because it fetches data from the client cache.

      1. Ron F Avatar
        Ron F

        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?


  7. Sachin Chaudhari Avatar
    Sachin Chaudhari

    Thank you so much sir!

  8. Mamta Vyas Avatar
    Mamta Vyas

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

  9. Mamta Vyas Avatar
    Mamta Vyas

    Hello Sir ,How can we get clicked Opportunity Stage..

  10. Anshuman Avatar

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

    display:none !important;
    that`s all

  11. Daniel Shaheen Avatar
    Daniel Shaheen

    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.

  12. Deva Avatar

    Please help me @Daniel Shaheen
    The path is blank. What I have to do ?

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading