Record Search Capability in LWC

Record Search Capability in LWC

Implementing custom record search functionality using Lightning web component.

Business Case:

Adam is Senior Application Developer in TwoPir Consulting Pvt Ltd. He wants a custom object record search functionality in salesforce so he can quickly search any record quickly.

Solution:

we can create custom record search functionality in salesforce lightning web components.

He is developing a custom search for standard contact subject records with a lightning input field. 

Adam Created below lightning web component:

customSearchLWC.html:

<template>

    <div class=”slds-m-around_medium”>

      <div class=”slds-m-bottom_small”>

          <lightning-input type=”text”

             value={sVal}

             label=”Contact Name”

             onchange={updateSeachKey}

             ></lightning-input>

       </div>

       <lightning-button label=”Search”

          onclick={handleSearch}

          variant=”brand”></lightning-button>

       <!– custom data table(with SLDS style) to display contact list  –>  

       <table 

class=”slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small”>

          <thead>

             <tr class=”slds-line-height_reset”>

                <th class=”” scope=”col”>

                   <div class=”slds-truncate” title=”First Name”>First Name</div>

                </th>

                <th class=”” scope=”col”>

                   <div class=”slds-truncate” title=”Last Name”>Last Name</div>

                </th>

                <th class=”” scope=”col”>

                   <div class=”slds-truncate” title=”Phone”>Phone</div>

                </th>

                <th class=”” scope=”col”>

                   <div class=”slds-truncate” title=”Email”>Email</div>

                </th>

             </tr>

          </thead>

          <tbody>

             <!–iterate all contact records using for-each iteration –>    

             <template for:each={contacts} for:item=”contact”>

                <tr class=”slds-hint-parent” key={contact.Id}>

                   <td>

                      <div class=”slds-truncate”>{contact.FirstName}</div>

                   </td>

                   <td>

                      <div class=”slds-truncate”>{contact.LastName}</div>

                   </td>

                   <td>

                      <div class=”slds-truncate”>

                         <lightning-formatted-phone value={contact.Phone} >

</lightning-formatted-phone>

                      </div>

                   </td>

                   <td>

                      <div class=”slds-truncate”>

                         <lightning-formatted-email value={contact.Email} >

</lightning-formatted-email>

                      </div>

                   </td>

                </tr>

             </template>

          </tbody>

       </table>

    </div>

 </template>

CustomSearchLWC.js:

import { LightningElement,track} from ‘lwc’;

// import server side apex class method 

import getContactList from ‘@salesforce/apex/customSearchController.getContactList’;

// import standard toast event 

import {ShowToastEvent} from ‘lightning/platformShowToastEvent’

export default class CustomSearchLWC extends LightningElement {

    @track contacts;

    sVal = ”;

    // update sVal var when input field value change

    updateSeachKey(event) {

        this.sVal = event.target.value;

    }

    // call apex method on button click 

    handleSearch() {

        // if search input value is not blank then call apex method, else display error msg 

        if (this.sVal !== ”) {

            getContactList({

                    searchKey: this.sVal

                })

                .then(result => {

                    // set @track contacts variable with return contact list from server  

                    this.contacts = result;

                })

                .catch(error => {

                    // display server exception in toast msg 

                    const event = new ShowToastEvent({

                        title: ‘Error’,

                        variant: ‘error’,

                        message: error.body.message,

                    });

                    this.dispatchEvent(event);

                    // reset contacts var with null   

                    this.contacts = null;

                });

        } else {

            // fire toast event if input field is blank

            const event = new ShowToastEvent({

                variant: ‘error’,

                message: ‘Search text missing..’,

            });

            this.dispatchEvent(event);

        }

    }

}

CustomSearchLWC.XML:

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle 

xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”CustomSearchLWC”>

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

     <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>