0

I have created the Aura Lightning component for showing the List of products with pagination and search box. The search box works good for the fewer data but while searching in a large amount of data(above 100 thousand records) its freezes the screen, the below popup appears on the screen:

[1]: https://i.stack.imgur.com/EiHDc.png

Component Code:

<aura:component controller="AddOppLineItemsController" implements="force:hasRecordId,lightning:actionOverride,lightning:hasPageReference,force:lightningQuickActionWithoutHeader">

    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                    <!--header checkbox for select all-->
                        <th style="width:3.25rem;" class="slds-text-align_right">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <label class="slds-checkbox">
                                        <ui:inputCheckbox disabled="{!v.totalRecordsCount == 0}"
                                                          aura:id="selectAllId"
                                                          change="{!c.selectAllCheckbox}"/>
                                        <span class="slds-checkbox_faux"></span>
                                        <span class="slds-form-element__label"></span>
                                    </label>
                                </div>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Name">Product Name</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Phone">Product Code</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Type">Product Description</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.PaginationList}" var="obj">
                        <tr>
                            <th scope="row" class="slds-text-align_right" style="width:3.25rem;">
                                <div class="slds-form-element">
                                    <div class="slds-form-element__control">
                                        <label class="slds-checkbox">
                                            <ui:inputCheckbox text="{!obj.objProduct.Id}"
                                                              value="{!obj.isChecked}"
                                                              change="{!c.checkboxSelect}"/>
                                            <span class="slds-checkbox_faux"></span>
                                            <span class="slds-form-element__label text"></span>
                                        </label>
                                    </div>
                                </div>
                            </th>
                            <th scope="row">
                                <div class="slds-truncate" title="{!obj.objProduct.Name}">
                                    {!obj.objProduct.Name}
                                </div>
                            </th> 
                            <th scope="row">
                                <div class="slds-truncate" title="{!obj.objProduct.Product_Code__c}">
                                   {!obj.objProduct.Product_Code__c}
                                </div>
                            </th>
                            <th scope="row">
                                <div class="slds-truncate" title="{!obj.objProduct.Description}">
                                    {!obj.objProduct.Description}
                                </div>
                            </th>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
</aura:component>

Client Side Controller Code:

searchTable: function (component, event, helper) {
        
        component.set("v.showSpinner",true);
        var allRecords = component.get("v.allData");
        console.log('allRecords '+JSON.stringify(allRecords));
        var searchFilter = event.getSource().get("v.value").toUpperCase();
        
        console.log('searchFilter '+searchFilter);
        var tempArray =[];
        var i;
        for(i=0; i<allRecords.length; i++){
            if((allRecords[i]["objProduct"].Name && allRecords[i]["objProduct"].Name.toUpperCase().indexOf(searchFilter) != -1) || 
               (allRecords[i]["objProduct"].Product_Code__c && allRecords[i]["objProduct"].Product_Code__c.toUpperCase().indexOf(searchFilter) != -1)){
                tempArray.push(allRecords[i]);
            }
        }
        
        console.log('tempArray '+JSON.stringify(tempArray));
            component.set('v.listOfAllProducts', tempArray);
            var pageSize = component.get("v.pageSize");
            var totalRecordsList = tempArray;
            var totalLength = totalRecordsList.length ;
            component.set("v.totalRecordsCount", totalLength);
            component.set("v.startPage",0);
            component.set("v.endPage",pageSize-1);
                    
                    var PaginationLst = [];
                    for(var i=0; i < pageSize; i++){
                        if(component.get("v.listOfAllProducts").length > i){
                            PaginationLst.push(tempArray[i]);    
                        } 
                    }
                    component.set('v.PaginationList', PaginationLst);
                    component.set("v.selectedCount" , 0);
                    //use Math.ceil() to Round a number upward to its nearest integer
                    component.set("v.totalPagesCount", Math.ceil(totalLength / pageSize));
        component.set("v.showSpinner",false);
        //component.set("v.PaginationList",tempArray);
 }

Server Side Controller Code:

public class AddOppLineItemsController {
    
     @AuraEnabled 
    public static List<productListWrapper> fetchAccountWrapper(){     
        List<productListWrapper> lstproductListWrapper = new List<productListWrapper>();
      
        for(Product2 pr : [Select id,Name,Product_Code__c,Description From Product2])
        {
                              
         lstproductListWrapper.add(new productListWrapper(false,pr));
            
        } 
       
        return lstproductListWrapper; 
    }
    
    
    public class productListWrapper {
        @AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Product2 objProduct{get;set;}
        public productListWrapper(boolean isChecked, Product2 objProduct){
            this.isChecked = isChecked;
            this.objProduct = objProduct;
        }
    }
}

Any help would be appreciated!!

1

As you have more than 50 thousand records the query will not work in the first place(50K record limit). As you didn't specify anywhere clause. You need to do the selective query here.

Also, it doesn't make sense to display all the product records on the screen, it's overwhelming for users and bad for performance. You need to filter the records on the server-side using the SOQL/SOSL.

IMO As you are searching the records you need to use SOSL, and filter the records at the server-side and return the result in the component. However, you can use SOQL if SOSL does not suit your requirements.

If you want you can also apply some filters on the client side. And, you can call the apex the function onclick of the button or onkeyup event of the search input box.

I have written an article on Filtered & Searchable datatable in Lightning web components. You can also implement the same in Aura Components.

1
  • Thank you very much, Rahul, for your valuable response. I will definitely follow your suggestions.
    – jsmith
    Jun 22 at 5:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.