How to create a reusable Custom Lookup In Lightning Web Component Using SOSL?

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

1. valueId; – This field holds the Selected Record Id if the parent record is already there
2. valueName; – This field holds the Selected Record Name if the parent record is already there
3. objName= ‘Account’; – The Parent Object API Name
4. iconName= ‘standard:account’; – The Icon which you wanted to display
5. labelName; – The Label for the Search
6. currentRecordId; – The child record Id if applicable
7. placeholder= ‘Search’; – Search Place holder
8. fields= [‘Name’]; – The Fields that You wanted to Query
9. displayFields= ‘Name, Rating, AccountNumber’; – The Fields that You wanted to use in the Lookup
10. 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.