Record Search Capability in LWB

Record Search Capability in LWB

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 custom search for standard contact subject records with an 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>