First, you will need to create a LWC component that queries the Account object and retrieves the accounts. You can use the @wire decorator to wire the component to the Apex method that retrieves the accounts.
import { LightningElement, wire } from 'lwc'; import { getObjectInfo } from 'lightning/uiObjectInfoApi'; import { getRecord } from 'lightning/uiRecordApi'; import getAccounts from '@salesforce/apex/AccountController.getAccounts';
export default class TopAccounts extends LightningElement { @wire(getAccounts) accounts; }
Then, in the Apex class, you can create a method called getAccounts which queries the accounts and sorts them by the amount field in descending order. You can use the LIMIT clause to retrieve only the top 3 accounts.
public with sharing class AccountController { @AuraEnabled(cacheable=true) public static List<Account> getAccounts() { return [SELECT Id, Name, Amount__c FROM Account ORDER BY Amount__c DESC LIMIT 3]; } }
Finally, in the HTML template of the component, you can use a template for:each to iterate over the accounts and display the top 3 accounts with the highest amount. <template> <template if:true={accounts.data}> <template for:each={accounts.data} for:item="account"> <div key={account.Id}> <p>{account.Name} - {account.Amount__c}</p> </div> </template> </template> </template>
When I did like this each icon comes upper then each acount. when I remove the <p> line between the icon lines that time I can not seen the account name.
How can I show the same line each icon and each account. thank you again.
<template>
<lightning-card title="TOP DONORS" icon-name="standard:reward">
<div class="slds-var-m-around_medium">
<template if:true={accounts.data}>
<table>
<tbody>
<tr>
<td>
<lightning-icon icon-name="standard:thanks" size="small" class="slds-var-m-around_medium">
</lightning-icon>
</td>
<td>{account.Name} - {account.Total_Donation__c}</td>
</tr>
</tbody>
</table>
</template>
</div>
</lightning-card>
</template>
All Answers
First, you will need to create a LWC component that queries the Account object and retrieves the accounts. You can use the @wire decorator to wire the component to the Apex method that retrieves the accounts.
import { LightningElement, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getRecord } from 'lightning/uiRecordApi';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
export default class TopAccounts extends LightningElement {
@wire(getAccounts) accounts;
}
Then, in the Apex class, you can create a method called getAccounts which queries the accounts and sorts them by the amount field in descending order. You can use the LIMIT clause to retrieve only the top 3 accounts.
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, Amount__c FROM Account ORDER BY Amount__c DESC LIMIT 3];
}
}
Finally, in the HTML template of the component, you can use a template for:each to iterate over the accounts and display the top 3 accounts with the highest amount.
<template>
<template if:true={accounts.data}>
<template for:each={accounts.data} for:item="account">
<div key={account.Id}>
<p>{account.Name} - {account.Amount__c}</p>
</div>
</template>
</template>
</template>
Goodluck
<template>
<lightning-card title="TOP DONORS" icon-name="standard:reward">
<div class="slds-var-m-around_medium">
<template if:true={accounts.data}>
<template for:each={accounts.data} for:item="account">
<div key={account.Id}>
<lightning-icon icon-name="standard:thanks" size="small" class="slds-var-m-around_medium">
</lightning-icon>
<p>{account.Name} - {account.Total_Donation__c}</p>
</div>
</template>
</template>
</div>
</lightning-card>
</template>
When I did like this each icon comes upper then each acount. when I remove the <p> line between the icon lines that time I can not seen the account name.
How can I show the same line each icon and each account. thank you again.
<template>
<lightning-card title="TOP DONORS" icon-name="standard:reward">
<div class="slds-var-m-around_medium">
<template if:true={accounts.data}>
<table>
<tbody>
<tr>
<td>
<lightning-icon icon-name="standard:thanks" size="small" class="slds-var-m-around_medium">
</lightning-icon>
</td>
<td>{account.Name} - {account.Total_Donation__c}</td>
</tr>
</tbody>
</table>
</template>
</div>
</lightning-card>
</template>