So today we are going to create Custom Lookup Component in Lightning. As we all know lookups are very important components in Salesforce. Salesforce provides inputfield to handle the Lookup component out of the box. But they come with there own set of limitations. So today I have created a Custom Lookup Component in Lightning. Which we can easily use with our existing apps or component and can easily add the lookup functionality in them.
I tried to keep this component as simple as possible. So I did not use any event to communicate data between components. Instead, we have used two-way binding to pass data between components. Also, we have not used any third party library and only SLDS is used. So it will work in Locker service and can pass security review as well.
So below is the complete code. As we are using a single component to display lookup and dropdown for the result. So we don’t need to pass data between multiple components. Because of this, we have reduced the code here. Also, we don’t need to maintain multiple components here.
Component Code
Now, this component supports Dynamic Icon, Required attribute, Dynamic Label. So this component also supports prepopulate field values. So if you want to use this in existing edit page you can use that as well. We can also use this in Tables as well. As we have used standard binding to pass data so they will not conflict with each other. You can download complete code from Github repo as well.
We have upgraded the above component and made it Lightning Web Component compatible. You can check here.
Did you like this component or want to add any feature, report any bug. Just let me know in the comments section. Happy Programming 🙂
I cannot get this to work. I am trying to use it in a sandbox to lookup accounts and I have entered sample data.
Check in console if you are getting any error. Share the error message if any.
Hi,
this works perfectly and it is a very good solution. I used the component as an input field on Account Object to a custom object.
However, I have an extra requirement where i need:
When editing the Account i need to display the selected value by the user on that account. I cannot find a way? Could you please help ?
Hi George,
Yes just pass the value in attribute and it will get prepopulate when it load.
For edit form for setting up the default value do we have to set the initial value in v.selectRecordId and v.selectRecordName? can we passing initial value only to v.selectRecordId?
Yes just pass both, you can change if you want to pass one.
Hi Tushar,
I am calling this component from another component and passing the userid and name to selectRecordId and selectRecordName attribute. In my parent component in init controller method I am fetching both thee values before passing.
but its not pre populating the values.
thanks,
vedant
check which method is getting called first.
Hi George,
This Component I want to use that In a Add Row and Delete row functionality in Salesforce while adding the Information and sending back to the Child Component and getting back to the Parent component can you please validate.
Hi Tushar,
I would like to use this component for my current work requirements. But I couldn’t find any license information for this component.
Hi Yugandhara, you don’t require any license. Its free to use . Happy Programming 🙂
Hi Tushar, I have an additional step to add to this. I need to pass Fromdate and Todate fields to the lookup component from parent component to filter the account records based on the date fields. Could you please help?
Hi Kavya,
Just add one more attribute whereCondition and pass the condition like we do in dynamic SOQL. It will then filter the records.
Hi Tushar,
Thanks for the quick response. Also how do I pass the parameters from parent component to the custom lookup component. I need to pass the searchKey,fromdate, and another field Id.
Just follow the same approach we used to pass object name as attribute.
Thank you.I got it. I was able to pass the date fields.
But when I am passing a related field like ACCL__Account__r.Name , I am getting an error at this line
String fieldvalue = (String)so.get(fieldName); in the apex controller.
Error : Invalid field ACCL__Account__r.Name
The same query when I run in query editor, it’s working. I have checked the FLS on the field as well. What could be the issue?
We have different method to get data from parent field. Get getSObject and get field.
how we pass the lookup values to the controller for the Save method?
You have this value as attribute. You can pass it as param with other parameters. eg: action.setParams({
“recordid” : component.get(“v.selectRecordId”),
I am trying to use this in aura : iteration in order to pre-populate the value from the controller list but doesn’t seem working.
Please let me know what should i do in order to pre-populate the value from controller.
Just make sure you are passing all the parameters.
Tushar thanks for the reply.
I am passing all the parameters , do you think after looking into the below code i am missing anything while calling the lookup component in my parent component.
listOfCaseProducts already contains the value of Product__c field .
When i copy pasted the same code in my org then the alignment of icons – search icon , clear icon and the icon which comes after a value is selected , that alignment is not coming correct.
I tried to update the css but couldn’t correct it. Is there any change in the version of code posted here and the once which is shown in the example?
No. For the icon you need to make some changes. Rest code doesn’t require much CSS.
Can you share the updated code where icon is aligned properly ?
Facings issues with that
This is updated code and working fine for me.
I like the code. I am only using it for Contact searching but my formatting of a selected record is not good. The icon covers up the name. It actually did this prior to changing anything with all four search boxes.
Also, I would like to use this to populated the selected contacts, contact page. So, if I had this on the contact page, the selected contact would replace the existing contact. Or, open the contact page in a new tab, but the existing tab is preferred.
How can we make to used of a keyboard or tab for selecting the value?
You need to handle those events in JS.
Hi Tushar,
How Can I get Opportunity Icon To Work in Aura Component as a lightning:icon and not as a Img src image?
Thabks
You can refer the tag available in aura and use them. I am sure we have opportunity icon available and you don’t need img tag for same.
Thanks So much for the valuable solution..