Salesforce Consulting Blog

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.

Salesforce standard Lightning Data table is the most excellent table that is ready to utilize to show the record with interactive UI.

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;
            
        }
    }
}