Salesforce Live: clientsidepagination

Client side pagination using lightning component

There is a requirement to display more than 10k records using aura components and needs to be implemented inline search and sort functionality as well. Provide download functionality as well.
Based on the Account record id in the url we have to pass the same id to the lightning component and fetch the related records and show in UI.

AgentSelectionPage.vf
AgentSelectionPageApp.app
SelectionPage.cmp
SelectionPage.js
SelectionPage.helper
SelectionPage.css
OverviewDetailsCtrl.apx

AgentSelectionPage.vf

<apex:page sidebar="true" showHeader="true" standardController="Account" tabStyle="Account">

<apex:outputPanel layout="block" style="overflow:auto;height:800px" >

<apex:includeLightning />

var accountId = "{!$CurrentPage.parameters.accountId}";

$Lightning.use("c:AgentSelectionPageApp", function() {

$Lightning.createComponent("c:SelectionPage",

{ "accountId" : accountId },

"LightningContainer", function(component) {

console.log('Component created');

});

</script>

function resizeIframe() {

var me = window.name;

if (me) {

var iframes = parent.document.getElementsByName(me);

if (iframes && iframes.length == 1) {

height = document.body.offsetHeight;

iframes[0].style.height = height + "px";

}

resizeIframe();

</script>

</apex:outputPanel>

</apex:page>

AgentSelectionPageApp.app

<aura:application extends="ltng:outApp" access="global">

<aura:dependency resource="c:SelectionPage"/>

</aura:application>

SelectionPage.cmp

<aura:component controller="OverviewDetailsCtrl" implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="accountId" type="String" />

<aura:attribute name="recordId" type="String" />

<aura:attribute name="hubShowHideFlag" type="Boolean" default="false"/>

<aura:attribute name="successAlertFlag" type="Boolean" default="false"/>

<aura:attribute name="mouseHoverData" type="object" />

<aura:attribute name="accountIdHover" type="Id" />

<aura:attribute name="togglehover" type="boolean" default="false"/>

<aura:attribute name="data" type="Object"/>

<aura:attribute name="hoverRow" type="Integer" default="-1" />

<aura:attribute name="billingCountryList" type="List"/>

<aura:attribute name="billingCityList" type="List"/>

<aura:attribute name="columns" type="List"/>

<aura:attribute name="selectedAccountRecords" type="List" default="[]"/>

<aura:attribute name="unselectedAccountRecords" type="List" default="[]"/>

<aura:attribute name="BillingCountry" type="String"/>

<aura:attribute name="cityName" type="String"/>

<aura:attribute name="profileLinkableName" type="String"/>

<aura:attribute name="profileLinkableList" type="List" default="['Yes','No']"/>

<aura:attribute name="successAlert" type="String" default=""/>

<aura:attribute name="countryName" type="String"/>

<aura:attribute type="String" name="sortField" />

<aura:attribute type="Boolean" name="sortAsc" />

<aura:attribute name="allData" type="List"/>

<aura:attribute name="currentPageNumber" type="Integer" default="1"/>

<aura:attribute name="pageSize" type="Integer" default="50"/>

<aura:attribute name="totalPages" type="Integer" default="0"/>

<aura:attribute name="pageList" type="List"/>

<aura:attribute name="issearching" type="Boolean" default="false"/>

<aura:attribute type="Boolean" name="showLoader" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:if isTrue="{!v.showLoader}">

<c:CTO_Loader></c:CTO_Loader>

</aura:if>

<br/>

<caption class="slds-headertab-sty">Corporate Traveller Onboarding</caption>

</h2>

</div>

<lightning:button label="Save" variant="brand" onclick="{!c.handleSelectedAccounts }" />

<lightning:button label="Download as CSV" variant="brand" onclick="{!c.downloadCsv }" />

<lightning:button label="Clear Filters" variant="brand" onclick="{!c.handleClearFilters }"/>

<lightning:button label="Cancel" variant="brand" onclick="{!c.handleCancel }"/>

</div>

<br/>

<aura:if isTrue="{!v.successAlertFlag}">

<c:CTOToastUtil toastmsg="{!v.successAlert}" toastType="success" successAlertFlag="{!v.successAlertFlag}"/>

</aura:if>

<aura:if isTrue="{!v.hubShowHideFlag}">

<lightning:layout multipleRows="true" horizontalAlign="center">

<lightning:layoutItem padding="around-small" size="12">

<strong><div class="slds-truncate">COMPANY NAME</div></strong>

<lightning:input aura:id="comanyName" placeholder="Search Company"

name="comanyName"

type="text"

</div>

</th>

<strong><div class="slds-truncate">Country</div></strong>

<lightning:select label="" aura:id="countryName" value="{!v.countryName}" onchange="{!c.searchcountryName}" name="BillingCountry">

<option disabled="true" value="">Search Country</option>

<aura:iteration items="{!v.billingCountryList}" var="country">

<option value="{!country}" selected="{!country==v.countryName}">{!country}</option>

</aura:iteration>

</lightning:select>

</th>

<lightning:select label="" aura:id="cityName" value="{!v.cityName}" onchange="{!c.searchcityName}" name="cityName">

<option disabled="true" value="">Search City</option>

<aura:iteration items="{!v.billingCityList}" var="city">

</aura:iteration>

</lightning:select>

</th>

<strong><div class="slds-truncate">PAYMENT METHOD</div></strong>

<lightning:input aura:id="paymentMethod" placeholder="Search Payment"

name="paymentMethod"

type="text"

</div>

</th>

<strong><div class="slds-truncate">Created Date</div></strong>

<lightning:input aura:id="searchDate" placeholder="Search Date"

name="searchDate"

</div>

</th>

<strong><div class="slds-truncate">Included KDNR</div></strong>

<lightning:select label="" aura:id="profileLinkable" value="{!v.profileLinkableName}" onchange="{!c.searchProfileLinkable}" name="profileLinkableName">

<option disabled="true" value="">Search Included KDNR</option>

<aura:iteration items="{!v.profileLinkableList}" var="profile">

<option value="{!profile}" selected="{!profile==v.profileLinkableName}">{!profile}</option>

</aura:iteration>

</lightning:select>

</th>

</tr>

</table>

<tbody>

<aura:if isTrue="{!not(empty(v.data))}">

<aura:iteration items="{!v.data}" var="acc" indexVar="index">

</td>

</td>

<div class="slds-truncate" title="{!acc.BillingCountry}">{!acc.BillingCountry}</div>

</td>

<div class="slds-truncate" title="{!acc.BillingCity}">{!acc.BillingCity}</div>

</td>

<div class="slds-truncate" title="{!acc.Payment_Type}">{!acc.Payment_Type}</div>

</td>

<div class="slds-truncate" title="{!acc.X12_Months_Rolling_Revenue}">{!acc.X12_Months_Rolling_Revenue}</div>

</td>

<div><a id="{!acc.Id}" style="color:#ff5f00;" onmouseenter="{!c.handleMouseHover}" onmouseout="{!c.handleMouseOut}" data-index="{!index}" tabindex="-1">{!acc.parentKDNR}</a></div>

<aura:if isTrue="{!v.hoverRow==index}">

<aura:if isTrue="{!v.togglehover==true}">

<lightning:icon iconName="standard:account"/>

</span>

<a href="javascript:void(0);">{!v.mouseHoverData.Name}</a>

</p>

</a>

</h2>

</div>

</header>

<dl>

<dt>

<p class="slds-popover_panel__label slds-truncate">Owner</p>

</dt>

<dd>

<a href="javascript:void(0);">{!v.mouseHoverData.Owner.Name}</a>

</dd>

</dl>

</div>

</footer>

</div>

<a href="javascript:void(0);">{!v.mouseHoverData.Name}</a>

</p>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.ABKZ__c}</dd>

<dt class="slds-item_label slds-text-color_weak slds-truncate">Mandant</dt>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.Mandant__c}</dd>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.KDNR__c}</dd>

<dt class="slds-item_label slds-text-color_weak slds-truncate">Profile Linkable</dt>

<dd class="slds-item_detail slds-text-color_weak slds-truncate">{!v.mouseHoverData.Profile_Linkable__c}</dd>

</dl>

</dd>

</dl>

</div>

</section>

</aura:if>

</td>

<div class="slds-truncate" title="{!acc.CreatedDate}">{!acc.CreatedDate}</div>

</td>

<ui:inputCheckbox class="slds-checkbox--faux" aura:id="checkAccountId" value="{!acc.Profile_Linkable}" text="{!acc.Id}"/>

</label>

</td>

</tr>

</aura:iteration>

</aura:if>

</tbody>

</table>

<aura:if isTrue="{!empty(v.data)}">

<div class="slds-align_absolute-center" style="height:5rem">No matching records to display</div>

</aura:if>

</div>

</lightning:layoutItem>

<lightning:layoutItem padding="around-small" flexibility="auto">

<!--

<lightning:button label="First" iconName="utility:left" iconPosition="left" variant="brand"

onclick="{!c.onFirst}" disabled="{! v.currentPageNumber == 1}"/>-->

<lightning:button label="Previous" iconName="utility:left" iconPosition="left" variant="brand"

onclick="{!c.onPrev}" disabled="{! v.currentPageNumber == 1}"/>

<a onclick="{!c.processMe}" name="1"

class="{! (v.currentPageNumber == 1) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">1</a>

</span>

<aura:iteration items="{!v.pageList}" var="item">

<a onclick="{!c.processMe}" name="{!item}"

class="{! (v.currentPageNumber == item) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">{!item}</a>

</span>

</aura:iteration>

</span>

<a onclick="{!c.processMe}" name="{!v.totalPages}"

class="{! (v.currentPageNumber == v.totalPages) ? 'slds-button slds-button_brand' : 'slds-button slds-button_neutral'}">{!v.totalPages}</a>

</span>

<lightning:button label="Next" iconName="utility:right" iconPosition="right" variant="brand"

disabled="{! v.currentPageNumber == v.totalPages}" onclick="{!c.onNext}"/>

<!--

<lightning:button label="Last" iconName="utility:right" iconPosition="right" variant="brand"

disabled="{! v.currentPageNumber == v.totalPages}" onclick="{!c.onLast}"/>

-->

</lightning:layoutItem>

</lightning:layout>

<!--

<lightning:button label="Save" variant="brand" onclick="{!c.handleSelectedAccounts }" />

<lightning:button label="Download as CSV" variant="brand" onclick="{!c.downloadCsv }" />

<lightning:button label="Clear Filters" variant="brand" onclick="{!c.handleClearFilters }"/>

<lightning:button label="Cancel" variant="brand"/>

</div>

-->

</aura:if>

</aura:component>

({

doInit : function(component, event, helper) {

component.set("v.hubShowHideFlag",true);

helper.onLoad(component, helper);

sortByKDNR : function(component, event, helper) {

helper.sortBy(component, "KDNR");

sortByIncludedKDNR : function(component, event, helper) {

helper.sortBy(component, "Profile_Linkable");

sortByCreatedDate : function(component, event, helper) {

helper.sortBy(component, "CreatedDate");

sortByParentKDNR : function(component, event, helper) {

helper.sortBy(component, "parentKDNR");

sortByRevenue : function(component, event, helper) {

helper.sortBy(component, "X12_Months_Rolling_Revenue");

sortByPayment : function(component, event, helper) {

helper.sortBy(component, "Payment_Type");

sortByCity : function(component, event, helper) {

helper.sortBy(component, "BillingCity");

sortByCountry : function(component, event, helper) {

helper.sortBy(component, "BillingCountry");

sortByCompanyName : function(component, event, helper) {

helper.sortBy(component, "Name");

handleMouseHover: function(component, event, helper) {

component.set("v.accountIdHover",event.srcElement.id);

helper.getMiniLayout(component, event, helper)

handleMouseOut: function(component, event, helper) {

component.set("v.hoverRow",-1);

component.set("v.togglehover",false);

redirectToAccount : function(component, event, helper) {

var classicURL = '/'+event.currentTarget.getAttribute("data-attriVal");

window.open(classicURL,'_blank');

onNext : function(component, event, helper) {

var pageNumber = component.get("v.currentPageNumber");

component.set("v.currentPageNumber", pageNumber+1);

helper.buildData(component, helper);

onPrev : function(component, event, helper) {

var pageNumber = component.get("v.currentPageNumber");

component.set("v.currentPageNumber", pageNumber-1);

helper.buildData(component, helper);

handleCancel : function(component, event, helper) {

component.set("v.showLoader",true);

var accountId = component.get("v.accountId");

var classicURL = '/'+accountId;

window.open(classicURL,'_self');

component.set("v.showLoader",false);

processMe : function(component, event, helper) {

component.set("v.currentPageNumber", parseInt(event.target.name));

helper.buildData(component, helper);

onFirst : function(component, event, helper) {

component.set("v.currentPageNumber", 1);

helper.buildData(component, helper);

onLast : function(component, event, helper) {

component.set("v.currentPageNumber", component.get("v.totalPages"));

helper.buildData(component, helper);

searchKDNRCompanyName : function (component, event, helper) {

var isEnterKey = event.keyCode === 13;

if (isEnterKey) {

component.set("v.showLoader",true);

var queryTerm = component.find('searchKDNR').get('v.value');

if(queryTerm) {

component.set('v.issearching', true);

setTimeout(function() {

helper.buildSearchData(component,helper,queryTerm);

component.set('v.issearching', false);

}, 2000);

}else{

alert("Please enter KDNR, Company Name");

component.set("v.showLoader",false);

}

searchparentKDNR :function(component, event, helper) {

var queryTerm = component.find('parentKDNR').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'parentKDNR');

helper.buildDataArray(component, helper,allDataArray);

}

searchKDNR: function(component, event, helper) {

var queryTerm = component.find('KDNRName').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'KDNR');

helper.buildDataArray(component, helper,allDataArray);

}

searchcomanyName: function(component, event, helper) {

var queryTerm = component.find('comanyName').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm.toUpperCase(), 'Name');

helper.buildDataArray(component, helper,allDataArray);

}

searchcountryName: function(component, event, helper) {

var queryTerm = component.get("v.countryName");

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'BillingCountry');

helper.buildDataArray(component, helper,allDataArray);

}

searchcityName: function(component, event, helper) {

var queryTerm = component.get("v.cityName");

debugger;

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'BillingCity');

helper.buildDataArray(component, helper,allDataArray);

}

searchpaymentMethod: function(component, event, helper) {

var queryTerm = component.find('paymentMethod').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm.toUpperCase(), 'Payment_Type');

helper.buildDataArray(component, helper,allDataArray);

}

searchProfileLinkable : function(component, event, helper) {

var queryTerm = component.find('profileLinkable').get('v.value');

if(queryTerm){

var allDataArray = [];

if(queryTerm === "Yes"){

allDataArray = helper.filterDataFromAllData(component,'true', 'Profile_Linkable');

}else if(queryTerm === "No"){

allDataArray = helper.filterDataFromAllData(component,'false', 'Profile_Linkable');

}

helper.buildDataArray(component, helper,allDataArray);

}

searchRevenueRM : function(component, event, helper) {

var queryTerm = component.find('revenueRM').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'X12_Months_Rolling_Revenue');

helper.buildDataArray(component, helper,allDataArray);

}

searchSearchDate : function(component, event, helper) {

var queryTerm = component.find('searchDate').get('v.value');

if(queryTerm){

var allDataArray = [];

allDataArray = helper.filterDataFromAllData(component,queryTerm, 'CreatedDate');

helper.buildDataArray(component, helper,allDataArray);

}

doCaptureChangedValue : function(component, event, helper) {

var checkbox = event.getSource();

var selectedAccountRecord = component.get("v.selectedAccountRecords");

var unselectedAccountRecord = component.get("v.unselectedAccountRecords");

if(checkbox.get("v.value")){

selectedAccountRecord.push(checkbox.get("v.text"));

//unselectedAccountRecord.splice(checkbox.get("v.text"), 1);

}else{

unselectedAccountRecord.push(checkbox.get("v.text"));

//selectedAccountRecord.splice(checkbox.get("v.text"), 1);

}

component.set("v.selectedAccountRecords",selectedAccountRecord);

component.set("v.unselectedAccountRecords",unselectedAccountRecord);

searchBillingCountry : function(component, event, helper) {

var BillingCountryValue = component.get("v.BillingCountry");

//Process the selected contacts

handleSelectedAccounts: function(component, event, helper) {

component.set("v.showLoader",true);

var selectedAccounts = [];

var unSelectedAccounts = [];

var checkvalue = component.find("checkAccountId");

if(!Array.isArray(checkvalue)){

if (checkvalue.get("v.value") == true) {

selectedAccounts.push(checkvalue.get("v.text"));

}

}else{

for (var i = 0; i < checkvalue.length; i++) {

if (checkvalue[i].get("v.value") == true) {

selectedAccounts.push(checkvalue[i].get("v.text"));

}else{

unSelectedAccounts.push(checkvalue[i].get("v.text"));

}

console.log('unSelectedAccounts-' + unSelectedAccounts);

console.log('selectedAccounts-' + selectedAccounts);

var action = component.get("c.doUpdateSelectedUnsSelected");

action.setParams({

selectedAccounts : selectedAccounts,

unSelectedAccounts : unSelectedAccounts

});

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

//console.log("success or failure ::"+response.getReturnValue());

helper.removeFilters(component, helper);

//$A.get("e.force:refreshView").fire();

if(response.getReturnValue()){

component.set("v.successAlertFlag",true);

component.set("v.successAlert",response.getReturnValue());

}

//helper.onLoad(component, helper);

component.set("v.showLoader",false);

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

component.set("v.showLoader",false);

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

component.set("v.showLoader",false);

}

});

$A.enqueueAction(action);

handleClearFilters : function(component, event, helper) {

component.set("v.showLoader",true);

helper.removeFilters(component, helper);

helper.onLoad(component, helper);

//helper.buildDataArray(component, helper,allData);

//component.set("v.showLoader",false);

downloadCsv : function(component,event,helper){

var stockData = component.get("v.allData");

var csv = helper.convertArrayOfObjectsToCSV(component,stockData);

if (csv == null){

return;

}

var hiddenElement = document.createElement('a');

hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

hiddenElement.target = '_self';

hiddenElement.download = 'ExportData.csv';

document.body.appendChild(hiddenElement);

hiddenElement.click();

})

({

onLoad : function(component, helper) {

this.removeFilters(component, helper);

var accountId = component.get("v.accountId") ? component.get("v.accountId") :component.get("v.recordId");

var action = component.get("c.doGetHeirarchyAccounts");

var billingCountryList = [];

var billingCityList = [];

action.setParams({

accountId : accountId

});

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

if(response.getReturnValue() !== null){

component.set("v.totalPages", Math.ceil(response.getReturnValue().length/component.get("v.pageSize")));

component.set("v.allData", response.getReturnValue());

for (var key in response.getReturnValue()) {

if (response.getReturnValue().hasOwnProperty(key)) {

if(response.getReturnValue()[key].BillingCountry){

if(billingCountryList.indexOf(response.getReturnValue()[key].BillingCountry.toUpperCase()) === -1) {

billingCountryList.push(response.getReturnValue()[key].BillingCountry);

}

if(response.getReturnValue()[key].BillingCity){

if(billingCityList.indexOf(response.getReturnValue()[key].BillingCity.toUpperCase()) === -1) {

billingCityList.push(response.getReturnValue()[key].BillingCity);

}

billingCountryList = [... new Set(billingCountryList)];

billingCityList = [... new Set(billingCityList)];

billingCountryList.sort();

billingCityList.sort();

component.set("v.billingCountryList",billingCountryList);

component.set("v.billingCityList",billingCityList);

component.set("v.currentPageNumber",1);

window.allData = component.get("v.allData");

helper.buildData(component, helper);

}else{

component.set("v.showLoader",false);

}

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

component.set("v.showLoader",false);

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

component.set("v.showLoader",false);

}

});

var requestInitiatedTime = new Date().getTime();

$A.enqueueAction(action);

buildSearchData : function(component, helper,queryTerm) {

var accountId = component.get("v.accountId");

var action = component.get("c.doSearchKDNRCompany");

action.setParams({

accountId : accountId,

searchString : queryTerm

});

action.setStorable();

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

component.set("v.totalPages", Math.ceil(response.getReturnValue().length/component.get("v.pageSize")));

component.set("v.allData", response.getReturnValue());

component.set("v.currentPageNumber",1);

helper.buildData(component, helper);

}else if(state === "ERROR"){

var errors = action.getError();

if (errors) {

if (errors[0] && errors[0].message) {

alert(errors[0].message);

}

}else if (status === "INCOMPLETE") {

alert('No response from server or client is offline.');

}

});

var requestInitiatedTime = new Date().getTime();

$A.enqueueAction(action);

buildDataArray : function(component, helper,allDataArray) {

var data = [];

var pageNumber = component.get("v.currentPageNumber");

var pageSize = component.get("v.pageSize");

var allData = allDataArray;

var x = (pageNumber-1)*pageSize;

for(; x<=(pageNumber)*pageSize; x++){

if(allData[x]){

data.push(allData[x]);

}

component.set("v.data", data);

helper.generatePageList(component, pageNumber);

buildData : function(component, helper) {

var data = [];

var pageNumber = component.get("v.currentPageNumber");

var pageSize = component.get("v.pageSize");

var allData = component.get("v.allData");

var x = (pageNumber-1)*pageSize;

for(; x<=(pageNumber)*pageSize; x++){

if(allData[x]){

data.push(allData[x]);

}

component.set("v.data", data);

helper.generatePageList(component, pageNumber);

generatePageList : function(component, pageNumber){

pageNumber = parseInt(pageNumber);

var pageList = [];

var totalPages = component.get("v.totalPages");

if(totalPages > 1){

if(totalPages <= 10){

var counter = 2;

for(; counter < (totalPages); counter++){

pageList.push(counter);

}

} else{

if(pageNumber < 5){

pageList.push(2, 3, 4, 5, 6);

} else{

if(pageNumber>(totalPages-5)){

pageList.push(totalPages-5, totalPages-4, totalPages-3, totalPages-2, totalPages-1);

} else{

pageList.push(pageNumber-2, pageNumber-1, pageNumber, pageNumber+1, pageNumber+2);

}

component.set("v.pageList", pageList);

component.set("v.showLoader",false);

removeFilters : function(component,helper){

component.find("parentKDNR").set("v.value", "");

component.find("KDNRName").set("v.value", "");

component.find("comanyName").set("v.value", "");

component.find("paymentMethod").set("v.value", "");

component.find("profileLinkable").set("v.value", "");

component.find("searchDate").set("v.value", "");

component.find("revenueRM").set("v.value", "");

component.set("v.countryName","");

component.set("v.cityName","");

convertArrayOfObjectsToCSV : function(component,objectRecords){

var csvStringResult, counter, keys, columnDivider, lineDivider;

if (objectRecords == null || !objectRecords.length) {

return null;

}

columnDivider = ',';

lineDivider = '\n';

keys = ['KDNR','Name','BillingCountry','BillingCity','Payment_Type','X12_Months_Rolling_Revenue','CreatedDate','Profile_Linkable','parentKDNR'];

csvStringResult = '';

//csvStringResult += keys.join(columnDivider);

csvStringResult += ['KDNR Name','Company Name','Billing Country','Billing City','Payment Type','REVENUE R12M','Created Date','Included KDNR','Parent KDNR' ];

csvStringResult += lineDivider;

for(var i=0; i < objectRecords.length; i++){

counter = 0;

for(var sTempkey in keys) {

var skey = keys[sTempkey] ;

if(counter > 0){

csvStringResult += columnDivider;

}

console.log(objectRecords[i][skey]);

if(objectRecords[i][skey] != undefined){

csvStringResult += '"'+ objectRecords[i][skey]+'"';

}else{

csvStringResult += '"'+ '' +'"';

}

counter++;

}

csvStringResult += lineDivider;

}

return csvStringResult;

filterDataFromAllData: function(component,queryTerm, searchField){

try {

var tempArray = allData.filter(function(item){

var temp = '';

if(searchField === 'Profile_Linkable'){

temp = (item && item[searchField] && item[searchField].toString()) ? item[searchField].toString() : 'false';

}else{

temp = (item && item[searchField] && item[searchField].toString()) || '' ? item[searchField].toString() : '';

}

return temp.includes(queryTerm)

});

return tempArray;

}

catch(e) {

alert(e);

}

getMiniLayout:function(component, event, helper){

var accountId = component.get("v.accountIdHover");

var action = component.get("c.doMouseOverData");

action.setParams({

accountId : accountId

});

action.setStorable();

action.setCallback(this,function(response) {

var state = response.getState();

if (state === "SUCCESS") {

console.log(JSON.stringify(response.getReturnValue()));

component.set('v.mouseHoverData', response.getReturnValue());

component.set("v.hoverRow", parseInt(event.target.dataset.index));

component.set("v.togglehover",true);

}

});

$A.enqueueAction(action);

sortBy: function(component, field) {

var sortAsc = component.get("v.sortAsc"),

sortField = component.get("v.sortField"),

data = window.allData,

sortAsc = field == sortField? !sortAsc: true;

data.sort(function(a,b){

var t1 = a[field] == b[field],

t2 = a[field] > b[field];

return t1? 0: (sortAsc?-1:1)*(t2?-1:1);

});

component.set("v.sortAsc", sortAsc);

component.set("v.sortField", field);

component.set("v.data", data);

}

});

.THIS .kdnrClass{

font-family: 'Roboto', sans-serif;

font-weight: 600;

font-size: 12px;

line-height: 1.42857;

color: #ff5f00 !important;

font-weight: bold !important;

}

.THIS .slds-text-title_caps{

color:black;

background:#eeeeee;

}

public class OverviewDetailsCtrl {

@AuraEnabled

public static List<Account> getLimitedAccounts(){

List<Account> accounts = [SELECT

Id, Name

FROM Account ORDER BY CreatedDate LIMIT 15000];

return accounts;

}

Salesforce Live

client side pagination using lightning component

Featured

What is Cryptography in salesforce and what are all the algorithms provided by them ?

Popular

Translate