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
fatih dokuyucufatih dokuyucu 

How can I show dynamically top 3 biggest amount of accounts in LWC?

Best Answer chosen by fatih dokuyucu
Hitesh chaudhariHitesh chaudhari
Try to use this code 


<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

Shri RajShri Raj

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

fatih dokuyucufatih dokuyucu
Thank you Shri. It would be very helpfull. By the way I want to add an icon front of the each account. 

<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.
Hitesh chaudhariHitesh chaudhari
Try to use this code 


<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>
This was selected as the best answer
fatih dokuyucufatih dokuyucu
Thank you Hitesh it would be very helpfull.