Hey guys, today in this post we are going to learn about How to Call an apex method imperatively and fetching contact record from database without @wire through lightning data-table in LWC.
Files we used in this post example:-
lwcFetchContactRecord.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
lwcFetchContactRecord.js | Lightning Web Component JavaScript | It is importing Apex Class, Apex method, Object and fields from "@salesforce/apex/" |
lwcFetchContactRecord.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 call apex method imperatively in LWC Javascript file. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : lwcFetchContactRecord
SFDX:Lightning Web Component >> New >> lwcFetchContactRecord
lwcFetchContactRecord [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:contact" size="small"></lightning-icon> Fetching contact record from apex method without @wire </h3> <lightning-datatable data={contactData} columns={contactTable} key-field="Id"></lightning-datatable> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : lwcFetchContactRecord.js
SFDX:Lightning Web Component >> New >> lwcFetchContactRecord.js
lwcFetchContactRecord.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 |
import { api, LightningElement, track } from 'lwc'; import getContactList from '@salesforce/apex/lwcAppExampleApex.getContactList'; import {NavigationMixin} from 'lightning/navigation'; export default class lwcFetchContactRecord extends NavigationMixin (LightningElement) { @api title; @api greetings; @track contactData; @track conError; @track contactTable = [ {label:'First Name', fieldName:'FirstName', type:'text'}, {label:'Last Name', fieldName:'LastName', type:'text'}, {label:'Phone', fieldName:'Phone', type:'text'}, {label:'Email', fieldName:'Email', type:'email'}, ]; connectedCallback(){ getContactList() .then(result =>{ this.contactData = result; }) .catch(error =>{ this.conError=error; }); } } |
Step 3:- Create Lightning Web Component : lwcFetchContactRecord.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcFetchContactRecord.js-meta.xml
lwcFetchContactRecord.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 Apex Controller : 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 public static List<Contact> getContactList(){ List<Contact> conList = [Select Id, FirstName, LastName, Email, Phone From Contact Where Email !=null ]; return conList; } } |
Further post that would you like to learn in LWC
Good Information
5 Internet Approval Site (Do Follow Backlinks)
Really good.
Yes follow me