Multi Object Lookup Component in Lightning Salesforce

Imagine having a single component that allows you to search on any object you want. Multi object lookup lightning component have all this with additional capabilities. Also, it’s easy to create and really cool stuff.

Lightning has many pre-built components but still, many utility components are missing. One of them is the multi-object lookup component. We will create this within a single component without using any child component or event. Multi-Object Lookup is easy to create and use. You can find the complete source code in this post.

multi object lookup lightning object list

Multi Object Lookup component Features:

  • Single component
  • Append any object of your choice
  • 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 record will be shown
  • 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.

Demo GIF:

multi object lookup lightning salesforce

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 to the lightning component. If Apex throws any error or exception, that too will be shown in the dropdown itself.

multi object lookup lightning

Create MultiObjectLookupController.cls Apex class and paste the below code.

Step-2: Now we will create the Multi Object 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 MultiObjectLookup.cmp

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

Now open the helper file MultiObjectLookupHelper.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 MultiObjectLookup.css file.

 

Step-3: Now we will call the component.

Our component is now ready to use. Now while calling this component, you need to pass the additional objects list and attribute in which selected value will be stored. You can also set the additional attributes like setting label or placeholder or minimum records count to show at once.

 

How to pass the object list (ObjectList format):

Data should be passed as Object List in the attribute. Attributes to pass in each object are label,  APIName, fieldName and iconName.

Label: Label to display in object selection dropdown.

APIName: API Name of the Object

fieldName: Field on which searching to be performed.

iconName: Icon to be displayed in object dropdown

Eg: [{‘label’:  ‘University of Texas’, ‘APIName’: ‘custom_object__c’, ‘fieldName’:’Name’, ‘iconName’: ‘standard:drafts’}]

 

multi object lookup lightning dropdown

Also, Check:

To create a single-select custom lookup, check out: Custom Lookup Lightning Component

To create a Multi Select Lookup component, check out: Multi Select Lookup Lightning

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

Leave a Reply

avatar
  Subscribe  
Notify of