Lookup Lite component in salesforce lightning

Hey CafeForce Users,

Have you ever tried custom lookup component fetching thousands of records from apex? If so, you are well aware of the speed it offers. Custom lookup components having aura:iteration is extremely slow to display records. It will take more than 20sec to fetch and display over 5000 records.

To resolve the speed issues we gonna create a fast lookup component lookup lite. In this we not use aura:iteration instead we will access HTML DOM and append HTML tags dynamically.

Lookup Lite component Features:

  • Single component
  • Lightning fast speed
  • Will work on any object
  • Ability to set sObject Icon
  • Storable Action
  • Ability to set placeholder & label

 

lookup component lightning demo

Requirement:

Step-1: Create an Apex controller

Here our main focus is on faster lookup component so I m creating a simple Apex controller without any (Field Level Security) FLS or Error checks. Create LookupLiteController.cls Apex class and paste the below code.

Step-2: Now we will create the LookupLite 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 by default. In the right sidebar, click on Controller, Helper, and Style to create these files too.

 

Now open LookupLite.cmp and paste the below code.

Open the controller file LookupLiteController.js and paste the below code

Our helper will enqueue an action and will fetch the data from the server so open the helper file LookupLiteHelper.js and paste the below code.

Finally, paste the CSS in LookupLite.css file.

Step-3: Call the component in lightning App

Finally, Our component is now ready to use. Just call the component and pass the necessary values.

To use a fancy lookup, see the Custom Lookup component using aura:iteration.

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
CaféForceSagar Recent comment authors
  Subscribe  
newest oldest
Notify of
Sagar
Guest
Sagar

Does this work, when i use this multiple times on the same component.

let’s say, i have 5 rows in table, i will be creating Contact, and when i choose account, it should allow me to select different account each contact that i am going to create.