Lightning Component with Custom Search and Sorting

-
Lightning aura component with custom search and sorting.

Screenshots: -






Component: -

<aura:component controller="getProducts">
<!--handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!--attributes-->
    <aura:attribute name="products" type="List" />
    
    <aura:attribute name="queryTerm" type="String" default="" />
    <aura:attribute name="isSearching" type="Boolean" default="false" />
    
    <aura:attribute name="sortBy" type="String" default="name" />
    <aura:attribute name="sortOrder" type="String" default="asc" />
    
    <aura:attribute name="showSpinner" type="Boolean" default="false" />
    
    <!--spinner-->
    <aura:if isTrue="{!v.showSpinner}">
        <lightning:spinner alternativeText="Loading" size="large" />
    </aura:if>
    
    <div class="slds-grid">
        <div class="slds-col slds-size_12-of-12">
            <div class="slds-float_left search-box">
                <lightning:input
                                 aura:id="enter-search"
                                 name="enter-search"
                                 class="slds-m-right_medium"
                                 label="Search Product"
                                 onchange="{!c. handleKeyUp}"
                                 isLoading="{!v. isSearching}"
                                 type="search"
                                 />
            </div>
        </div>
    </div>
    
    <!--product list-->
    <div class="slds-grid slds-m-top_medium">
        <div class="slds-col table-container">
            <!--table come here-->
            <table class="slds-table slds-table_bordered">
                <thead>
                    <tr>
                        <th width="40%">
                            <span class="slds-truncate slds-p-right_x-small" title="cMembers">Product</span>
                            <span><lightning:buttonIcon iconName="utility:arrowup" size="small" variant="bare" onclick="{!c.handleSorting}" alternativeText="Order" aura:id="name" name="name" class="btn-sort" /></span>
                        </th>
                        <th width="40%">
                            <span class="slds-truncate slds-p-right_x-small" title="cMembers">Category</span>
                        </th>
                        <th width="20%">
                            <span class="slds-truncate slds-p-right_x-small" title="cMembers">Amount</span>
                            <span><lightning:buttonIcon iconName="utility:arrowup" size="small" variant="bare" onclick="{!c.handleSorting}" alternativeText="Order" aura:id="amount" name="amount" class="btn-sort" /></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.products}" var="product">
                        <tr id="{!product.Id}">
                            <td class="slds-cell-wrap">
                                <div>{!product.Name}</div>
                            </td>
                            <td class="slds-cell-wrap">
                                <div>{!product.Category__c}</div>
                            </td>
                            <td class="slds-cell-wrap">
                                <div>{!product.Amount__c}</div>
                            </td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>
</aura:component>

Controller: -

({
doInit : function(component, event, helper) {
component.set('v.showSpinner', true);
        
        var queryTerm = component.get("v.queryTerm");
        
        var searchstring = queryTerm;
        var sortBy = component.get("v.sortBy");
        var sortOrder = component.get("v.sortOrder");
        
        var action = component.get("c.getProducts");
        
        action.setParams({"searchString": searchstring,
                          "sortby": sortBy,
                          "sortorder": sortOrder});
        
        action.setCallback(this, function(response){
            var state = response.getState();
            
            if(state == "SUCCESS") {
                var products = response.getReturnValue();
                component.set('v.products', products);
                
                component.set('v.showSpinner', false);
            }
        });
        $A.enqueueAction(action)
},
    
    handleKeyUp : function(component, event, helper) {
        var queryTerm = component.find('enter-search').get('v.value');
        component.set('v.queryTerm', queryTerm);
        component.set('v.isSearching', true);
        
        if(queryTerm.length>1 || queryTerm.length<1)
            helper.searchKey(component, event, helper, queryTerm);
        else
            component.set('v.isSearching', false);
    },
    
    handleSorting : function(component, event, helper) {
        var sortBtn = event.currentTarget;
        $A.util.toggleClass(sortBtn, 'sort-btn');
        $A.util.addClass(sortBtn, 'selected-btn');
        
        var sortByclicked = event.getSource().get("v.name");
        var currentSortBy = component.get('v.sortBy');
        
        //to reset arrow
        if(sortByclicked == 'name'){
            var cat = component.find('category');
            $A.util.removeClass(cat, 'sort-btn');
        $A.util.removeClass(cat, 'selected-btn');
            
var amnt = component.find('amount');
            $A.util.removeClass(amnt, 'sort-btn');
        $A.util.removeClass(amnt, 'selected-btn');            
        }
        else if(sortByclicked == 'amount'){
            var cat = component.find('category');
            $A.util.removeClass(cat, 'sort-btn');
        $A.util.removeClass(cat, 'selected-btn');
            
var nme = component.find('name');
            $A.util.removeClass(nme, 'sort-btn');
        $A.util.removeClass(nme, 'selected-btn');
        }
        
        var sortOrder = component.get('v.sortOrder');
        var queryTerm = component.get('v.queryTerm');
        
        if(sortByclicked != currentSortBy){
            component.set('v.sortBy', sortByclicked);
            component.set('v.sordOrder', 'desc');
            
            helper.searchKey(component, event, helper, queryTerm);
        }
        else{
            if(sortOrder == 'desc')
                component.set('v.sortOrder', 'asc');
            else if(sortOrder == 'asc')
                component.set('v.sortOrder', 'desc');
            
            helper.searchKey(component, event, helper, queryTerm);
        }
    },
})

Helper: -

({
searchKey : function(component, event, helper, searchString) {
component.set('v.showSpinner', true);
        
        var searchstring = searchString;
        var sortBy = component.get("v.sortBy");
        var sortOrder = component.get("v.sortOrder");
        
        var action = component.get("c.getProducts");
        
        action.setParams({"searchString": searchstring,
                          "sortby": sortBy,
                          "sortorder": sortOrder
                         });
        
        
        action.setCallback(this, function(response){
            var state = response.getState();
            
            if(state == "SUCCESS") {
                var products = response.getReturnValue();
                component.set('v.products', products);
                
                component.set('v.isSearching', false);
                component.set('v.showSpinner', false);
            }
        });
        $A.enqueueAction(action)
}
})

CSS: -

.THIS .search-box{
    display: inline-flex;
}
.THIS .search-box > .uiInput{
    margin-top: 6px;
}
.THIS .btn-sort:focus{
    box-shadow: none !important;
}
.THIS .sort-btn{
    transform: rotate(180deg) !important;
}
.THIS .selected-btn{
    color: #005fb2 !important;
}

Apex: -

public class getProducts {
    @AuraEnabled
    public static List<Custom_Product__c> getProducts(String searchString, String sortby, String sortorder)
    {
        string searchKey = '%'+searchString+'%';
        
        string fieldName = 'Name';
        if(sortby.equalsIgnoreCase('name')){
            fieldName = 'Name';
        }
        else if(sortby.equalsIgnoreCase('amount')){
            fieldName = 'Amount__c';
        }
        
        List<Custom_Product__c> cusProduct = new List<Custom_Product__c>();
        
        if(searchString !='' || String.isNotBlank(searchString) || String.isNotEmpty(searchString)){
            cusProduct = Database.query('SELECT Id, Name, Category__c, Amount__c FROM Custom_Product__c WHERE Name LIKE :searchKey ORDER BY '+fieldName+' '+sortorder);
        }
        else{
            cusProduct = Database.query('SELECT Id, Name, Category__c, Amount__c FROM Custom_Product__c ORDER BY '+fieldName+' '+sortorder);
        }
        return cusProduct;
    }
}

App: -

<aura:application extends="force:slds">
    <c:demoSorting />
</aura:application>

Comments

Post a Comment

Popular posts from this blog

Thank you page with simple HTML and CSS

-
Image
 A simple Thank You page using HTML and CSS Screenshot: - Code: - <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .top-banner{ background: #f0f8ff; font-size: 25px; padding: 3px 0px 3px 0px; text-align: center; font-weight: 500; font-family: sans-serif; } .center-banner{ margin-top: 40px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 8px 0px 8px 0px; font-family: sans-serif; } .app-table{ margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="top-banner"> <p>Thanks for writing to us, we will get back to you.</p> </div> <div class="center-banner"> <table class="app-table"> <tr> <td>You can also follow us on</td> <td><a href="https://www.linkedin.com/company/...
Read more

Lightning component to display chart using Chart.Js

-
Image
In the following example, we are using Chart.Js plugin to implement Chart in our lightning component . I am using Account and it's related Contact for showing how many contact are related to one account graphically. Screenshots: - Apex: -   public class getContact {     @AuraEnabled     public static List<Contact> getContactList(){         List<Contact> con = [SELECT Id, Name, Email, Account.Name FROM Contact];         return con;     } } Component: - <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="getContact"> <!--attributes-->     <ltng:require scripts="{!$Resource.chartNew}" afterScriptsLoaded="{!c.scriptsLoaded}"/> <!--include chart JS plugin from static resource-->          <aura:handler name="init" value="{!this}" action="{!c.init}" /> <!--init method for getting contacts and acco...
Read more

Lightning component with drag and drop feature

-
Image
A simple lightning component explains how to create drag and drop elements in lightning. Screenshots: - Component: - Component_A.cmp <aura:component > <!--attribute-->          <!--component markup-->     <div class="slds-text-heading_large slds-p-left_medium">Component A</div>          <div class="slds-grid">         <div class="slds-col slds-size_3-of-12 one" draggable="true" ondragstart="{!c.dragStart}">             <div class="slds-text-heading_small">This is first box</div>         </div>                  <div class="slds-col slds-size_3-of-12 two" draggable="true" ondragstart="{!c.dragStart}">             <div class="slds-text-heading_small">This is second box</div>         </di...
Read more