
Hello Dear #Trailblazers,
In this blog post, we are doing to learn how we can create reusable Custom Lookup using Lightning Web Component and we will use SOSL to develop the Lightning Web Component
Step1 – Create an Apex Class and name it “SearchController”
This class will have a method to search the records and return the List<List<sObject>> here is the code for the same
public with sharing class SearchController {
@AuraEnabled
public static List<sObject> search(String objectName, List<String> fields, String searchTerm){
String searchKeyword = searchTerm + '*';
String returningQuery = '';
returningQuery = objectName+' ( Id, '+String.join(fields,',')+')';
String query = 'FIND :searchKeyword IN ALL FIELDS RETURNING '+returningQuery+' LIMIT 20';
System.debug(' query '+query);
List<List<sObject>> searchRecords = Search.Query(Query);
return searchRecords.get(0);
}
}
Step2 Create a Lightning Web Component
This is the main component which will have the complete functionality for the lookup. This component have below main public property which are important to use
- valueId; – This field holds the Selected Record Id if the parent record is already there
- valueName; – This field holds the Selected Record Name if the parent record is already there
- objName= ‘Account’; – The Parent Object API Name
- iconName= ‘standard:account’; – The Icon which you wanted to display
- labelName; – The Label for the Search
- currentRecordId; – The child record Id if applicable
- placeholder= ‘Search’; – Search Place holder
- fields= [‘Name’]; – The Fields that You wanted to Query
- displayFields= ‘Name, Rating, AccountNumber’; – The Fields that You wanted to use in the Lookup
- onlookup – the custom event which holds the selected record, SelectedRecordId & the child recorded if applicable
Usage
Below is the code how you can use this component inside your parent component.
<c-search-component
obj-name={typeAttributes.object}
icon-name={typeAttributes.icon}
label-name={typeAttributes.label}
placeholder={typeAttributes.placeholder}
fields={typeAttributes.fields}
display-fields={typeAttributes.displayFields}
value-id={typeAttributes.valueId}
value-name={typeAttributes.valueName}
onlookup={handleLookup}
current-record-id={typeAttributes.currentRecordId} >
</c-search-component>
You can find the complete Code here
Step3 – Demo Time
Create a Lightning Web Component and use the SearchComponent that you have created
<!--
@description :
@author : Amit Singh
@group :
@last modified on : 03-24-2021
@last modified by : Amit Singh
Modifications Log
Ver Date Author Modification
1.0 03-24-2021 Amit Singh Initial Version
-->
<template>
<lightning-card variant="Narrow" title="Custom Lookup" icon-name="standard:account">
<p class="slds-p-horizontal_small">
<c-search-component
obj-name="Contact"
icon-name="standard:contact"
label-name="Contact"
placeholder="Search"
fields={fields}
display-fields={displayFields}
onlookup={handleLookup} >
</c-search-component>
</p>
</lightning-card>
</template>
/**
* @description :
* @author : Amit Singh
* @group :
* @last modified on : 03-24-2021
* @last modified by : Amit Singh
* Modifications Log
* Ver Date Author Modification
* 1.0 03-24-2021 Amit Singh Initial Version
**/
import { LightningElement } from 'lwc';
export default class CustomLookup extends LightningElement {
fields = ["Name","Email","Phone"];
displayFields = 'Name, Email, Phone'
handleLookup(event){
console.log( JSON.stringify ( event.detail) )
}
}

Once you select any record below is the JSON that you get using event.detail
{
"data": {
"record": {
"Id": "0034x000004r7FvAAI",
"Name": "Ashley James",
"Email": "[email protected]",
"Phone": "+44 191 4956203",
"FIELD1": "Ashley James",
"FIELD2": "[email protected]",
"FIELD3": "+44 191 4956203"
},
"recordId": "0034x000004r7FvAAI"
}
}
Thanks for reading 🙂
#Salesforce #DeveloperGeeks #Trailblazer
Please do like share subscribe the blog post and YouTube channel.
2 comments
Hi @Amit, thank you for sharing with us.
It’s beneficial
Thank You 🙂