If you’ve ever tried to build a custom solution for finding and selecting Salesforce records, you know just how complex and time-intensive that process could be. But thanks to Salesforce’s new Lightning Record Picker Lightning Web Component, in general availability as of the Spring 2024 release, providing a field to look up and select a record from a standard OR custom object is now much more simple.
In this Developer Deep Dive, TruSummit Solutions’ Senior Salesforce Developer Mike Chandler demos the new Lightning Record Picker LWC and shows how to build a custom record lookup field.
TRANSCRIPT:
Hi, I’m Mike, a Salesforce developer with TruSummit Solutions. In this video I’m going to show you the new Lightning Record Picker LWC base component new as of Spring 24. If you ever looked at a lookup field on a native Salesforce page layout, like the ones you’re looking at right here, you’ve probably noticed how elaborate all the moving parts of that field component are. That lookup field component may have inspired your user base to ask for similar functionality in custom solutions, possibly with enhancements to address certain aspects of the look and feel. However, until recently, no such base component for this lookup component existed and you’d really be faced with having to build something yourself, and that’s a lot of work thanks to the new base record picker component for LWCs. Providing a field to look up and select a record from a standard or a custom S object is now very simple.
Let’s look at a wireframe of an app page that we want to implement where a record picker field will work out really well. Okay, you’re looking at a not very sophisticated wire frame that represents what I’d like to build with the record picker component. So what this first screen is, is it’s really just that record component like you were seeing previously that I was showing you on that case screen. So what we’re going to do is we’re going to provide a lookup field to allow someone to look up and search for and ultimately select an account. And then once that account is selected, then we want to see the billing address and the shipping address. It’s probably hard to look at or hard to notice in this wire frame, but these fields are dim suggesting that they are disabled. So this is really just a view into the address.
It’s not going to be an interface that allows you to update or change anything. It’s really given that you’ve searched for and found an account. You can indicate that the account that you want has been selected. It’s going to show you these address fields when it has. And then we want to see clear indicators in the user interface like this. Over here, you want to be able to tell that this is a record that has been selected. You want to have an interface that allows you to deselect it. And then likewise, on the previous step, you want it to be evident that this is a field meant for searching. You want to be able to search for an account and this icon should indicate that you’re still in search mode, you have not selected anything. Let’s go ahead and implement this and take a look at some code.
I’ve done a little homework in advance of recording this video, so I’ll share that work with you now so you can follow along. I know that my work is eventually going to require me to make a call to Apex to retrieve the billing and the shipping address details. So I have this very simple Apex controller that does that. Given that I have an account id, I am simply returning a simple account record instance with the billing and the shipping fields included. Simple stuff. Let’s look at the LWC. I have most of the HTML implemented for the component that we’re proposing. The most obvious thing that you’ll notice is that there is a record base component here that I have implemented. It’s funny because just these four attributes represent a massive amount of work that you as a Salesforce developer don’t have to concern yourself with.
Really it’s the object, API name attribute. That’s the most essential. We’re doing an account lookup, so I will specify that the object API name is account, the label is going to be accounts. The placeholder is search all accounts, and then I’m going to specify a change handler, right? So when somebody selects a record, I want to have this handler to do something. With that record, I’ll expand this HTML a little bit here. So you can see that I’ve also got the HTML implemented for the actual address fields. So once the record has been selected, it’s going to make, it’s called the Apex flesh out that account record and provide us with a view into the billing and the shipping fields. Okay, and let’s take a look at the controller. So there are two states that I want to track here. One of them is whether or not an object has been selected.
Have we selected an account from our lookup, yes or no? And the other state that I want to track is whether or not this component is busy. So by busy, I mean am I doing any work that I need to be mindful about? In this case, I know that the only work that this component needs to do once a record is selected is it needs to go back to Apex and get the billing and shipping details. So I do have this getter here called show record details because we only want to show those address fields conditionally. We only want to show them if we know that a record has been selected and that the component is not busy, meaning it has done its work, it’s communicated with the Apex controller and it is retrieved all of the data that it needs. So if you look at my handle selected record event, this method is what gets called and I’ll jump back over to the HTML on change.
So when the Lightning record picker has changed, meaning your user has selected that record, then it’s going to engage the handle selected record method and it’s going to do its work here. The first thing it’s going to do is, and I’ll explain this in a bit, I’ll come back to this, let me talk to you about this. First, it’s going to indicate that, hey, we’re busy. We’re also going to say the only reason that we’re here is because an object has been selected. So we set that to True. We’re importing our controller method from Apex called Get account details, passing it in the account ID that we’re getting from the event, the handle selected record event. And then once we get our result back, we indicate that the account record is set and we set is busy to false. That should open this Boolean value set at the True True so that we then see our records displayed to the screen.
Okay, so I’m going to jump back to the HTML again, and I’ll minimize this just to get some of the noise out of the way and show you we’ve got a very, very simple lightning record picker implementation here. Let’s take a look now that we see what’s going on under the hood and see how it works. And just a quick reminder, this is what we’re shooting for. We want to first show that record picker component and then based on a successful search and selection of the correct account, then we want to show the shipping and the billing address. Now we’re in Salesforce, we’re looking at the actual component that I was just sharing the source code with you. And we’re going to do a search on an account. I’ll just put in a couple of letters and it’s going to go ahead and do that whole type ahead effect.
It’s going to show us matches so far. And again, if you had to develop this from scratch, every single one of these things would be something that you would need to consider. You would need to consider how to adjust the CSS on this field to include your search icon here. You would have to provide the backend functionality for retrieving these results and then the UI functionality for showing and displaying them. So a lot of work is actually taken off of your shoulders here. By doing it this way, we’re going to select that record and that’s going to have it make a call out to Apex. It’s going to retrieve the data that we’re looking for for the billing and the shipping address, and it’s going to show it there. So you’ll notice that the appearance of the field has changed slightly. Now that you made the selection, we’ve not only been able to take action by displaying the billing and the shipping address, but you’ll actually see that we’ve got the icon here in the field.
We’ve got the name of the account that’s been selected. We’ve got this icon over here that has changed from the search hourglass to an X, and this has functionality. If I were to select this X, that effectively clears the selection and when it does, we see our billing and our shipping address disappear. However, that was very deliberate and I want to circle back to our code and show you how that works. Looking at the handle selected record event implementation here, this first block is what I call that initially that I said I wanted to turn back to. What I’m doing here is I’m saying that in the event that we get an event from the change event of that component, if we do not find the record ID as an attribute on the event detail, that suggests that the record that has been selected has been cleared, it’s going to appear as null.
So I’m basically saying, Hey, is this null undefined? Is it invalid? If it is, then the object selected attribute needs to be reset to false. And then we return, we exit that method implementation right then and there. And that’s why you saw the behavior that you saw. You saw when I cleared that selection, those fields went away. And let’s take a look at documentation because there’s more you can do with this component with the documentation on our screen, we want to see how we can extend the capabilities of this component because we know that once we get it in front of our users, they’re going to ask us to tailor it and customize it to suit their needs. So let’s see what we can do. We can specify some specific attributes for how this component is filtered. This is going to enable you to determine how to limit the output of the accounts that you’re searching for.
So if we want to search for a specific criteria of account, we can specify that here. The documentation gives you a really good example of how to do that, but we’ll go ahead and implement something in real time. Alright, we’re going to make a little bit of room here in our controller and I’m going to create a getter called filter because I want to have a filter attribute that returns and object like the documentation was telling us. We know it’s going to return an object and that object is going to have two attributes. Let’s jump back to the documentation to confirm what those are. So in their example here, we see that the first attribute is called criteria and it provides or it gives us the ability to identify an array of objects. These objects all represent your possible filters, and then you’ve got filter logic, not unlike what you’ve seen elsewhere.
So we have the ability to specify our ore and our not priorities. We are going to just include a single filter criteria, which means we don’t need the filter logic. The filter logic is only necessary if you do not want all of your criteria to be separated or treated as and directives. I’m going to implement a simple criteria just as an example. It may not look as though it has very much value, but what I’m going to say is given a field path of name. So we’re going to be evaluating the name field on accounts. We want to specify an operator of so very similar to Sockwell in this particular case with a value of united. So we want all of the accounts that start with united. So I’ve got the word united and it ends with that wild card. So I am going to call that my filter. And now that I’ve got this getter, I am going to specify a filter attribute on this component filter equals Filter.
And I will save that, what should effectively deploy it to my sandbox. And we’ll take a look and see what that does. Okay, so my search criteria before was just two letters, T and E, and I’m going to put those two letters in there again. And this time I get a much briefer list and it’s only showing me the accounts that start with the word united. As you continue to scroll through the documentation here, you can see that it’s going to give you a lot more detail on defining the filter logic and the filter criteria. It’ll spell out a little bit more about what all of the attributes are in the filter objects that you need to include in that criteria array. And then you also get all of the supported operators so that you know how you can define your filters, but there’s more to do than that.
Scrolling down a little bit, you can see that you can also customize the display of the record suggestions, and that’s I think a huge welcome relief. Quite frankly, anytime that I’ve ever talked to anybody about creating a lookup field that works the same way that the lookup fields work on this record picker, they always want to make something work a little bit differently about how those search suggestions are displayed. And this is the API for allowing you to do so. You can see here that it does ask that you create an object with two attributes, the attributes being the primary field and additional fields. This could be a little bit tricky, and you do have to look very closely at the documentation here because it does ask you to indicate what your primary field is, which is a single selection. And then it does ask you to include additional fields in your additional fields attribute as an array.
That suggests that you can give it multiple additional fields. But if you look closely at the documentation, it will tell you that only a single additional field is required. It does want them to be represented in an array, and you can certainly pass multiple fields in the additional fields array, but it’s not going to look at them. It’s only going to look at the first element. So that leads me to believe that this is likely something that’s going to extend in the future. It’s possible that additional fields will actually allow you to somehow define additional fields and lay them out a specific way. But for right now, you’ve got your primary field and you have additional fields, which is really just an array of a single element. Let’s go ahead and implement something so we can see how that looks. When I look at my component, I can see that when I make a search, it’s only giving me the account icon and the account name, but my customer wants to see their account number also in the search results.
So let’s go ahead and make that modification. Alright, I’m back in my controller. I’ll make a little bit of room here and say, we’ll call this display info since that makes a lot of sense to me. And we’re going to have this attribute return an object, and that object is going to have two properties. One of them is primary field, and that’s still going to be the name. That’s not going to change our additional fields, even though it’s only one. We call it additional fields and we put it in an array. And again, I’m speculating that that means it’s going to be extended in the future. So they’re trying to future proof these config options here. And I’m going to say, give me account number.
So now that I’ve actually defined this object, I need to make sure that I pass it along to my record picker component and we’ll say display info and we’ll specify the display info variable that we just defined in our controller. So with that done, I’ll save that change and deploy it, and let’s take a look and see what that does for us. Okay, back on the component. I’m going to put in my search, sorry, my search string, which is just the letters T and E. And this time when my search results come up, it’s still showing me everything filtered with the word united, but it’s also now including the account number in the search results suggestions, which is exactly what we wanted. Having to produce a component like this from scratch would be a lot of work, and it’s probably the kind of work that you face if you’ve ever been asked for customizations to this component behavior. But with this base component now available in spring 24, a lot of that heavy lifting is done for you. There’s more to look at on this component. I highly recommend going to the documentation and looking at that so you can determine everything that you can do. It’s quite a bit to absorb, but it’s definitely a nice helpful tool to add to your tool set. That’s it for this video. I’ll see you in the next one.
Need help leveraging the latest Salesforce features and functionalities? Our developers are here for you! You know where to find TruSummit Solutions.
Featured Articles
How to Dynamically Set Einstein Bot Language in Messaging for In-App and Web
When deploying Einstein Bots in Salesforce’s Messaging for In-App and Web, providing a localized and personalized experience for your users…
TruSummit Solutions Achieves Salesforce Crest Consulting Partner Status
At TruSummit Solutions, we’re constantly striving to deliver exceptional value to our clients and push the boundaries of what’s possible…
Boosting Agent Productivity in Salesforce: Keeping Conversations in View with Pinned Regions
Salesforce’s new Messaging for In-App and Web feature offers a seamless way to engage customers across multiple channels, but one…
