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 -:

www.screencast.com

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 }); event.fire(); } })

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.


Thanks 
Sakib Beig 

28 comments:

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

    ReplyDelete
  2. Nice :)

    Thank you sir for this tutorial

    ReplyDelete
  3. Nice Paging with Bootstrap
    Looking great :)

    ReplyDelete
  4. Great work Sir :)

    ReplyDelete
  5. Great tutorial. Beneficial for all. Thanks

    ReplyDelete
  6. This really helps!
    Thank you for sharing wonderful Tutorial.

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

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

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

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

      Delete
  9. 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

    ReplyDelete
  10. 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.

    Thanks

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

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

    ReplyDelete
  13. Unable to Download static resource..Please help.

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

    ReplyDelete
  15. 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!

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

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

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

    ReplyDelete
  19. 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

    ReplyDelete
  20. Hi Sakib,

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

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete