Skip to main content

Lightning Picklist Path Component

Create your custom path for picklist field in any standard and custom objects. The new lightning picklistpath component in Winter18 helps us to display the picklist field progress similar to the lightning path. The path is rendered as a horizontal bar with one chevron for each picklist item, this component doesn't have key fields or guidance information and doesn't display the mark complete button similar to the lightning path. 

<lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}"
picklistFieldApiName="status" />

The picklist path will display the progress based on the recordId and picklistApiName attribute value. Specify the API name of the picklist field in the picklistAPIName attribute which you want to display in the page layout and specify the Salesforce record ID in the recordID attribute so it renders the current value for the field in the page. In this example, the status field in the case object displayed in the horizontal bar with one chevron for each picklist item.




Let’s make this picklist path component writeable using lightning data service. Once the user clicks the picklist value, the onselect action will call the client-side controller and use the event.getParam("detail").value function we can get the selected value. Then assign the value to the lightning data service target fields and save the record. All these actions are performed at the client-side controller without calling any apex class

PicklistPath Component


Client-side Controller

Comments

  1. Hey! I'd like to share this useful online file converter that just work awesome. Make sure to check out. https://onlineconvertfree.com/

    ReplyDelete
  2. Hi Karan Raj,
    The above posted code is working fine in record home page. I am looking to use the component in communities. I am unable to get the child record value to display pick list value of child in lightning picklist path. Can you please share your ideas on this?

    Thanks,
    SNR

    ReplyDelete
  3. Hey, you:)! Yeah, most of my wishes are yours blog-related. Awesome blog!!!!
    Thanks to sharing this with us! Thanks a lot!!!!!!!!!
    France VPS

    ReplyDelete

Post a Comment

Popular posts from this blog

Avoid Duplicate Records Using Flow

In this blog post lets see how to avoid duplicate records in Salesforce using the powerful feature – Flow , As the word says, flow easily flows to fulfill the requirements with ease. ☺  Many think of appexchange solutions and source code to avoid the duplicate record in salesforce, But the method I'm going to explain here is completely different and very simple. It helps you to reduce your code and can easily rebuild for other objects with different field logic with simple clicks. Lets jump into the solution, we will use flow to check duplicate record logic and use apex trigger to initiate the Flow whenever a record is created or updated. Visual Work Flow : [Click] First we will create the Flow to check the duplicate records based on the name and store the result in the variable. In this example, we will use the Account object for the dupe check. Step 1  : Create a new visual flow with the Name ‘ DuplicateAccountCheck ' Step 2  : Click and drag the RecordLookup into t

Export records from List view – ListView API

As part of the Winter’15 release salesforce introduced the List View API features which helps us to get details and records of list views for an object. I was started exploring more about the List view API and trying to build an use case using that. So I searched about List View in the IdeaExchange site then found that many users are looking for a solution to export records to excel directly from the list view. I built a solution for that Idea, which helps user to download all the records directly from the List view for both standard and custom object. You don’t have to make any change in the code to use this functionality for different objects. All you need is to create a custom button for that object as mentioned below. Lets take an example for Account object 1. Go to Setup –> Accounts –> Buttons, Links and Actions 2. Click ‘New Button or Link' 3. Enter  Label, Name and select display type as ‘List Button’ 4. Content source as “Onclick Javascript” and paste the