Custom Sorting in Salesforce Lightning Component

//Apex Class :- "CustomSortingController"
public class CustomSortingController {
@AuraEnabled
public static list < contact > getContact(string sortField, boolean AscDsc) {
system.debug('sortField-->' + sortField);

system.debug('AscDsc-->' + AscDsc);

String soql = '';

soql = ' select firstName, lastName, Email from contact';

if (sortField != '') {
soql += ' order by ' + sortField;

// if AscDsc is equal to true then set 'asc' order otherwise set 'desc' order.
if (AscDsc) {
soql += ' asc';
} else {
soql += ' desc';
}
}

// set record limit to query

soql += ' LIMIT 20';

System.debug('soql>>>>>>>>:' + soql);

list < contact > lstResult;
try {
system.debug('The query is' + soql);

lstResult = Database.query(soql);

List < contact > returnConList = new List < contact > ();

for (contact cnct: lstResult) {
returnConList.add(cnct);
}
system.debug('returnConList>>>>>>>' + returnConList);
return returnConList;
} catch (Exception ex) {
// for handle Exception
return null;
}
}

}

<!–CustomSortingComponent–>

<aura:component controller="CustomSortingController" >
<!--Declare Attributes-->
<aura:attribute name="ListOfContact" type="List"/>
<aura:attribute name="arrowDirection" type="string" default="arrowup" description="Use for change arrow sign direction on header based on click"/>
<aura:attribute name="AscDsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/>
<aura:attribute name="selectTab" type="string" default="FirstName" description="Use for show/hide arraow sign on header based on conditions"/>

<!--aura init handler , call js "loadContactList" function on component load, and display contact data on table-->
<aura:handler name="init" value="{!this}" action="{!c.loadContactList}"/>



<!-- aura handler with waiting and donewaiting events-->
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<!--create a component attributs -->
<aura:attribute name="Spinner" type="boolean" default="false"/>






<!--loading spinner start... style=Brand Medium (blue dots)-->
<aura:if isTrue="{!v.Spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->




<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">

<th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortFirstName}">
<a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
<span class="slds-assistive-text">Sort</span>
<span class="slds-truncate" title="First Name">FirstName</span>
<aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectTab == 'FirstName') }">&nbsp; &#9660; </aura:if>
<aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectTab == 'FirstName') }"> &nbsp; &#9650; </aura:if>
</a>
</th>

<th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortLastName}">
<a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
<span class="slds-assistive-text">Sort</span>
<span class="slds-truncate" title="LastName">LastName</span>
<aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectTab == 'LastName') }">&nbsp; &#9660;</aura:if>
<aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectTab == 'LastName') }">&nbsp; &#9650;</aura:if>

</a>
</th>

<th class="slds-is-sortable slds-text-title--caps" scope="col" onclick="{!c.sortEmail}">
<a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
<span class="slds-assistive-text">Sort</span>
<span class="slds-truncate" title="Email">Email</span>
<aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectTab == 'Email') }">&nbsp; &#9660;</aura:if>
<aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectTab == 'Email') }">&nbsp; &#9650;</aura:if>
</a>
</th>

</tr>
</thead>
<!--table body start,
Iterate contact list as a <tr>
-->
<tbody>
<aura:iteration items="{!v.ListOfContact}" var="con">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
</th>

<th scope="row">
<div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
</th>

<th scope="row">
<div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
</th>
</tr>

</aura:iteration>

</tbody>
</table>

</aura:component>

//Controller.js

({
loadContactList: function(component, event, helper) {
debugger;
// By Default make sort field is 'FirstName' of contact object
// call the helper function with pass sortField Name
helper.onLoad(component, event, 'FirstName');
},

sortFirstName: function(component, event, helper) {
debugger;
// set current selected header field on selectTab attribute.
component.set("v.selectTab", 'FirstName');
// call the helper function with pass sortField Name
helper.sortHelper(component, event, 'FirstName');
},

sortLastName: function(component, event, helper) {
debugger;
// set current selected header field on selectTab attribute.
component.set("v.selectTab", 'LastName');
// call the helper function with pass sortField Name
helper.sortHelper(component, event, 'LastName');
},

sortEmail: function(component, event, helper) {
debugger;
// set current selected header field on selectTab attribute.
component.set("v.selectTab", 'Email');
// call the helper function with pass sortField Name
helper.sortHelper(component, event, 'Email');
},



// this function automatic call by aura:waiting event
showSpinner: function(component, event, helper) {
// make Spinner attribute true for display loading spinner
component.set("v.Spinner", true);
},

// this function automatic call by aura:doneWaiting event
hideSpinner : function(component,event,helper){
// make Spinner attribute to false for hide loading spinner
component.set("v.Spinner", false);
}



})

//helper.js

({
onLoad: function(component, event, sortField)
{
debugger;
//call apex class method
var action = component.get('c.getContact');

// pass the apex method parameters to action
action.setParams({
'sortField': sortField,
'AscDsc': component.get("v.AscDsc")
});
action.setCallback(this, function(response)
{
debugger;
//store state of response
var state = response.getState();
if (state === "SUCCESS")
{
//set response value in ListOfContact attribute on component.
var resp=response.getReturnValue();

component.set('v.ListOfContact',resp);
}
});
$A.enqueueAction(action);
},

sortHelper: function(component, event, sortFieldName)
{
debugger;
var currentDir = component.get("v.arrowDirection");

if (currentDir == 'arrowdown')
{
// set the arrowDirection attribute for conditionally rendred arrow sign
component.set("v.arrowDirection", 'arrowup');
// set the isAsc flag to true for sort in Assending order.
component.set("v.AscDsc", true);
}
else
{
component.set("v.arrowDirection", 'arrowdown');
component.set("v.AscDsc", false);
}
// call the onLoad function for call server side method with pass sortFieldName
this.onLoad(component, event, sortFieldName);
},

})

//CustomSortingApp

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

OutPut:-

Leave a Reply