Custom Lookup component in Salesforce Lightning

Hey CafeForce Users,

Today we gonna create a cool re-usable custom lookup component in lightning.

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 lookup component. We will create this within a single component without using any child component or event. You can find the complete source code at the bottom of the page.

Custom Lookup component Features:

  • Single component
  • Will work on any object
  • Spinner to show processing
  • Ability to set sObject Icon
  • Option to set placeholder & label
  • Ability to show error in the dropdown if any occurred.
  • You can set a number of records to show at once. Default is 5

Also Check, Multi Select Lookup Lightning Component

Demo GIF:

custom lookup lightning

 

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.

Create CustomLookupController.cls Apex class.

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

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

Open the helper file CustomLookupHelper.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 CustomLookup.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, fieldName, and iconName to this custom component. You can also set additional attributes.

You can check the list of available icons here LDS Icons.

As this component has used aura:iteration this will work slow. Aura:iterations are comparatively slower. To use a faster version of lookup component use Lookup Lite. Click the link below.

Test Class. Create CustomLookupControllerTest.cls Apex class.

 

Also Check:

Lookup Lite Component: Create a Lightning fast Lookup Lite component.

Also, for Multi-Select Lookup, check out: Multi-Select Lookup Component in Salesforce Lightning

For any queries or suggestions, comment below.

Cheers … 🙂

Edit: Code updated. Extra useless classes are removed, small bugs, and CSS fixed.

Subscribe
Notify of
guest
22 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Mike

Thanks for the great post !
Please provide the test class for that apex controller please !

Tubai

Nice one. This will help a lot of people. Can you please provide the test class for the apex controller?

John

hi is it possible to use arrow keys in selecting?

CGNWorks

Any update on this? do we have to build javascript logic for this?

ganesh

Thanks for the post ……Always lifesaver…Please Provide Test Class of this

John

Thanks, this helps me a lot, please provide the test class thanks

Sneha

Thanks a lot for this post!!
Can you please help me with using the input value?? “selectedRecord” is made private, I am unable to work with the input value.

Noor

Thnks a lot for this post
but in input box list scroller not working propperly
can please update the code

Noor

Thanks for your response

actually i put your code as it is ( markup,controller,helper,css). its not working
please can you tell me where i doing mistake

SFDCKash

I tried to use this in aura : iteration in order to pre-populate the value from the controller list but doesn’t seem working.
Also when i try to remove the value attribute from the below code snippet and try to search the field on lookup field it throws me an error “invalid operator on id field”.
Product__c is a lookup field.
Please let me know what should i do in order to pre-populate the value from controller.

SFDCKash

Thanks for the response.
I am able to search the value in lookup field but the expectation is the lookup field should autopopulate the value like other fields populate the values from the listOfCaseProducts .
I also tried the code snippet of <aura:if> you provided , but i am getting an error as “Message: The value of attribute “isTrue” associated with an element type “aura:if” must not contain the ‘<‘ character.: Source”.
I just need your help in order to populate the value in lookup field as soon the page loads.