Retrieving data from Account using @wire Decorators in Lightning web Components with apex method and lightning datatable — LWC | how to fetch account records using @wire decorators in lwc

3,586 views


Hey guys, today in this post we are going to learn about How to Retrieving data from Account using @wire Decorators in Lightning web Components with apex method and lightning datatable

Files we used in this post example:-

wireDecoratorsDataTable.html.html Lightning Web Component HTML Template HTML file for used to write HTML element for user interface.

wireDecoratorsDataTable.js

Lightning Web Component JavaScript It is hold @wire Decorators load functionality.

wireDecoratorsDataTable.js-meta.xml

XML Meta File It is used for where this lightning web component should be exposed.
lwcAppExampleApex.cls Apex Controller It is used for Fetching Account records from @wire Decorators with apex method "@AuraEnabled (cacheable=true)"

Live Demo

Lightning Data Table -- w3web.net

 

You can download file directly from github by Click Here.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
   

 
 

Other related post that would you like to learn in Salesforce

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

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

wireDecoratorsDataTable.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>  @wire Decorators in Lightning web components with apex method  @AuraEnabled (cacheable=true)        
  5.         </h3>                     
  6.  
  7.         <lightning-datatable data={accData} columns={columnTable} key-field="Id"></lightning-datatable>
  8.  
  9.  
  10. <br/><br/>
  11.    <!--Start RelatedTopics Section-->
  12. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  13.  
  14.             <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>
  15.  
  16.             <br/><br/>
  17.             <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>
  18.             <div style="display:block; overflow:hidden;"> 
  19.                 <div style="width: 50%; float:left; display:inline-block">
  20.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  21.                         <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>
  22.                         <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>
  23.                         <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>
  24.                         <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>
  25.                         <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>
  26.                     </ul>
  27.             </div>
  28.  
  29.             <div style="width: 50%; float:left; display:inline-block">
  30.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  31.                         <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>
  32.                         <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>
  33.                         <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>
  34.                         <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>
  35.                         <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>
  36.                     </ul>
  37.                 </div>
  38.                <div style="clear:both;"></div> 
  39.                <br/>
  40.                 <div class="youtubeIcon">
  41.                     <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>
  42.                 </div>
  43.     </div>
  44.  
  45. </div>
  46.  
  47.   <!--End RelatedTopics Section-->
  48.  
  49.     </lightning-card>
  50. </template>

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

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

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

wireDecoratorsDataTable.js [LWC JavaScript File]

  1.   import { api, LightningElement, track, wire } from 'lwc';
  2. import getAccountList from '@salesforce/apex/lwcAppExampleApex.getAccountList';
  3.  
  4. import {NavigationMixin} from 'lightning/navigation';
  5.  
  6. export default class wireDecoratorsDataTable extends NavigationMixin (LightningElement) {
  7.   @api title;
  8.   @api greetings;
  9.   @track greeting;
  10.  
  11.     //Using @wire decorator in lwc for the lightning data table
  12.     @track accData;
  13.     @track errorAccData;     
  14.  
  15.     @track columnTable =[
  16.         {label:'Name',fieldName:'Name',type:'text'},
  17.         {label:'Phone',fieldName:'Phone',type:'text'},
  18.         {label:'Industry',fieldName:'Industry',type:'text'},
  19.     ];
  20.  
  21.     @wire(getAccountList)
  22.  
  23.     dataTableAcc({data, error}){
  24.          if(data){
  25.            this.accData = data;
  26.         }
  27.         else if(error){
  28.           this.errorAccData = error;  
  29.         }
  30.  
  31.     }
  32.  
  33. }

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

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

wireDecoratorsDataTable.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.       </targets>
  10.       <targetConfigs>
  11.          <targetConfig targets="lightning__AppPage">
  12.            <property name="title" type="string"/>
  13.            <property name="greetings" type="string"/>
  14.          </targetConfig>
  15.       </targetConfigs>
  16. </LightningComponentBundle>

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

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

lwcAppExampleApex.cls [Apex Class]

  1.    public WITH sharing class lwcAppExampleApex {
  2.  
  3.     @AuraEnabled (cacheable=TRUE)
  4.     public static List<Account> getAccountList(){
  5.         List<Account> accList = [SELECT Id, Name, Phone, Industry FROM Account WHERE Name !=NULL LIMIT 5];
  6.         RETURN accList;
  7.     }   
  8.  
  9. }

@wire Decorators in LWC Fetching Account records -- w3web.net

Further post that would you like to learn in Salesforce

 

 

FAQ (Frequently Asked Questions)

How do you use a wire decorator in LWC?

When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method. We need to import the @salesforce/apex scoped module into JavaScript controller class. import apexMethodName from '@salesforce/apex/Namespace.

What is wire adapter in LWC?

Lightning web components(LWC) use a reactive wire service, which is built on Lightning Data Service. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api modules and also to call the apex controller server-side methods using wire services.

What is @API @track and @wire?

To track a private property's value and re-render a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties. @wire. To read Salesforce data, Lightning web components use a reactive wire service.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration



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