Apex Class :
public with sharing class AccountsAndContactsTabelLWCCtr {
public AccountsAndContactsTabelLWCCtr() {
}
@AuraEnabled(cacheable=true)
public static List<contact> getAccsAndCons(){
try {
return [select id, Name, Email, Accountid, Account.Name from contact where email != null limit 20 ];
} catch (Exception e) {
throw new AuraHandledException(e.getMessage());
}
}
}
meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
JS :
import { LightningElement ,api, wire, track} from 'lwc';
import getAccsCons from '@salesforce/apex/AccountsAndContactsTabelLWCCtr.getAccsAndCons'
const columns = [
{ label: 'Contact Name', fieldName: 'Name' },
{ label: 'Contact Email', fieldName: 'Email' },
{ label: 'Account Name', fieldName: 'AccName' }
];
export default class AccountsAndContactsTabelLWC extends LightningElement {
@api recordId;
@track records;
@track dataNotFound;
columns = columns;
@wire (getAccsCons)
wireRecord({data,error}){
if(data){
let tempRecords = JSON.parse( JSON.stringify( data ) );
console.log('tempRecords : '+tempRecords);
tempRecords = tempRecords.map( row => {
console.log('Email : '+row.Email);
return {Name: row.Name,Email: row.Email, AccName: ( row.Account ? row.Account.Name : null ) };
})
this.records = tempRecords;
console.log('Data : '+tempRecords);
this.error = undefined;
this.dataNotFound = '';
if(this.records == ''){
this.dataNotFound = 'There is no Contact found related to Account name';
}
}else{
this.error = error;
this.data=undefined;
}
}
}
HTML:
<template>
<lightning-card variant="narrow" icon-name="standard:account" title="Contacts">
<lightning-datatable
key-field="Id"
data={records}
columns={columns}
hide-checkbox-column="false">
</lightning-datatable>
</lightning-card>
</template>
