June 24, 2019

Simple lightning-datatable using Lightning Web Component LWC in Salesforce

Component HTML:


  1. <template>  
  2.       
  3.     <lightning-card title = "Search Accounts" icon-name = "custom:custom63">  
  4.   
  5.         <div class = "slds-m-around_medium">  
  6.   
  7.             <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >  
  8.             </lightning-input>  
  9.   
  10.             <template if:true = {accounts}>  
  11.                   
  12.                 <div style="height: 300px;">  
  13.   
  14.                     <lightning-datatable key-field="id"  
  15.                                          data={accounts}  
  16.                                          columns={columns}  
  17.                                          hide-checkbox-column="true"  
  18.                                          show-row-number-column="true">  
  19.                     </lightning-datatable>  
  20.   
  21.                 </div>                   
  22.       
  23.             </template>  
  24.       
  25.             <template if:true = {error}>  
  26.   
  27.                 {error}>  
  28.                   
  29.             </template>  
  30.   
  31.         </div>  
  32.   
  33.     </lightning-card>  
  34.   
  35. </template>  

Component JAVASCRIPT:


  1. import { LightningElement, track } from 'lwc';  
  2. import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';  
  3.   
  4. const columns = [  
  5.     { label: 'Id', fieldName: 'Id' },  
  6.     { label: 'Name', fieldName: 'Name' },  
  7.     { label: 'Industry', fieldName: 'Industry' },  
  8. ];  
  9.   
  10. export default class accountSearchLWC extends LightningElement {  
  11.   
  12.     @track accounts;  
  13.     @track error;  
  14.     @track columns = columns;  
  15.   
  16.     handleKeyChange( event ) {  
  17.           
  18.         const searchKey = event.target.value;  
  19.   
  20.         if ( searchKey ) {  
  21.   
  22.             fetchAccounts( { searchKey } )    
  23.             .then(result => {  
  24.   
  25.                 this.accounts = result;  
  26.   
  27.             })  
  28.             .catch(error => {  
  29.   
  30.                 this.error = error;  
  31.   
  32.             });  
  33.   
  34.         } else  
  35.         this.accounts = undefined;  
  36.   
  37.     }  
  38.   
  39. }  

Apex Class:


  1. public with sharing class AccountController {  
  2.   
  3.     @AuraEnabled( cacheable = true )  
  4.     public static List< Account > fetchAccounts( String searchKey ) {  
  5.       
  6.         String strKey = '%' + searchKey + '%';  
  7.         return [ SELECT Id, Name, Industry FROM Account WHERE Name LIKE: strKey LIMIT 10 ];  
  8.           
  9.     }  
  10.       
  11. }  

Output:


No comments:

Post a Comment