Jitendra Zaa

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.

Posted

in

by

Jitendra

Tags:

Related Posts

Comments

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.

    Thanks!

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Included CSS as well in post.

      Reply
      1. Nilesh Borse Avatar
        Nilesh Borse

        Great!
        It’s looking awesome

        Reply
    2. Deva Avatar
      Deva

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

      Reply
  2. Phantom Avatar
    Phantom

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

    class=”{#item.cssClass}”

    and down below you have {#item.val}

    What is this syntax, can you pls clarify?

    Reply
  3. vasanth Avatar
    vasanth

    I dont see the code snipet bro

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

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

      Reply
      1. Vasanth Avatar
        Vasanth

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

        Reply
  4. Justin Feldman Avatar
    Justin Feldman

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

    Reply
    1. Jitendra Avatar
      Jitendra

      Thanks Justin

      Reply
    2. Maury Avatar
      Maury

      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,
      Maury

      Reply
  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?

    Reply
  6. Swastika Avatar
    Swastika

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

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

      https://developer.salesforce.com/blogs/developer-relations/2017/03/lightning-components-best-practices-caching-data-storable-actions.html

      Reply
      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?

        Thanks

        Reply
  7. Sachin Chaudhari Avatar
    Sachin Chaudhari

    Thank you so much sir!

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

    Reply
  9. Mamta Vyas Avatar
    Mamta Vyas

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

    Reply
  10. Anshuman Avatar
    Anshuman

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

    .runtime_sales_pathassistantPathAssistantHeader{
    display:none !important;
    }
    that`s all

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

    Reply
  12. Deva Avatar
    Deva

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

    Reply

Leave a Reply

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

Ajax AngularJs ANT ANT Migration Tool Apex ASP.NET best practices C# continuous integration CSS DataLoader Eclipse EGit Flow Git Google Heroku HTML Integration Interview Questions J2EE JAVA Javascript JQuery Lightning component Lightning Web Component LWC NodeJs OAuth PHP Release Salesforce Salesforce DX SAP SEO sfdx SQL SQL Server Students Trailhead Video Tutorial Visualforce Windows XP WordPress XML

Discover more from Jitendra Zaa

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

Continue Reading