Custom Record Search Functionality on Account Object using 'for:each template' With Table Rows And Cells In Salesforce Lightning Web Component - LWC | Custom search functionality in salesforce lwc

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.

Files we used in this post example

lwcSearchAccountList.html	Lightning Web Component HTML	Template HTML file used to write HTML element for build user interface.
lwcSearchAccountList.js	Lightning Web Component JavaScript	It is hold Search function and fetch the account name value from database server.
lwcSearchAccountList.js-meta.xml	XML Meta	It is used for where this lightning web component should be exposed.
lwcSearchAccountList.css	Component Style CSS	It is used for create custom table row border color and padding space.
lwcApexController.cls	Apex Controller	It is used for Search Account name from database sserver

Don’t forget to check out:- How to display account related contacts based on account name using search input in Salesforce LWC Click Here For More Information

Live Demo

create custom search in lightning web component-LWC -- w3web.net

You can download file directly from github by Click Here.

👉 Download Free Ebook →

👉 Get Free Course →

Other related post that would you like to learn in Salesforce

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

SFDX:Lightning Web Component >> New >> lwcSearchAccountList.html

lwcSearchAccountList.html [Lightning Web Component HTML]

```
   <template>
```
```
    <lightning-card>
```
```
        <h3 slot="title">
```

            <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Custom Search Functionality on Account Object in LWC.

```
        </h3>
```
```
 
```

        <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>  
```
```
 
```
```
 <br/> <br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
 
```
```
     </lightning-card>
```
```
</template>
```

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

SFDX:Lightning Web Component >> New >> lwcSearchAccountList.js

lwcSearchAccountList.js [JavaScript Controller]

  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

SFDX:Lightning Web Component >> New >> lwcSearchAccountList.js-meta.xml

lwcSearchAccountList.js-meta.xml [LWC Meta Data 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>
```

Step 4:- Create Lightning Web Component : lwcSearchAccountList.css

SFDX:Lightning Web Component >> New >> lwcSearchAccountList.css

lwcSearchAccountList.css [LWC Meta Data XML]

  .lwsTablePad td, .lwsTablePad th{padding:5px; width: 20%;}

  .lwsTablePad th{background-color: #eee;}

Step 5:- Create Lightning Web Component : lwcApexController.cls

SFDX:Create Apex Class >> New >> lwcApexController.cls

lwcApexController.cls [Apex Class]

  public WITH sharing class lwcApexController {

```
 
```
```
 
```
```
    @AuraEnabled(cacheable=TRUE)
```

    public static List<Account> searchAccountNameMethod (String accStrName, String accStrPhone, String accStrWebsite, String accStrIndustry, String accStrDescription){

        String keyNameString = '%' +  accStrName + '%';

        RETURN [SELECT Id, Name, Phone, Website, Industry, Description FROM Account WHERE Name LIKE:keyNameString];

```
     }    
```
```
 
```
```
   }
```

TechW3web:- To know more, Use this Link

create custom search in lightning web component -- w3web.net

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

How do you find current record in LWC?

To get the current record ID in LWC, we just need to import the api decorator from lwc module. Then, we have to declare the property recordId with @api decorator. This recordId property will have the record ID of the current record.

What is @track in LWC?

@track is like a private method in your apex class which means you can only access @track in your local LWC file as these properties are strictly inside the component. You can use a @track property directly in a template and indirectly in a getter of a property that's used in a template.

What is uiRecordApi in LWC?

This module includes wire adapters to record data and get default values to create records. It also includes JavaScript APIs to create, delete, update, and refresh records.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

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

Files we used in this post example

lwcSearchAccountList.html [Lightning Web Component HTML]

lwcSearchAccountList.js [JavaScript Controller]

lwcSearchAccountList.js-meta.xml [LWC Meta Data XML]

lwcSearchAccountList.css [LWC Meta Data XML]

lwcApexController.cls [Apex Class]

How do you find current record in LWC?

What is @track in LWC?

What is uiRecordApi in LWC?

Related Topics | You May Also Like

Vijay Kumar

Leave a Comment Cancel reply

Files we used in this post example

lwcSearchAccountList.html [Lightning Web Component HTML]

lwcSearchAccountList.js [JavaScript Controller]

lwcSearchAccountList.js-meta.xml [LWC Meta Data XML]

lwcSearchAccountList.css [LWC Meta Data XML]

lwcApexController.cls [Apex Class]

How do you find current record in LWC?

What is @track in LWC?

What is uiRecordApi in LWC?

Related Topics | You May Also Like

Vijay Kumar

Leave a Comment Cancel reply

🌩️ Download App from "Tech W3Web" to continuous learning.