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:

Multi Select Lookup Lightning

Requirement:

 

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 a lightning-fast custom lookup, check Out: Lightning fast lookup lite

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

Leave a Reply

avatar
  Subscribe  
Notify of