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

5,460 views

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

Live Demo

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

 

You can download file directly from github by Click Here.

 
 

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]

  1.    <template>
  2.     <lightning-card>
  3.         <h3 slot="title">
  4.             <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Custom Search Functionality on Account Object in LWC.          
  5.         </h3>
  6.  
  7.         <p class="slds-p-horizontal_small">
  8.          <lightning-input  type="search" class="slds-m-bottom_small" label="Search Account Name" onchange={searchAccountAction} value={accountName}></lightning-input>
  9.          </p>
  10.          <div class="slds-p-around--medium">
  11.             <table border="1" bordercolor="#ddd" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" class="lwsTablePad">          
  12.                 <tr>
  13.                     <th>Name</th>
  14.                     <th>Phone</th>
  15.                     <th>Website</th>
  16.                     <th>Industry</th>
  17.                     <th>Description</th>
  18.                 </tr>
  19.                 <template for:each={accountList} for:item="accObj" for:index="index">                
  20.                     <tr class="slds-hint-parent" key={accObj.Id}>
  21.                        <td>{accObj.Name}</td>
  22.                        <td>{accObj.Phone}</td>
  23.                        <td>{accObj.Website}</td>
  24.                        <td>{accObj.Industry}</td>
  25.                        <td>{accObj.Description}</td>
  26.                     </tr>            
  27.                 </template>          
  28.             </table> 
  29.          </div>  
  30.  
  31.  <br/> <br/>
  32.    <!--Start RelatedTopics Section-->
  33. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  34.  
  35.             <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>
  36.  
  37.             <br/><br/>
  38.             <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>
  39.             <div style="display:block; overflow:hidden;"> 
  40.                 <div style="width: 50%; float:left; display:inline-block">
  41.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  42.                         <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>
  43.                         <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>
  44.                         <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>
  45.                         <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>
  46.                         <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>
  47.                     </ul>
  48.             </div>
  49.  
  50.             <div style="width: 50%; float:left; display:inline-block">
  51.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  52.                         <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>
  53.                         <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>
  54.                         <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>
  55.                         <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>
  56.                         <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>
  57.                     </ul>
  58.                 </div>
  59.                <div style="clear:both;"></div> 
  60.                <br/>
  61.                 <div class="youtubeIcon">
  62.                     <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>
  63.                 </div>
  64.     </div>
  65.  
  66. </div>
  67.  
  68.   <!--End RelatedTopics Section-->
  69.  
  70.      </lightning-card>
  71. </template>

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

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

lwcSearchAccountList.js [JavaScript Controller]

  1.   import { LightningElement, track, wire } from 'lwc';
  2. import getAccounts from '@salesforce/apex/lwcApexController.searchAccountNameMethod';
  3. const DELAY = 100;
  4.  
  5. export default class LwcSearchAccountList extends LightningElement {
  6.     accountName = '';
  7.     accountPhone = '';
  8.     accountWebsite = '';
  9.     accountIndustry = '';
  10.     accountDescription = '';
  11.   @track accountList= [];
  12.   @wire (getAccounts,{
  13.         accStrName:'$accountName',
  14.         accStrPhone:'$accountPhone',
  15.         accStrWebsite:'$accountWebsite',
  16.         accStrIndustry:'$accountIndustry',
  17.         accStrDescription:'$accountDescription'
  18.      })
  19.   retrieveAccounts({error, data}){
  20.       if(data){
  21.           this.accountList=data;          
  22.       }
  23.       else if(error){
  24.  
  25.       }
  26.  
  27.   }
  28.  
  29.  
  30.   searchAccountAction(event){
  31.       //this.accountName = event.target.value;
  32.       const searchString = event.target.value;
  33.       window.clearTimeout(this.delayTimeout);
  34.       this.delayTimeout = setTimeout(() => {
  35.           this.accountName = searchString; 
  36.       }, DELAY);
  37.   }
  38. }

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]

  1.    <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>45.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets>
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.         <target>lightning__Tab</target>
  10.       </targets>
  11. </LightningComponentBundle>

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

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

lwcSearchAccountList.css [LWC Meta Data XML]

  1.   .lwsTablePad td, .lwsTablePad th{padding:5px; width: 20%;}
  2.   .lwsTablePad th{background-color: #eee;}

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

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

lwcApexController.cls [Apex Class]

  1.   public WITH sharing class lwcApexController {
  2.  
  3.  
  4.     @AuraEnabled(cacheable=TRUE)
  5.     public static List<Account> searchAccountNameMethod (String accStrName, String accStrPhone, String accStrWebsite, String accStrIndustry, String accStrDescription){
  6.         String keyNameString = '%' +  accStrName + '%';
  7.         RETURN [SELECT Id, Name, Phone, Website, Industry, Description FROM Account WHERE Name LIKE:keyNameString];
  8.      }    
  9.  
  10.    }

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

Further post that would you like to learn in Salesforce

 

 

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.

Related Topics | You May Also Like

  • Our Free Courses β†’
 
 


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

Leave a Comment