Notes
HTML
<template>
<lightning-card title="Account Selection">
<lightning-combobox
label="Select an Account"
value={selectedAccountId}
placeholder="Choose an Account"
options={accounts}
onchange={handleAccountChange}>
</lightning-combobox>
</lightning-card>
<template if:true={selectedAccountId}>
<lightning-card title="Related Records">
<lightning-tabset>
<!-- Contacts Tab -->
<lightning-tab label="Contacts" id="contacts">
<template if:true={contacts}>
<template for:each={contacts} for:item="contact">
<p key={contact.Id}><strong>{contact.Name}</strong> - {contact.Email}</p>
</template>
</template>
<template if:false={contacts}>
<p>No contacts found.</p>
</template>
</lightning-tab>
<!-- Opportunities Tab -->
<lightning-tab label="Opportunities" id="opportunities">
<template if:true={opportunities}>
<template for:each={opportunities} for:item="opp">
<p key={opp.Id}><strong>{opp.Name}</strong> - {opp.StageName} - ${opp.Amount}</p>
</template>
</template>
<template if:false={opportunities}>
<p>No opportunities found.</p>
</template>
</lightning-tab>
<!-- Cases Tab -->
<lightning-tab label="Cases" id="cases">
<template if:true={cases}>
<template for:each={cases} for:item="caseRec">
<p key={caseRec.Id}><strong>Case {caseRec.CaseNumber}</strong> - {caseRec.Status} - {caseRec.Subject}</p>
</template>
</template>
<template if:false={cases}>
<p>No cases found.</p>
</template>
</lightning-tab>
</lightning-tabset>
</lightning-card>
</template>
</template>
JavaScript
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountRelatedDataController.getAccounts';
import getRelatedRecords from '@salesforce/apex/AccountRelatedDataController.getRelatedRecords';
export default class AccountRelatedAccordion extends LightningElement {
@track accounts = [];
selectedAccountId;
contacts = [];
opportunities = [];
cases = [];
@wire(getAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data.map(acc => ({ label: acc.Name, value: acc.Id }));
} else if (error) {
console.error('Error fetching accounts:', error);
}
}
handleAccountChange(event) {
this.selectedAccountId = event.detail.value;
this.fetchRelatedData();
}
fetchRelatedData() {
if (!this.selectedAccountId) return;
getRelatedRecords({ accountId: this.selectedAccountId })
.then(data => {
this.contacts = data.Contacts || [];
this.opportunities = data.Opportunities || [];
this.cases = data.Cases || [];
})
.catch(error => {
console.error('Error fetching related records:', error);
});
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Apex
public with sharing class AccountRelatedDataController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name FROM Account];
}
@AuraEnabled(cacheable=true)
public static Map<String, List<Object>> getRelatedRecords(String accountId) {
Map<String, List<Object>> relatedData = new Map<String, List<Object>>();
relatedData.put('Contacts', [SELECT Id, Name, Email FROM Contact WHERE AccountId = :accountId]);
relatedData.put('Opportunities', [SELECT Id, Name, StageName, Amount FROM Opportunity WHERE AccountId = :accountId]);
relatedData.put('Cases', [SELECT Id, CaseNumber, Status, Subject FROM Case WHERE AccountId = :accountId]);
return relatedData;
}
}