How to create Custom Reusable Lookup in LWC?

Hi Developer, As we all know that LWC is a completely new way to develop the Lightning component and there is a very limited no of resources to learn LWC.

So, here is this tutorial we are going to learn how we can create a Custom Reusable Lookup based on user input.

Setp1:- Create search Component

This component is the one, that enables the search functionality. Use the below code for HTML markup and JavaScript.

<template>
   <div class="slds-grid slds-wrap">
      <div class="slds-col slds-size_4-of-4">
         <div>
            <!-- Create an Input Field where user can enter text to find the Records--> 
            <lightning-input variant="label-hidden" label="Search Record" value={searchKey} type="search" onchange={handleChange} placeholder="type text here"> </lightning-input>
         </div>
      </div>
   </div>
</template>

search.js

import { LightningElement, track } from 'lwc';
export default class Search extends LightningElement {
    @track searchKey;
    handleChange(event) {
    	/* eslint-disable no-console */ //console.log('Search Event Started '); 
    	const searchKey = event.target.value; /* eslint-disable no-console */ 
    	event.preventDefault(); 
    	const searchEvent = new CustomEvent( 'change', { 
    	    detail : searchKey 
    	    
    	} ); this.dispatchEvent(searchEvent); 
    } 
}

Step2: – Create recordList component

In this component, we will display the list of all the records which will be returned matching the entered text. Here is the code for the HTML markup & JavaScript Class.

<template>
   <!--<a href="JavaScript:Void(0)" style="text-decoration:none;" onclick={handleSelect}> <lightning-layout> <lightning-layout-item> <lightning-icon icon-name={iconname} size="small"></lightning-icon>    </lightning-layout-item> <lightning-layout-item> {record.Name} </lightning-layout-item> </lightning-layout> </a> --> 
   <div >
      <div class="slds-grid slds-wrap slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-p-left_small" >
         <div class="slds-col slds-size_4-of-4 ">
            <ul class="slds-listbox slds-listbox_vertical" role="presentation">
               <li role="presentation" class="slds-listbox__item">
                  <div class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option" onclick={handleSelect}>
                     <span class="slds-media__figure slds-listbox__option-icon">
                        <lightning-icon icon-name={iconname} size="small"></lightning-icon>
                     </span>
                     <span class="slds-media__body" style="padding-top: 9px;font-weight: 600;"> <span class="slds-listbox__option-text slds-listbox__option-text_entity"> {record.Name} </span> </span> 
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </div>
</template>

recordList.js

import { LightningElement, api } from 'lwc';

export default class RecordList extends LightningElement {
    @api record;
    @api fieldname;
    @api iconname;

    handleSelect(event){
        event.preventDefault();
        const selectedRecord = new CustomEvent(
            "select",
            {
                detail : this.record.Id
            }
        );
        /* eslint-disable no-console */
        //console.log( this.record.Id);
        /* fire the event to be handled on the Parent Component */
        this.dispatchEvent(selectedRecord);
    }
}

Step3: – Create customLookup Component

The main component will contain both the component searchComponent and recordList component and also, be responsible for calling the apex method.

<template>
    <template if:false={selectedRecord}>
        <div class="slds-p-around_x-small">
            <c-search 
                onchange={handleOnchange}>
            </c-search>
        </div>
    </template>
    <div >
        <template if:true={error}>
            <template if:true={error.details}>
                <template if:true={error.details.body}>
                    {error.details.body.message}
                </template>
            </template>
        </template>
    </div>
    <div>
        <template if:false={selectedRecord}>
            <template if:true={records}>
                <template for:each={records} for:item="record">
                    <c-record-list key={record.Id} record={record} 
                        onselect={handleSelect} iconname={iconname}
                        fieldname={searchfield}>
                    </c-record-list>
                </template>
            </template>
        </template>
        <template if:false={selectedRecord}>
        </template>
    </div>
    <div class="slds-p-around_x-small">
        <template if:true={selectedRecord}>

            <div class="slds-form-element">
                <label if:false={showLabel} class="slds-form-element__label" for="combobox-id-5" id="combobox-label-id-32">{objectName}</label>
                <div class="slds-form-element__control">
                    <div 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" role="none">
                                <span class="slds-icon_container slds-icon-standard-account slds-combobox__input-entity-icon" title={objectName}>
                                    <svg class="slds-icon slds-icon_small" aria-hidden="true">
                                        <use xlink:href={iconUrl}></use>
                                    </svg>
                                </span>
                                <button type="button" class="slds-input_faux slds-combobox__input slds-combobox__input-value" aria-labelledby="combobox-label-id-32 combobox-id-5-selected-value" id="combobox-id-5-selected-value" aria-controls="listbox-id-5" aria-expanded="false"
                                    aria-haspopup="listbox">
                                    <span class="slds-truncate" id="combobox-value-id-19">
                                        {selectedRecord.Name}
                                    </span>
                                </button>
                                <button onclick={handleRemove} class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Remove selected option">
                                    <svg class="slds-button__icon" aria-hidden="true">
                                        <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                                    </svg>
                                    <span class="slds-assistive-text">Remove selected option</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

customLookup.js

import { LightningElement, track, api } from 'lwc';
import findRecords from '@salesforce/apex/CustomLookupController.findRecords';
export default class CustomLookup extends LightningElement {
    @track records;
    @track error;
    @track selectedRecord;
    @api index;
    @api relationshipfield;
    @api iconname = "standard:account";
    @api objectName = 'Account';
    @api searchfield = 'Name';
    @api showLabel = false;
    iconUrl;

    ICON_URL = '/apexpages/slds/latest/assets/icons/{0}-sprite/svg/symbols.svg#{1}';

    connectedCallback() {
        this.iconUrl = '';
        let icons = this.iconname.split(':');
        this.iconUrl = this.ICON_URL.replace('{0}', icons[0]);
        this.iconUrl = this.iconUrl.replace('{1}', icons[1]);
        console.log(this.iconUrl);
    }

    handleOnchange(event) {
        //event.preventDefault();
        const searchKey = event.detail.value;
        findRecords({
            searchKey: searchKey,
            objectName: this.objectName,
            searchField: this.searchfield
        })
            .then(result => {
                this.records = result;
                for (let i = 0; i < this.records.length; i++) {
                    const rec = this.records[i];
                    this.records[i].Name = rec[this.searchfield];
                }
                this.error = undefined;
                //console.log(' records ', this.records);
            })
            .catch(error => {
                this.error = error;
                this.records = undefined;
            });
    }
    handleSelect(event) {
        const selectedRecordId = event.detail;
        /* eslint-disable no-console*/
        this.selectedRecord = this.records.find(record => record.Id === selectedRecordId);
        /* fire the event with the value of RecordId for the Selected RecordId */
        const selectedRecordEvent = new CustomEvent(
            "selectedrec",
            {
                //detail : selectedRecordId
                detail: { recordId: selectedRecordId, index: this.index, relationshipfield: this.relationshipfield }
            }
        );
        this.dispatchEvent(selectedRecordEvent);
    }

    handleRemove(event) {
        event.preventDefault();
        this.selectedRecord = undefined;
        this.records = undefined;
        this.error = undefined;
        /* fire the event with the value of undefined for the Selected RecordId */
        const selectedRecordEvent = new CustomEvent(
            "selectedrec",
            {
                detail: { recordId: undefined, index: this.index, relationshipfield: this.relationshipfield }
            }
        );
        this.dispatchEvent(selectedRecordEvent);
    }


}

Step4:- Create CustomLookupController Apex class

public with sharing class CustomLookupController {
    public CustomLookupController() {}
    @AuraEnabled(cacheable = true) public static List < SObject > findRecords(String searchKey, String objectName, String searchField) {
        String key = '%' + searchKey + '%';
        String QUERY = 'Select Id, ' + searchField + ' From ' + objectName + ' Where ' + searchField + ' LIKE :key';
        System.debug(System.LoggingLevel.DEBUG, QUERY);
        List < SObject > sObjectList = Database.query(QUERY);
        return sObjectList;
    }
}

Step5:- Create a Demo App and test lookup

To test in LWC Use the below code

<template>
    <lightning-card  variant="Narrow"  title="Hello" icon-name="standard:contact">
        <c-custom-lookup iconname="standard:contact" 
            object-name="Contact"
            searchfield="Name">
        </c-custom-lookup>
    </lightning-card>
</template>

To test in Aura Component use the below code

<aura:application extends="force:slds"> 
<c:customLookup iconname="standard:case" objectName="Case" searchfield="CaseNumber"/> 
</aura:application>

If you have any Queries or Suggestions DM me @cloudyamit or email me @ sfdcpanther@gmail.com

Happy Learning  🙂 😉

#SFDCPanther #Trailblazer