Multi Select Lookup Component in Salesforce Lightning

Hey CF Users,

Multi Select lookup lightning component is easy to create and is re-usable.

Lightning comes with many pre-built components that are easy to use but still many components are missing by date. One of them is the multi-select lookup component. We will create this within a single component without using any child component or event. You can find the complete source code in this post.

Multi Select Lookup component Features:

  • Single component
  • Will work on any object
  • Spinner to show processing
  • Ability to set sObject Icon
  • Label & placeholder functionality
  • Ability to show error in the dropdown if any occurred.
  • Pills of selected records will be shown
  • You can pre-populate selected records t passing their Ids
  • Search functionality to filter results
  • You can set a number of records to show at once. Default is 5

Spinner 

A Spinner will be shown when you will enter a keyword in the search box until the search results are fetched and shown.

Multi Select Lookup Spinner

Demo GIF:

 

Step-1: Create an Apex controller

Our apex controller will fetch records on passing object and field name to it. Here we are using a wrapper class which will return records in the form of value and label.

Multi Select Lookup Search Bar

Create MultiSelectLookupController.cls Apex class.

Step-2: Now we will create the Multi Select Lookup lightning component.

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open y default. In the right sidebar, click on Controller, Helper, and Style to create those files too.

Now since all the files are created, we will write markup for our component I have used standard (Salesforce Lightning Design System) SLDS here for styling.

 

Markup for MultiSelectLookup.cmp

Now open the controller file MultiSelectLookupController.js and paste the below code

Now open the helper file MultiSelectLookupHelper.js and paste the below code.

Here helper calls the apex class method and fetches record data from there. Now finally paste the CSS in MultiSelectLookup.css file.

Step-3: Now we will call the component.

Finally, our component is ready to use. Now while calling this component, you need to pass the objectName and fieldName to this custom component. You can also set additional attributes.

multi select lookup salesforce 5

Lightning Icon

You can set any standard icon that lightning provides. To see the complete list of lightning icons Click Here.

multi select lookup with pills

Here you go, the easy and optimized multi-select lookup component is ready to use.

Also Check:

If you want a more optimized single-select custom lookup, check out: Custom Lookup Lightning Component

If you want an LWC custom lookup, check out: Custom Lookup in LWC

If you want a lightning-fast custom lookup, check Out: Lightning fast lookup lite

For any queries or suggestions regarding this post, comment below:
Cheers … 🙂

Subscribe
Notify of
guest
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Kate

Hi there, I’m a Lightning Component newbie and am not sure where in salesforce I should be putting the code to call the component. I’ve inputted all of the other sections but am unsure of where I’d input this code. Thank you for your helpful guide!

David Robitaille

I’m a business user admin and would love to be able to use something like this for as simple of an application as selecting multiple users to send an email to using an email action in a flow. I’ve poked around to try to add this component to be available within a flow, but it does not seem to be working, and as a non-developer without the bandwidth to focus on it, I’m not sure what next steps are. Have you considered tweaking this and publishing this out for use in screen flows? That would be a killer use case – why this is not a standard component is beyond me.

Dylan

Do you have a version of this specific component using Lightning Web Components instead of Aura?