Create Reusable Custom Lookup in (LWC) Salesforce

by Rijwan Mohmmed
0 comment

We are going to create Reusable Custom Lookup Component in Lightning Web Component. if you need to bypass the current user’s sharing and security or you need more flexibility then use this custom approach.

Also check this: Upload files in LWC Salesforce

Key Highlights :

  1. Reusable in any component.
  2. Fully Dynamic
  3. We can set default values
  4. All methods are very simple

Process & Code :

CustomLookup.cls : This class is used for search records and return a list of sobject records. Here we create two methods one for fetching the value on the lookup search and the other is getting records with default values.

public without sharing class CustomLookup {
    public static list<sObject> searchLookupData(string searchKey , string sObjectApiName) {    
        List < sObject > returnList = new List < sObject > ();
        string sWildCardText = '%' + searchKey + '%';
        string sQuery = 'Select Id,Name From ' + sObjectApiName + ' Where Name Like : sWildCardText order by createdDate DESC LIMIT 5';
        for (sObject obj: database.query(sQuery)) {
        return returnList;
    // Method to fetch lookup default value 
    public static sObject searchDefaultRecord(string recordId , string sObjectApiName) {
        string sRecId = recordId;    
        string sQuery = 'Select Id,Name From ' + sObjectApiName + ' Where Id = : sRecId LIMIT 1';
        for (sObject obj: database.query(sQuery)) {
            return obj;
        return null;

customLookup.Html :

    <div class="slds-form-element" onmouseleave={toggleResult}  data-source="lookupContainer">      
        <div class="slds-combobox_container slds-has-selection">
          <label class="slds-form-element__label" for="combobox-id-1">{label}</label>
          <div class="lookupInputContainer slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox"> 
           <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right" role="none">
              <div class="searchBoxWrapper" if:false={isValueSelected}>
                <!--Lookup Input Field-->
            <!--Lookup Selected record pill container start-->  
            <div class="pillDiv" if:true={isValueSelected}>        
              <span class="slds-icon_container slds-combobox__input-entity-icon">
                <lightning-icon icon-name={iconName} size="x-small" alternative-text="icon"></lightning-icon>  
              <input type="text"
                     class="slds-input slds-combobox__input slds-combobox__input-value"
              <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Remove selected option">
              <lightning-icon icon-name="utility:close" size="x-small" alternative-text="close icon" onclick={handleRemove}></lightning-icon> 
            <!-- lookup search result part start-->
            <div style="margin-top:0px" id="listbox-id-5" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
              <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                <template for:each={lstResult} for:item="obj">
                <li key={obj.Id} role="presentation" class="slds-listbox__item">
                  <div data-recid={obj.Id} onclick={handelSelectedRecord} class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                    <span style="pointer-events: none;" class="slds-media__figure slds-listbox__option-icon" >
                      <span class="slds-icon_container" >
                          <lightning-icon icon-name={iconName} size="small" alternative-text="icon" ></lightning-icon>  
                    <span style="pointer-events: none;" class="slds-media__body" >
                      <span  class="slds-listbox__option-text slds-listbox__option-text_entity">{obj.Name}</span>
                <!--ERROR msg, if there is no records..-->
                <template if:false={hasRecords}>
                  <li class="slds-listbox__item" style="text-align: center; font-weight: bold;">No Records Found....</li>

customLookup.JS :

import { LightningElement,api,wire} from 'lwc';
import searchLookupData from '@salesforce/apex/CustomLookup.searchLookupData';
import searchDefaultRecord from '@salesforce/apex/CustomLookup.searchDefaultRecord';

export default class CustomLookup extends LightningElement {
    // public properties with initial default values 
    @api label = 'label';
    @api placeholder = 'search...'; 
    @api iconName = 'standard:contact';
    @api sObjectApiName = 'Contact';
    @api defaultRecordId = '';
    // private properties 
    lstResult = []; // to store list of returned records   
    hasRecords = true; 
    searchKey=''; // to store input field value    
    isSearchLoading = false; // to control loading spinner  
    selectedRecord = {}; // to store selected lookup record in object formate 
   // initial function to populate default selected lookup record if defaultRecordId provided  
         if(this.defaultRecordId != ''){
            searchDefaultRecord({ recordId: this.defaultRecordId , 'sObjectApiName' : this.sObjectApiName })
            .then((result) => {
                if(result != null){
                    this.selectedRecord = result;
                    this.handelSelectRecordHelper(); // helper function to show/hide lookup result container on UI
            .catch((error) => {
                this.error = error;
                this.selectedRecord = {};
    // wire function property to fetch search record based on user input
    @wire(searchLookupData, { searchKey: '$searchKey' , sObjectApiName : '$sObjectApiName' })
     searchResult(value) {
        const { data, error } = value; // destructure the provisioned value
        this.isSearchLoading = false;
        if (data) {
             this.hasRecords = data.length == 0 ? false : true; 
             this.lstResult = JSON.parse(JSON.stringify(data)); 
        else if (error) {
            console.log('(error---> ' + JSON.stringify(error));
  // update searchKey property on input field change  
    handleKeyChange(event) {
        // Do not update the reactive property as long as this function is
        this.isSearchLoading = true;
        const searchKey =;
        this.delayTimeout = setTimeout(() => {
        this.searchKey = searchKey;
        }, 300);
    // method to toggle lookup result section on UI 
        const lookupInputContainer = this.template.querySelector('.lookupInputContainer');
        const clsList = lookupInputContainer.classList;
        const whichEvent ='data-source');
        switch(whichEvent) {
            case 'searchInputField':
            case 'lookupContainer':
    // method to clear selected lookup record  
        this.searchKey = '';    
        this.selectedRecord = {};
        this.lookupUpdateParenthandler(undefined); // update value on parent component as well from helper function
        this.isValueSelected = false; 
    // update selected record from search result 
        var objId ='data-recid'); // get selected record Id 
        this.selectedRecord = this.lstResult.find(data => data.Id === objId); // find selected record from list 
        this.lookupUpdateParenthandler(this.selectedRecord); // update value on parent component
        this.handelSelectRecordHelper(); // helper function to show/hide lookup result container on UI
    //handle select record
        this.isValueSelected = true; 
    // send selected lookup record to parent component using custom event
        const oEvent = new CustomEvent('lookupupdate',
                                        'detail': {selectedRecord: value}

customLookupParent.html :

	<div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:event" alternative-text="Event" title="Event"></lightning-icon>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Custom Reusable Lookup LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">Lookup LWC</span>
	</div> <br/>

	<lightning-card  variant="Narrow"  title="Lookup" icon-name="standard:apps">
		<div class="slds-p-horizontal_small">
			<!--Custom Lookup without Pre-Populate Value for Contact Object-->
			<c-custom-lookup icon-name="standard:contact" s-object-api-name="contact" label="Contact"
				onlookupupdate={handleLookupSelection} placeholder="Search Contact...">

			<!--Custom Lookup with Pre-Populate Value for User Object-->
			<c-custom-lookup icon-name="standard:user" s-object-api-name="user" label="User"
				onlookupupdate={handleLookupSelection} placeholder="Search User here..." default-record-id={userId}>

customLookupParent.JS : In this we get lookup values in handleLookupSelection method.

import { LightningElement } from 'lwc';
import strUserId from '@salesforce/user/Id';
export default class CustomLookupParent extends LightningElement {
    userId = strUserId;

        if(event.detail.selectedRecord != undefined){
            console.log('Selected Record Value on Parent Component is ' +  
            alert(event.detail.selectedRecord.Id + ' '+ event.detail.selectedRecord.Name);

Output :

You may also like

Leave a Comment