Reusable Lookup Field In LWC : sanketthoughts

Reusable Lookup Field In LWC
by: sanketthoughts
blow post content copied from  Salesforce Diaries
click here to view original post

Reusable Lookup in LWC are one of the important element in custom development. Generally, Lookup is an autocomplete combobox that will search against a database object. We are going to build a custom dynamic reusable Lookup field in Lightning Web Component. Some of the key features are:-

1. Dynamic Lookup Component shows two fields for each item in search panel
2. You can pre-populate the lookup field by just passing the id of the selected record
3. It shows the Icon of the related SObject and can be set dynamically
4. Custom Lookup also shows you the object label in search panel for each item
5. This Reusable Lookup can be extended with other LWC as it fires a custom event whenever a value is selected so that consumer can handle it

Code for Single Select Reusable Lookup

Let’s create a Lightning Web Component in VS Code with name reusableLookup.


The html file of the reusable lookup component has code derived from slds-lookup. It has three main parts.

reusable lookup in lwc, Search Lookup, Lightning Lookup

1. When lookup is in selected state
2. When lookup is not in selected state
3. When Lookup shows result in serach panel

    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <div class="slds-combobox_container" if:false={isValueSelected}>
                <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                        <lightning-input onchange={handleChange} type="search" autocomplete="off" label={label}
                            required={required} field-level-help={helpText} placeholder={placeholder}
            <template if:true={isValueSelected}>
                <label class="slds-form-element__label" for="combobox-id-5" id="combobox-label-id-35">{label}</label>
                <template if:true={required}>
                    <span style="color:red">*</span>
                <div tabindex="0" class="slds-combobox_container slds-has-selection">
                    <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click">
                        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right"
                                class="slds-icon_container slds-icon-standard-account slds-combobox__input-entity-icon"
                                <lightning-icon icon-name={selectedIconName} alternative-text={selectedIconName}
                            <button type="button"
                                class="slds-input_faux slds-combobox__input slds-combobox__input-value"
                                aria-labelledby="combobox-label-id-34 combobox-id-5-selected-value"
                                id="combobox-id-5-selected-value" aria-controls="listbox-id-5" aria-expanded="false"
                                <span class="slds-truncate" id="combobox-value-id-19">{selectedRecordName}</span>
                            <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"
                                title="Remove selected option" onclick={handleCommit}>
                                <lightning-icon icon-name="utility:close" alternative-text="Remove selected option"
            <template if:true={showRecentRecords}>
                <div id="listbox-id-4" tabindex="0" onblur={handleBlur} onmousedown={handleDivClick}
                    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={recordsList} for:item="rec">
                            <li role="presentation" key={} class="slds-listbox__item">
                                <div onclick={handleSelect} data-id={} data-mainfield={rec.mainField}
                                    class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
                                    <span class="slds-media__figure slds-listbox__option-icon">
                                        <lightning-icon icon-name={selectedIconName} alternative-text={selectedIconName}
                                    <span class="slds-media__body">
                                        <span class="slds-listbox__option-text slds-listbox__option-text_entity">
                                        <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">
                                            {objectLabel} • {rec.subField}


The js file of the lwc has exposed required parameters as public so that they can be set. It also has several private methods to handle the various events on input element.

import { LightningElement, api } from 'lwc';
import fetchRecords from '@salesforce/apex/ReusableLookupController.fetchRecords';
/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 500;

export default class ReusableLookup extends LightningElement {
    @api helpText = "custom search lookup";
    @api label = "Parent Account";
    @api required;
    @api selectedIconName = "standard:account";
    @api objectLabel = "Account";
    recordsList = [];

    @api objectApiName = "Account";
    @api fieldApiName = "Name";
    @api otherFieldApiName = "Industry";
    @api searchString = "";
    @api selectedRecordId = "";
    @api parentRecordId;
    @api parentFieldApiName;

    preventClosingOfSerachPanel = false;

    get methodInput() {
        return {
            objectApiName: this.objectApiName,
            fieldApiName: this.fieldApiName,
            otherFieldApiName: this.otherFieldApiName,
            searchString: this.searchString,
            selectedRecordId: this.selectedRecordId,
            parentRecordId: this.parentRecordId,
            parentFieldApiName: this.parentFieldApiName

    get showRecentRecords() {
        if (!this.recordsList) {
            return false;
        return this.recordsList.length > 0;

    //getting the default selected record
    connectedCallback() {
        if (this.selectedRecordId) {

    //call the apex method
    fetchSobjectRecords(loadEvent) {
            inputWrapper: this.methodInput
        }).then(result => {
            if (loadEvent && result) {
                this.selectedRecordName = result[0].mainField;
            } else if (result) {
                this.recordsList = JSON.parse(JSON.stringify(result));
            } else {
                this.recordsList = [];
        }).catch(error => {

    get isValueSelected() {
        return this.selectedRecordId;

    //handler for calling apex when user change the value in lookup
    handleChange(event) {
        this.searchString =;

    //handler for clicking outside the selection panel
    handleBlur() {
        this.recordsList = [];
        this.preventClosingOfSerachPanel = false;

    //handle the click inside the search panel to prevent it getting closed
    handleDivClick() {
        this.preventClosingOfSerachPanel = true;

    //handler for deselection of the selected item
    handleCommit() {
        this.selectedRecordId = "";
        this.selectedRecordName = "";

    //handler for selection of records from lookup result list
    handleSelect(event) {
        let selectedRecord = {
            mainField: event.currentTarget.dataset.mainfield,
            subField: event.currentTarget.dataset.subfield,
        this.selectedRecordId =;
        this.selectedRecordName = selectedRecord.mainField;
        this.recordsList = [];
        // Creates the event
        const selectedEvent = new CustomEvent('valueselected', {
            detail: selectedRecord
        //dispatching the custom event
    //to close the search panel when clicked outside of search input
    handleInputBlur(event) {
        // Debouncing this method: Do not actually invoke the Apex call as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            if (!this.preventClosingOfSerachPanel) {
                this.recordsList = [];
            this.preventClosingOfSerachPanel = false;
        }, DELAY);



We have exposed to home, app and record page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

Apex Controller of Reusable Lookup – ReusableLookupController

public with sharing class ReusableLookupController {
    public static List<ResultWrapper> fetchRecords(SearchWrapper inputWrapper) {
        try {
            if(inputWrapper != null){
                String fieldsToQuery = 'SELECT Id, ';
                    fieldsToQuery = fieldsToQuery + inputWrapper.fieldApiName;
                    fieldsToQuery = fieldsToQuery + ', ' + inputWrapper.otherFieldApiName;
                String query = fieldsToQuery + ' FROM '+ inputWrapper.objectApiName;
                String filterCriteria = inputWrapper.fieldApiName + ' LIKE ' + '\'' + String.escapeSingleQuotes(inputWrapper.searchString.trim()) + '%\' LIMIT 10';
                if(String.isNotBlank(inputWrapper.selectedRecordId)) {
                    query += ' WHERE Id = \''+ inputWrapper.selectedRecordId + '\'';
                }else if(String.isNotBlank(inputWrapper.parentFieldApiName) && String.isNotBlank(inputWrapper.parentRecordId)){
                    query += ' WHERE '+ inputWrapper.parentFieldApiName+ ' = \''+ inputWrapper.parentRecordId + '\'';
                    query += ' AND ' + filterCriteria;
                else {
                    query += ' WHERE '+ filterCriteria;
                List<ResultWrapper> returnWrapperList = new List<ResultWrapper>();
                for(SObject s : Database.query(query)) {
                    ResultWrapper wrap = new ResultWrapper();
                    wrap.mainField = (String)s.get(inputWrapper.fieldApiName);
                    wrap.subField = (String)s.get(inputWrapper.otherFieldApiName);
           = (String)s.get('id');
                return returnWrapperList;
            return null;
        } catch (Exception err) {
            throw new AuraHandledException(err.getMessage());

    public class ResultWrapper{
        @AuraEnabled public String mainField{get;set;}
        @AuraEnabled public String subField{get;set;}
        @AuraEnabled public String id{get;set;}

    public class SearchWrapper {
        @AuraEnabled public String objectApiName{get;set;}
        @AuraEnabled public String fieldApiName{get;set;}
        @AuraEnabled public String otherFieldApiName{get;set;}
        @AuraEnabled public String searchString{get;set;}
        @AuraEnabled public String selectedRecordId{get;set;}
        @AuraEnabled public String parentRecordId{get;set;}
        @AuraEnabled public String parentFieldApiName{get;set;}

Demo – Reusable Lookup In LWC

We have placed the component to home page.You can add the component based on meta configuration.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.


Schedule a 1:1 Meeting with me

Also check out to learn more on LWC.

The post Reusable Lookup Field In LWC appeared first on Salesforce Diaries.

December 30, 2022 at 10:46PM
Click here for more details...

The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.