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.
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
Sakib Beig
