Accordion Cases and Contacts

<template>
<lightning-accordion>
<template for:each={accounts} for:item="account">
<lightning-accordion-section key={account.Id} label={account.Name}>
<template for:each={account.Contacts} for:item="contact">
<div key={contact.Id}>{contact.Name}</div>
</template>
<template for:each={account.Cases} for:item="myCase">
<div key={myCase.Id}>{myCase.Subject}</div>
</template>
</lightning-accordion-section>
</template>
</lightning-accordion>
</template>
import { LightningElement, wire } from 'lwc';
import getAccounts from
'@salesforce/apex/AccountControllerAccordion.getAccountsWithContactsAndCases';
export default class AccordionExample extends LightningElement {

accounts;
@wire(getAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data;
} else if (error) {
console.error(error);
}
}
}
public with sharing class AccountControllerAccordion {
@AuraEnabled(cacheable=true)
public static List<Account> getAccountsWithContactsAndCases() {
return [SELECT Id, Name, (SELECT Id, Name FROM Contacts), (SELECT Id,
Subject,CaseNumber FROM Cases) FROM Account LIMIT 10];
}
}
?????????????????????????????????????????????????????????????????????
showing only till data only..no expand and collapse for thte below code :
<template>
<div class="accounts">
<div key={account.Id}>
<div class="account-heading">{account.Name}</div>
<div class="account-details">
<div class="account-contacts">
<div class="contact-heading">Contacts:</div>
<div key={contact.Id} class="contact">{contact.Name}</div>
</template>
</div>
<div class="account-cases">
<div class="case-heading">Cases:</div>
<template for:each={account.Cases} for:item="myCase">
<div key={myCase.Id} class="case">{myCase.Subject}</div>
</template>
</div>
</div>
</div>
</template>
</div>
</template>

'@salesforce/apex/CaseController.getAccountsWithContactsAndCases';
export default class lec_treegrid_cases extends LightningElement {

accounts;
@wire(getAccounts)
if (data) {
} else if (error) {
}
}
}
public with sharing class CaseController {
Subject, CaseNumber FROM Cases) FROM Account LIMIT 10];
}
}
///////////////////////////////////////////////////////
displaying account and contacts and arrow as compared to above but no cases are
displaying :
<template>
<lightning-accordion-section key={account.Id} label={account.Name}
onsectiontoggle={handleAccountSectionClick}>
<lightning-accordion-section key={contact.Id}
label={contact.Name} data-contact-section={account.Id}>
<template for:each={contact.Cases} for:item="myCase">
<div key={myCase.Id}>{myCase.CaseNumber}</div>
</template>
</template>
</template>
</template>


accounts;
@wire(getAccounts)
if (data) {
// Modify the data to show contact cases instead of account cases
this.accounts.forEach(account => {
account.Contacts.forEach(contact => {
const contactCases = contact.Cases;
// Assign the cases to the contact instead of the account
contact.Cases = contactCases;
});
// Remove the Cases property from the account object
delete account.Cases;
});
} else if (error) {
}
}
}

Subject,CaseNumber FROM Cases) FROM Account LIMIT 10];
}
}
//////???
///////////////////////////////////////////////////
showing 8 empty fields
<template>
<lightning-accordion-section key={account.Id} label={account.Name}
onsectiontoggle={handleAccountSectionClick}>
<lightning-accordion-section key={contact.Id}
label={contact.Name} data-contact-section={account.Id}>
<template for:each={caseList} for:item="caseRecord">
<lightning-accordion-section key={caseRecord.Id}
name={caseRecord.CaseNumber} label={CaseDetails} >
<p>CaseNumber: {caseRecord.CaseNumber}</p>
<p>ContactId: {caseRecord.ContactId}</p>
<p>Priority: {caseRecord.Priority}</p>
<p>Status: {caseRecord.Status}</p>
</template>
</template>
</template>
</template>
import getCaseList from '@salesforce/apex/AccountControllerAccordion.getCaseList';

accounts;
@wire(getAccounts)
if (data) {
// Modify the data to show contact cases instead of account cases
this.accounts.forEach(account => {
account.Contacts.forEach(contact => {
const contactCases = contact.Cases;
// Assign the cases to the contact instead of the account
contact.Cases = contactCases;
});
// Remove the Cases property from the account object
delete account.Cases;
});
} else if (error) {
}
}
caseList = [];
@wire(getCaseList)
wiredGetCaseList({ error, data }) {
if (data) {
this.caseList = data;
} else if (error) {
}
}
}
Subject,CaseNumber FROM Cases) FROM Account ];
public static List<Case> getCaseList(Id contactId) {
List<Case> caseList = new List<Case>();
// Query cases related to the contact
caseList = [SELECT Id, CaseNumber, ContactId, Priority, Status FROM Case
WHERE ContactId = :contactId];
return caseList;
}

Accordion Cases and Contacts

Uploaded by

Copyright:

Available Formats

Accordion Cases and Contacts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Accordion Cases and Contacts

Uploaded by

Copyright:

Available Formats

<template>

export default class AccordionExample extends LightningElement {

import { LightningElement, wire } from 'lwc';

export default class lec_treegrid_cases extends LightningElement {

import { LightningElement, wire } from 'lwc';

export default class AccordionExample extends LightningElement {

public with sharing class AccountControllerAccordion {

export default class AccordionExample extends LightningElement {

You might also like