Custom Record Search Functionality on Account Object using ‘for:each template’ With Table Rows And Cells In Salesforce Lightning Web Component – LWC

[vijayk3327]

Hey guys, today in this post we are going to learn about Create Custom Record Search Functionality on Account Object using ‘for:each template’ With Table Rows And Cells In Salesforce Lightning Web Component – LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcSearchAccountList.html

`

Custom Search Functionality on Account Object in LWC.

    <p class="slds-p-horizontal_small">
     <lightning-input  type="search" class="slds-m-bottom_small" label="Search Account Name" onchange={searchAccountAction} value={accountName}></lightning-input>
     </p>
     <div class="slds-p-around--medium">
        <table border="1" bordercolor="#ddd" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" class="lwsTablePad">          
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Website</th>
                <th>Industry</th>
                <th>Description</th>
            </tr>
            <template for:each={accountList} for:item="accObj" for:index="index">                
                <tr class="slds-hint-parent" key={accObj.Id}>
                   <td>{accObj.Name}</td>
                   <td>{accObj.Phone}</td>
                   <td>{accObj.Website}</td>
                   <td>{accObj.Industry}</td>
                   <td>{accObj.Description}</td>
                </tr>            
            </template>          
        </table> 
     </div>  

 </lightning-card>

`

Step 2:- Create Lightning Web Component : lwcSearchAccountList.js

` import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/lwcApexController.searchAccountNameMethod';
const DELAY = 100;

export default class LwcSearchAccountList extends LightningElement {
accountName = '';
accountPhone = '';
accountWebsite = '';
accountIndustry = '';
accountDescription = '';
@track accountList= [];
@wire (getAccounts,{
accStrName:'$accountName',
accStrPhone:'$accountPhone',
accStrWebsite:'$accountWebsite',
accStrIndustry:'$accountIndustry',
accStrDescription:'$accountDescription'
})
retrieveAccounts({error, data}){
if(data){
this.accountList=data;
}
else if(error){

  }

}

searchAccountAction(event){
//this.accountName = event.target.value;
const searchString = event.target.value;
window.clearTimeout(this.delayTimeout);
this.delayTimeout = setTimeout(() => {
this.accountName = searchString;
}, DELAY);
}
}`

Step 3:- Create Lightning Web Component : lwcSearchAccountList.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-