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>