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

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.

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.

Lightning Bundle

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 the additional attributes.

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 suggestion, comment below.

Cheers … 🙂

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

12
Leave a Reply

avatar
6 Comment threads
6 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
SnehaganeshCaféForceJohnTubai Recent comment authors
  Subscribe  
newest oldest
Notify of
Mike
Guest
Mike

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

Tubai
Guest
Tubai

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

John
Guest
John

hi is it possible to use arrow keys in selecting?

ganesh
Guest
ganesh

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

John
Guest
John

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

Sneha
Guest
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.