Monday, 28 September 2015

Salesforce Pagination Lightning Component

Hi All,
I have created a Pagination component which can be used as Lightning Component. This is very easy to setup and configure. You simply need to drag it in app builder and configure by giving objectname, fieldnames and the title of the pagination. By default it will fetch contact object and its by default giving fields.

For more information, watch it here -:

Unable to display content. Adobe Flash is required.

Here is the code:- 

Apex Controller:- 
public class PaginationController{ @AuraEnabled public static String getContacts(String objectName,String fieldName){ List<sObject> mylist = new List<sObject>(); String query = 'Select '; string fieldNames = queryableField(objectName, fieldName); if(string.isNotBlank(objectName) && string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from '+objectName; }else if(string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from contact'; } if(query != null) mylist = Database.query(query); if(mylist != null && mylist.size() > 0){ Map<String, Schema.SObjectField> FieldMap = Schema.getGlobalDescribe().get(string.valueOf(mylist.get(0).getSObjectType())).getDescribe().fields.getMap(); String jSon='['; String coma=''; List<string> field = fieldNames.split(','); for(sObject con : mylist) { jSon += '['; Integer i=0; for(string f : field){ if(i==0){ jSon += coma + '"<a target=\'_blank\' class=\'showDetail\' id=\''+con.get('Id')+'\' >' +con.get(f)+ '</a>",'; } else { jSon += coma + '"'+con.get(f)+'",'; } i++; } jSon += '],'; } jSon+=']'; return jSon; } else { return null; } } //function for return valid fields on basis of object and fields string. @AuraEnabled public static string queryableField(string objectString, string fieldString){ if((string.isBlank(objectString) && string.isBlank(fieldString)) || (string.isNotBlank(objectString) && string.isBlank(fieldString)) || string.isBlank(fieldString) ) return null; set<string> objectName = new set<string>(); for(string obj : Schema.getGlobalDescribe().keyset()) objectName.add(obj.toLowercase()); if(!objectName.contains(objectString.toLowercase())) return null; set<string> allFields = new set<string>(); set<string> validField = new set<string>(); Map<String, Schema.SObjectField> FieldMap; if(string.isNotBlank(objectString)) FieldMap = Schema.getGlobalDescribe().get(objectString).getDescribe().fields.getMap(); else FieldMap = Schema.getGlobalDescribe().get('contact').getDescribe().fields.getMap(); for(string field : FieldMap.keySet()){ allFields.add(FieldMap.get(field).getDescribe().getName().toLowercase()); } for(string f : fieldString.split(',')){ if(string.isNotBlank(f)){ if(allFields.contains(f.toLowercase())) validField.add(f.capitalize()); } } return string.join(new List<string>(validField),','); } }
Aura Controller:-  
({ doInit : function(component, event, helper) { var dataSet; var columns; var action = component.get("c.getContacts"); var action2 = component.get("c.queryableField"); var objectName = component.get("v.objectName"); var fieldName = component.get("v.fieldName"); var title = component.get("v.title"); component.set("v.title",title); var fields; var splitfileds; action.setParams({ "objectName":objectName, "fieldName":fieldName }) ; action2.setParams({ "objectString":objectName, "fieldString":fieldName }) ; var self = this; action2.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS"){ fields = response.getReturnValue().split(","); var jSon='['; var coma=''; for(var i=0;i<fields.length;i++) { jSon+=coma+'{title:"'+fields[i]+'"}'; coma=','; } jSon+=']'; splitfileds = eval(jSon); } }); $A.enqueueAction(action2); action.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS") { dataSet = eval(response.getReturnValue()); $(function(){ /* initiate the plugin */ $(window).resize(function(){ if ($(window).width() <= 700) { $('.container ').css({"overflow-x":"scroll","width":"100%"}); } else{ $('.container ').css({"overflow-x":"none","width":"100%"}); } }); var table = $('#example').DataTable({ data: dataSet, columns:splitfileds, "fnDrawCallback": function( oSettings ) { $('.showDetail').css({"cursor":"pointer","text-decoration":"none"}); $('.showDetail').click(function(){ var recordId = $(this).attr('id'); helper.navigateToDetailsView(recordId); }); } }); }); } }); $A.enqueueAction(action); } })

Aura Component:-
<aura:component controller="PaginationController" implements="flexipage:availableForAllPageTypes"> <ltng:require styles="/resource/bootstrap/css/datatable.css, /resource/bootstrap/css/mycss.css" scripts="/resource/bootstrap/js/jquery.js, /resource/bootstrap/js/datatable.min.js" afterScriptsLoaded="{!c.doInit}"/> <aura:attribute name="objectName" type="String" default="contact"/> <aura:attribute name="fieldName" type="String" default="name,id,email"/> <aura:attribute name="title" type="String" default="Pagination Table"/> <div class="container"> <h2>{!v.title}</h2> <br/> <table class="table table-bordered display" id="example"> </table> </div> </aura:component>

Aura Helper:-
({ navigateToDetailsView : function(accountId) { var event = $A.get("e.force:navigateToSObject"); event.setParams({ "recordId": accountId });; } })

Aura Application:-
<aura:application > <div class="container"> <c:dynamicPaginationForm /> </div> </aura:application>

Aura Design:- 
<design:component> <design:attribute name="objectName" label="Object Name"/> <design:attribute name="fieldName" label="Field Name"/> <design:attribute name="title" label="Title"/> </design:component>
Download static resource from here...
Copy the code and implement in your organization and if you face any issue, email me.
Provide your valuable feedback.

Sakib Beig 


  1. Nice work shakib sir keep it up !!!!!!

  2. Nice :)

    Thank you sir for this tutorial

  3. Nice Paging with Bootstrap
    Looking great :)

  4. Great tutorial. Beneficial for all. Thanks

  5. This really helps!
    Thank you for sharing wonderful Tutorial.

  6. I am not able to download the static resource. Please help

    1. This comment has been removed by the author.

  7. In last of demo you can see download static resource link from there you can download static resource

    1. Link is not working . please check or provide us the Js files its showing me asSorting in null

  8. Hi Sakib beig. Assalaam walaikum. The tutorial is really very good thanks a lot. I'm new to lighting component i need a small help from your side. I got a assignment where i should create a component in which i have only one picklist field on selecting the value different fields should render. I have already developed this in VF but they want it in lightning component. Please need some guidance

  9. Hi Sakib Beig

    Can you please attached the Static Resources ZIP file; because the download link is taken to your dev org, we don't have any credential for that.

    Without those Static Resources I can't run this APP.

    Appreciate your quick response.


  10. Static resources is not present in the link plz provide this link . ur link is not working thanks .

  11. Unable to Download static resource..Please help.

  12. Unable to Download static resource..Please help.

  13. Thanks Sakib Beig for such great tutorial. We are unable to Download Static resource, please help me.
    I really appreciate for your help, Thanks!!

  14. hello, how can we get the static resource zip? i get a bootstrap text file but it isn't giving me all the different files referenced in the code. thank you!

  15. I pleased by reading this wonderful information. Thanks a lot for sharing amazing article on
    Salesforce lightning Experience.

  16. Hi,
    I am getting error in Error as :
    in $A.getCallback() [eval is not a function]

  17. Hi,sakib
    I'm also not able to download static resource.

  18. Hi Sakib,
    i'm getting the error like This page has an error. You might just need to refresh it.
    Error in $A.getCallback() [eval is not a function]
    Callback failed: apex://PaginationController_Aura/ACTION$queryableField
    Failing descriptor: {markup://c:Custom_Pagination_Aura}..
    please help me out

  19. Hi Sakib,

    Its a nice article. Appreciate if you can share the static resource since it is not downloadable now.

  20. This comment has been removed by the author.