function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Josephine ButJosephine But 

LWC - display related contacts that associated with an account

Hi,
  I am new in writing LWC. Just wondering how to display related contacts that associated with an account with datatable. ANy example is appreciated.

Thanks,
    Jo
Best Answer chosen by Josephine But
Arun Kumar 1141Arun Kumar 1141

Hi Josephine,

You can easily display contacts related to account. Below is the reference code to that:

HTML file:

<!-- contactList.html -->
<template>
    <lightning-card title="Related Contacts">
        <lightning-datatable
            key-field="Id"
            data={contacts}
            columns={columns}
            hide-checkbox-column="true">
        </lightning-datatable>
    </lightning-card>
</template>
Javascript file:
// contactList.js
import { LightningElement, wire, api } from 'lwc';
import getRelatedContacts from '@salesforce/apex/ContactController.getRelatedContacts';

export default class ContactList extends LightningElement {
    @api recordId; // Id of the current Account record

    columns = [
        { label: 'Name', fieldName: 'Name', type: 'text' },
        { label: 'Email', fieldName: 'Email', type: 'email' },
        // Add more columns as needed
    ];

    contacts = [];

    @wire(getRelatedContacts, { accountId: '$recordId' })
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
        } 
    }
}
Apex Controller:
// ContactController.cls
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId) {
        return [SELECT Id, Name, Email, ... FROM Contact WHERE AccountId = :accountId];
    }
}

I hope this will help you.

Thanks!

All Answers

VinayVinay (Salesforce Developers) 
Hi Josephine,

Checke below examples that can help you to display related contacts that associated with an account with datatable.

https://developer.salesforce.com/forums/?id=9062I000000DLDKQA4
https://salesforcecodes.com/display-related-contacts-when-click-on-account-record-using-lightning-component/

Please mark as Best Answer if above information was helpful.

Thanks,
Arun Kumar 1141Arun Kumar 1141

Hi Josephine,

You can easily display contacts related to account. Below is the reference code to that:

HTML file:

<!-- contactList.html -->
<template>
    <lightning-card title="Related Contacts">
        <lightning-datatable
            key-field="Id"
            data={contacts}
            columns={columns}
            hide-checkbox-column="true">
        </lightning-datatable>
    </lightning-card>
</template>
Javascript file:
// contactList.js
import { LightningElement, wire, api } from 'lwc';
import getRelatedContacts from '@salesforce/apex/ContactController.getRelatedContacts';

export default class ContactList extends LightningElement {
    @api recordId; // Id of the current Account record

    columns = [
        { label: 'Name', fieldName: 'Name', type: 'text' },
        { label: 'Email', fieldName: 'Email', type: 'email' },
        // Add more columns as needed
    ];

    contacts = [];

    @wire(getRelatedContacts, { accountId: '$recordId' })
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
        } 
    }
}
Apex Controller:
// ContactController.cls
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(Id accountId) {
        return [SELECT Id, Name, Email, ... FROM Contact WHERE AccountId = :accountId];
    }
}

I hope this will help you.

Thanks!

This was selected as the best answer