Hey guys, today in this post we are going to learn about How to Fetching Account Records From @wire Decorators in Lightning Web Components with Apex Method “@AuraEnabled (cacheable=true)” in The Table Format
Files we used in this post example:-
getDataWireDecoratorsWithTable.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
getDataWireDecoratorsWithTable.js |
Lightning Web Component JavaScript | It is hold @wire Decorators load functionality. |
getDataWireDecoratorsWithTable.css |
Lightning Web Component JavaScript | It is used for table border and padding alignment. |
getDataWireDecoratorsWithTable.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 : getDataWireDecoratorsWithTable.html
SFDX:Lightning Web Component >> New >> getDataWireDecoratorsWithTable.html
getDataWireDecoratorsWithTable.html [Lightning Web Component HTML]
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 |
<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> <table class="tblColPad" border="1" cellpadding="5" cellspacing="5" bordercolor="#ccc" style="border-collapse:collapse;"> <thead> <tr> <th>Name</th> <th>Phone</th> <th>Industry</th> </tr> </thead> <tbody> <template for:each={accData} for:item="accItem"> <tr key={accItem.Id}> <td>{accItem.Name}</td> <td>{accItem.Phone}</td> <td>{accItem.Industry}</td> </tr> </template> </tbody> </table> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : getDataWireDecoratorsWithTable.js
SFDX:Lightning Web Component >> New >> getDataWireDecoratorsWithTable.js
getDataWireDecoratorsWithTable.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 |
import { api, LightningElement, track, wire } from 'lwc'; import getAccountList from '@salesforce/apex/lwcAppExampleApex.getAccountList'; import {NavigationMixin} from 'lightning/navigation'; export default class getDataWireDecoratorsWithTable extends NavigationMixin (LightningElement) { @api title; @api greetings; @track greeting; //Using @wire decorator for fatching the data from account @track accData; @track errorData; @wire(getAccountList) dataRecord({data, error}){ if(data){ this.accData = data; } else if(error){ this.errorData = error; } } } |
Step 3:- Create Lightning Web Component : getDataWireDecoratorsWithTable.js-meta.xml
SFDX:Lightning Web Component >> New >> getDataWireDecoratorsWithTable.js-meta.xml
getDataWireDecoratorsWithTable.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 4:- Create Lightning Web Component : getDataWireDecoratorsWithTable.css
SFDX:Lightning Web Component >> New >> getDataWireDecoratorsWithTable.css
getDataWireDecoratorsWithTable.css [LWC Meta Data XML]
1 2 |
table.tblColPad th{background:#ddd;} table.tblColPad th, table.tblColPad td {padding:5px !important;} |
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
Hi. your post is so nice and I really loved reading your post.
It was very well authored and easy to understand. Great Thanks for sharing awesome info. I really love to read your blog.
Great work and nice Information.
Thanks.