Lesson: 30 | Display Related Records in Tabs Based on Selected Account

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