Imagine you have a datatable displaying a list of Contact records, and one of the columns shows the Account Name. The Account Name is a hyperlink that allows users to navigate to the Account record page. But what if users want to take a quick glance at some key Account fields—like Phone or Address—without navigating to the Account record?
In Salesforce Classic, this was achieved using the Mini Page Layout feature from standard page. However, in Lightning Experience, we can implement a similar feature by adding a tooltip to the data table.
Solution Overview:
We’ll create a Lightning Web Component (LWC) that:
- Displays a data table with a clickable Account Name.
- Provides a tooltip that shows the Account's Phone and Address fields when users hover over the Account Name.
Implementation Steps:
1. Data Preparation
We need to retrieve the following fields for each Contact and its associated Account:
- Contact Fields: Name, Phone, Email
- Account Fields: Name, Phone, Billing Address
The data will be fetched using an Apex controller.
2. Data table Configuration
The Account Name column in the data table will be configured as a hyperlink using the url type. A tooltip will be added using the tooltip property.
3. Tooltip Implementation
The tooltip content will be dynamically set based on the Account's Phone and Address.
Apex Class : Retrieve list of contacts records.
/**
* @File Name : ContactsController.cls
* @Description :
* @Author : Asish Behera
* @Last Modified By :
* @Last Modified On : January 17, 2025
* @Modification Log :
*==============================================================================
* Ver | Date | Author | Modification
*==============================================================================
* 1.0 | January 17, 2025 | | Initial Version
**/
public class ContactsController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContacts(){
return [SELECT Id,Name,Phone,Email,AccountId,Account.Name,Account.Phone,
Account.BillingStreet,Account.BillingCity,Account.BillingState,
Account.BillingpostalCode
FROM Contact
LIMIT 10 ];
}
}
LWC Java Script Code
import { LightningElement,wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactsController.getContacts';
const columns = [
{label: 'Contact Name',fieldName:'Name',type:'Text'},
{label: 'Phone',fieldName:'Phone',type:'phone'},
{label: 'Email',fieldName:'Email',type:'email'},
{
label: 'Account Name',
fieldName: 'AccountUrl', // The field containing the URL
type: 'url', // Specifies the field type as a URL
typeAttributes: {
label: { fieldName: 'AccountName' }, // Specifies the visible label
target: '_blank', // Opens the link in a new tab
tooltip: { fieldName: 'accountToolTip' }, // Tooltip content
},
},
]
export default class ToolTipExample extends LightningElement {
contacts = [];
error
columns = columns;
@wire(getContacts)
wiredContacts({ error, data }) {
if (data) {
console.log('Data:', JSON.stringify(data));
// Transform data for the datatable
this.contacts = data.map((item) => ({
...item,
AccountName: item.Account.Name, // Set Account Name
AccountUrl: `/lightning/r/Account/${item.AccountId}/view`, // Create URL to Account
accountToolTip: `Phone : ${item.Account.Phone}\nAddress : ${item.Account.BillingStreet},
${item.Account.BillingCity}, ${item.Account.BillingState}`, // Tooltip text
}));
this.error = undefined;
} else if (error) {
this.error = error;
this.contacts = undefined;
console.log(' this.error==='+JSON.stringify( this.error));
}
}
}
LWC HTML Code
<template>
<lightning-card title="Contacts Table With ToolTip">
<lightning-datatable key-field="Id" data={contacts}
hide-checkbox-column columns={columns} >
</lightning-datatable>
</lightning-card>
</template>
Keep Learning and Exploring !. If you have questions please fill free to add comments.
