In this post, you’ll learn how to leverage a base Lighting Component to dynamically display the picklist values from fields of different record types without using the Salesforce UI API. You will learn this by using the code and steps below in your developer sandbox. The implementation is with Aura and not LWC.
This is an important distinction because it is relatively straight-forward to leverage Lightning Web Components (LWC) and the Salesforce UI API to render picklist values as per the docs however, it is trickier to achieve this with Aura (either via the Salesforce UI API or an AuraEnabled method that leverages Schema.DescribeFieldResult and List<Schema.PicklistEntry>.
Why Dynamically Render Salesforce Picklist Values?
For Aura, until fairly recently, you could only return the pick-list values from fields of different record types via the Salesforce UI API; which is a very cool API indeed but to do such a simple thing requires a few hundred lines of code.
This Trailhead walks you through how you can leverage the Salesforce UI API to do just that. The Salesforce docs for doing the same is here. Also, this Salesforce Developer video goes into the UI API in comprehensive detail.
I recommend going through these aforementioned links anyway because the Salesforce UI API is hugely versatile and will enable you to build some really cool applications. However, it felt complete overkill to leverage this API and write a lot of logic for something that should seem to be far easier.
Having investigated this a bit further, I found out that leveraging the recordEditForm Lightning base component will produce the same result. Leveraging this Lightning base component in this way will cut down your development time significantly when displaying pick-list values dynamically for a custom Lightning component that is rendered in Salesforce.
How To Dynamically Render Picklist Values
As per the documentation:
“If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the recordTypeId attribute if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type ID is used.”
Create a Lightning component called ‘recordTypePOC’.
https://gist.github.com/salesforceBen/01c1f3f6c3a2e5dd501bb286a247bce9
The markup shows how, by leveraging lighting:recordEditForm, you can pass in the record type Id into an aura attribute.
As you can also see from the markup, we are just using a standard Account picklist field (Industry). But of course, you could use this with custom picklist fields too. And if you wanted to add more picklist fields in, you can simply add another base recordEditForm. For example, in the gist on line 10, you can see the commented out additional base recordEditForm for another picklist field (Ownership).
The key JavaScript in the controller file is:
https://gist.github.com/salesforceBen/84ab6d13085ec0250c2437f4f67c5b0a
What this does is apply a substring on the URL to get what the record type Id is and then passes that to the .cmp. There is a more elegant approach in JavaScript to grab the record type Id using regex and you may wish to try this out by adding a helper function in the component bundle. Nonetheless, the current code is probably the simplest implementation.
You are able to determine what the record type Id from the URL is because our component will override the ‘New’ account button and upon selection of an account record in the UI, the corresponding record type Id will be passed through to the URL.
Now that the component has been created, let’s do the following:
- Navigate to Object Manager | Account | Buttons, Links and Actions
- Select ‘Edit’ on the ‘New’ button override
- Select ‘c.recordTypePOC’ in the Lighting Experience Override and then select ‘Save’
4. Now, let’s create two Account record types: Buy Side and Sell Side. As you’re working in a developer sandbox, enable these record types for all profiles and apply the default page layouts.
5. Next, navigate to Fields & Relationships for the ‘Account’ in Object Manager and select ‘Industry’:
Create the following ‘Industry’ values for ‘Buy Side’ account record type:
Hedge Funds
- Life Insurance Companies
- Mutual Funds
- Pension Funds
- Private Equity Funds
- Unit Trusts
Create the following ‘Industry’ values for ‘Sell Side’ account record type:
- Commercial Banking
- Corporates
- Investment Banks
To confirm that you have assigned the correct ‘Industry’ pick-list values to the correct record types, you can navigate to Record Types | Select a record type | Select ‘Edit’ by Industry
Now that we have created the component, record types, assigned the pick-list values and override the ‘New’ Account button, let’s test this out by going to the Sales App in App Launcher | ‘Account’ | Select the dropdown and click ‘New’.
Let’s select the ‘Buy Side’ value:
Let’s go back and now try with ‘Sell Side’:
Now, copy and paste the URL from the page into a text editor. You’ll see the output like below:
[yourDomain].lightning.force.com/lightning/o/Account/new?recordTypeId=0121t000000dYSVAA2
where the value for recordTypeId attribute is the value of the record type that you selected in the ‘choose account record type’ page.
You can inspect the page to see if the console.log statements from the controller have been fired:
So, here you can see that the JavaScript substring from the URL is being passed to the aura attribute and the recordEditForm base component takes care of the rest.
Summary
You learned about how to leverage the recordEditForm base component to dynamically return the pick-list values of fields dynamically without having to leverage the Salesforce UI API. You can take the pattern you have used in this example and use them in your Aura components.
The single gist that has both the .cmp and .js file is here:
https://gist.github.com/salesforceBen/bb8af7a12f676d1b5f42b50ba995331b
Comments: