SCENARIO :
While working on one of the requirements for a health sector project for a client based out of Melbourne, Australia there was a requirement to display records with its lookup object fields in the lightning data table.
APPROACH :
As the requirement is pretty straightforward, The client wants an LWC to display contact records with its related Account record(Parent) value on Lightning Data Table.
There are some limitations to using the standard Lightning Data table like we can not have a lookup field to directly resemble to display in the column.
In this blog, We will see how we can display Lookup fields in Lightning Data Table.
Let's jump with the example, Here we will display the Contact object records with the lookup object field Account Name.
DataTableLwcController.cls
public without sharing class DataTableLwcController { @AuraEnabled(cacheable=true) public static list<Contact> getRecords(){ return [SELECT Id,Name,AccountId,Account.Name,Phone,Email FROM contact WHERE AccountId != null LIMIT 10 ]; } }
The response that we will get from the apex method is a nested object. The response looks as below.
{
"Id": "0032x000004N3PxAAK",
"Name": "Rose Gonzalez",
"Phone": "(512) 757-6000",
"Email": "rose@edge.com",
"AccountId": "0012x000006F1iAAAS",
"Account": {
"Name": "Edge Communications",
"Id": "0012x000006F1iAAAS"
}
}
To display lookup object fields, we need to resemble the response in the same object as below.
{
"Id": "0032x000004N3PxAAK",
"Name": "Rose Gonzalez",
"Phone": "(512) 757-6000",
"Email": "rose@edge.com",
"AccountId": "0012x000006F1iAAAS",
"AccountName": "Edge Communications",
"ContactLink":"/0032x000004N3PxAAK",
"AccountLink":"/0012x000006F1iAAAS",
"Account": {
"Name": "Edge Communications",
"Id": "0012x000006F1iAAAS"
}
}
Okay! Let's see in the js code how we can resemble the response.
let tempRecords = JSON.parse(JSON.stringify(data)); tempRecords = tempRecords.map(row => { return { ...row, AccountName: row.Account.Name, ContactLink:'/'+row.Id, AccountLink:'/'+row.AccountId };
Below is our Lightning web Component
dataTableLwcExample.html
<template> <lightning-card title="Contacts" icon-name="standard:contact"> <lightning-datatable data={contacts} columns={columns} key-field="Id" hide-checkbox-column='true' show-row-number-column="true"> </lightning-datatable> </lightning-card> </template>
dataTableLwcExample.js
import { LightningElement , track , wire } from 'lwc'; import getRecords from '@salesforce/apex/DataTableLwcController.getRecords'; export default class DataTableLwcExample extends LightningElement { @track contacts; @track columns = [ { label: 'Name', fieldName: 'ContactLink', type: 'url' , typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'} }, { label: 'Phone', fieldName: 'Phone', type: 'phone' }, { label: 'Email', fieldName: 'Email', type: 'Email' }, { label: 'Account', fieldName: 'AccountLink', type: 'url', typeAttributes: {label: { fieldName: 'AccountName' }, target: '_blank'}, cellAttributes: { iconName: 'standard:account' } } ]; //wiring an apex method to a function @wire(getRecords) WireAssignmentRecords({ data }) { if (data) { let tempRecords = JSON.parse(JSON.stringify(data)); console.log(tempRecords); //binding the data into the same object tempRecords = tempRecords.map(row => { return { ...row, AccountName: row.Account.Name, ContactLink:'/'+row.Id, // Creating URL for Contact AccountLink:'/'+row.AccountId // Creating URL for Account }; }) //Assign tempRecords to the contacts this.contacts = tempRecords; } } }
Our Lightning Web Component looks like as below,
Output:-
If you have any questions you can reach out our Salesforce Consulting team
here.
.png)
.png)
.png)
