How to invoke Apex Controller from Lightning Web Component?

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. }  

Lightning Web 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.                     <template for:each = {accounts} for:item = "account">  
  13.       
  14.                         <p key = {account.Id}>{account.Name}</p>  
  15.       
  16.                     </template>  
  17.           
  18.                 </template>  
  19.           
  20.                 <template if:true = {error}>  
  21.       
  22.                     {error}>  
  23.                       
  24.                 </template>  
  25.       
  26.             </div>  
  27.       
  28.         </lightning-card>  
  29.       
  30. </template>  

Lightning Web Component JavaScript:


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

Lightning Component:


  1. <aura:component implements="force:appHostable">  
  2.   
  3.     <article class="slds-card">  
  4.   
  5.         <c:sample/>  
  6.            
  7.     </article>  
  8.   
  9. </aura:component>   

Output:

Create a Lightning component tab to view the output.




No comments:

Post a Comment