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
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : wireDecoratorsDataTable.html
SFDX:Lightning Web Component >> New >> wireDecoratorsDataTable.html
wireDecoratorsDataTable.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 |
<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="standard:account" size="small"></lightning-icon> @wire Decorators in Lightning web components with apex method @AuraEnabled (cacheable=true) </h3> <lightning-datatable data={accData} columns={columnTable} key-field="Id"></lightning-datatable> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : wireDecoratorsDataTable.js
SFDX:Lightning Web Component >> New >> wireDecoratorsDataTable.js
wireDecoratorsDataTable.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { api, LightningElement, track, wire } from 'lwc'; import getAccountList from '@salesforce/apex/lwcAppExampleApex.getAccountList'; import {NavigationMixin} from 'lightning/navigation'; export default class wireDecoratorsDataTable extends NavigationMixin (LightningElement) { @api title; @api greetings; @track greeting; //Using @wire decorator in lwc for the lightning data table @track accData; @track errorAccData; @track columnTable =[ {label:'Name',fieldName:'Name',type:'text'}, {label:'Phone',fieldName:'Phone',type:'text'}, {label:'Industry',fieldName:'Industry',type:'text'}, ]; @wire(getAccountList) dataTableAcc({data, error}){ if(data){ this.accData = data; } else if(error){ this.errorAccData = error; } } } |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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> </targets> <targetConfigs> <targetConfig targets="lightning__AppPage"> <property name="title" type="string"/> <property name="greetings" type="string"/> </targetConfig> </targetConfigs> </LightningComponentBundle> |
Step 5:- Create Lightning Web Component : lwcAppExampleApex.cls
SFDX:Create Apex Class >> New >> lwcAppExampleApex.cls
lwcAppExampleApex.cls [Apex Class]
1 2 3 4 5 6 7 8 9 |
public with sharing class lwcAppExampleApex { @AuraEnabled (cacheable=true) public static List<Account> getAccountList(){ List<Account> accList = [Select Id, Name, Phone, Industry From Account Where Name !=null limit 5]; return accList; } } |
Further post that would you like to learn in LWC
Great work and very useful information.
thanks.