Creating a Custom Lookup in Aura Component
Salesforce provides many standard components that can be used in Lightning Experience to develop an application. But sometimes, we need to create custom components to meet specific requirements.
A lookup field is a reference to another object in Salesforce. It allows you to link one object to another object.
Creating a custom lookup in an Aura component allows users to search for records of a specified object type and select a record from the results.
This can be a useful feature in many applications, as it provides a quick and efficient way for users to find and reference relevant records. By default, Salesforce provides the Lookup component, but it has some limitations, such as it only works with standard objects and only allows you to search by record name.
To overcome these limitations, we can create a custom lookup component that allows us to search and link any object in Salesforce.
In this article, we will discuss how to create a custom lookup in Aura Component. Let’s begin!
Step 1: Create the Apex Class:
The first step in creating a custom lookup is to create an Apex class that will be used to perform the search for records. In this example, we will create an Apex class called ‘customLookup’ that contains a single method called ‘searchRecords’.
This method takes two parameters: the name of the object to search for and the search string entered by the user.
The method returns a list of records that match the search criteria.
Here is an example of what the Apex Class might look like
Step 2: Create the Aura Component:
Now that we have created the Apex class, we can move on to creating the Aura component that will use it. In this example, we will create an Aura component called ‘customLookupComponent’.
The component will contain several attributes, including ‘objectName’, ‘searchString’, ‘records’, and ‘selectedRecord’. It will also include an input field for the user to enter their search criteria, a dropdown menu to select the object to search for, and a list of results returned by the Apex class.
Here is an example of what the Aura Component might look like:
Step 3: Create a JavaScript Controller:
The final step is to create a JavaScript controller to handle the user interactions and make calls to the Apex method we created in Step 1.
In this controller, we will write methods to handle the search, select, clear, and cancel actions. Here is an example of what the JavaScript controller might look like.
js-meta.xml:
Now we have set it’s path to Record Page in aura component file using “implements” attribute.
Next, we will see how to set up this aura component custom lookup in salesforce org.
Setting up the aura component custom lookup in Salesforce org.
Click on the setting icon in vs code there you find the Command Palette option click on it or Use ctrl+shift+p (keyboard shortcut).
Search open default org. It will redirect to your default org in which you have created the project.
Next, open any of the objects where you want to set this custom lookup, and then
- Click on the setup gear icon
- Click on the edit page and
- Select the custom file which you have created
- Drag and drop where you want to use in that page
- Now save and activate it.
Now you have just created a custom lookup using Aura Component. You can see the changes in which object record page you have created.
Below is an example of what it looks like. Whatever object you will select from the Dropdown, here I have created 3 objects Account, Contact, and Opportunity, they will show you the records and you can select the record to display it on the search field and click on the cancel icon to remove that record and choose another record.
The Below Image shows how it looks when you click on any record:
Conclusion:
With the knowledge gained from this blog, you can now easily create your own custom lookup components and tailor them to your specific needs. Be sure to try out the solution and stay tuned for our upcoming blogs. Till then, happy coding!
India 
USA
UK
Canada