In this blog, we will build a Pagination component which also retains the checkboxes which are checked during the next and previous screens.

Requirement: Display the list of Opportunity records with pagination and the checkbox values are retained.

Solution: We will use the “APPLICATION” type event in order to communicate when ‘next’ and ‘previous’ buttons are clicked.

You can see the output in action here:

Step 1: Create an Event – PaginatorEvent.evt


<aura:event type="APPLICATION" description="Event template to communicate on Pagination">
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" />
<aura:attribute name="endPosn" type="Integer"/>
</aura:event>

Step 2: Here we’ll create a component which displays the Pagination buttons and its logic (Paginator.cmp)


<aura:component >
<aura:attribute name="pMasterWrapperlist" type="List" required="true"/>
<aura:attribute name="pageSize" type="Integer" default="5"/>
<aura:attribute name="startPosn" type="Integer" required="true"/>
<aura:attribute name="endPosn" type="Integer"/>

	<lightning:button variant="neutral" label="Previous" disabled="{!v.startPosn == 0}"
onclick="{!c.previous}" />
	<lightning:button variant="brand" label="Next" disabled="{!v.endPosn >= v.pMasterWrapperlist.length}"
onclick="{!c.next}" />
</aura:component>

Step 3: Call the below methods from the Paginator.js (helper):


({
next : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
var endPosn = component.get("v.endPosn");
var startPosn = component.get("v.startPosn");
var subWrapperlist = [];

for(var i=0; i<component.get("v.pageSize"); i++){
endPosn++;
if(wlist.length > endPosn){
subWrapperlist.push(wlist[endPosn]);
}
startPosn++;
}
var pEvent = $A.get("e.c:PaginatorEvent");
pEvent.setParams({
"pWrapperlist"    :    subWrapperlist,
"startPosn"        :    startPosn,
"endPosn"        :    endPosn
});
pEvent.fire();
},
previous : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
var startPosn = component.get("v.startPosn");
var endPosn = component.get("v.endPosn");
var subWrapperlist = [];
var pageSize = component.get("v.pageSize");

startPosn -= pageSize;
if(startPosn > -1){
for(var i=0; i<pageSize; i++){
if(startPosn > -1){
subWrapperlist.push(wlist[startPosn]);
startPosn++;
endPosn--;
}
}
startPosn -= pageSize;

var pEvent = $A.get("e.c:PaginatorEvent");
pEvent.setParams({
"pWrapperlist"    :     subWrapperlist,
"startPosn"        :    startPosn,
"endPosn"        :    endPosn
});
pEvent.fire();
}
},
})

Below are the key points:

  • The event which we created in Step 1 will be fired in this component when the user clicks “next/previous” buttons by passing the relevant parameters to it.
  • ‘pMasterWrapperlist’ is the master list which contains all the records.
  • ‘startPosn’ and ‘endPosn’ are the key pointers from which we will be displaying the records

Step 4: Creating a wrapper class:


public class WrapperClass {
public class OppWrapper {
@AuraEnabled public Opportunity opp;
@AuraEnabled public boolean isChecked;
public OppWrapper(Opportunity o){
opp = o;
isChecked=false;
}
}
}

Step 5: Main apex controller class which fetches the opportunities:


public class Pagination {
@AuraEnabled
public static List<WrapperClass.OppWrapper> getOpplist(){
List<WrapperClass.OppWrapper> pWrapperlist = new List<WrapperClass.OppWrapper>();
for(Opportunity opp : [Select Id, Name, StageName, CloseDate from Opportunity limit 100]){
pWrapperlist.add(new WrapperClass.OppWrapper(opp));
}
return pWrapperlist;
}
}

Note: For testing purpose, I have restricted the opportunity records to the limit 100

Step 6: Lets create our final component where we’ll be displaying the list of Opportunities and pagination to it.


<aura:component controller="Pagination">
<aura:attribute name="pMasterWrapperlist" type="List"/>
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="pageSize" type="Integer" default="5"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" default="0"/>
<aura:attribute name="endPosn" type="Integer"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:PaginatorEvent" action="{!c.performNavigation}"/>
<div>
<aura:iteration items="{!v.pWrapperlist}" var="pw">
	<li>
<ui:inputCheckbox value="{!pw.isChecked}" />
&nbsp; &nbsp;
<ui:outputText value="{!pw.opp.Name}" />
&nbsp; &nbsp;
<ui:outputText value="{!pw.opp.StageName}" /></li>
</aura:iteration>
<c:Paginator pMasterWrapperlist="{!v.pMasterWrapperlist}" pageSize="{!v.pageSize}"
startPosn="{!v.startPosn}" endPosn="{!v.endPosn}"/>
</div>
</aura:component>

Key points:

  • “Paginator” component is embedded by passing the required parameters
  • Event handler method which will catch whenever the event is fired

Step 7: Call the below methods from the Pagination controller (PaginationHelper.js)


({
performNavigation : function(component,event) {
component.set("v.pWrapperlist",  event.getParam("pWrapperlist"));
component.set("v.endPosn", event.getParam("endPosn"));
component.set("v.startPosn", event.getParam("startPosn"));
},
paginate : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
component.set("v.pWrapperlist", wlist);
if(wlist.length > component.get("v.pageSize")){
var subWrapperlist = [];
for(var i=0; i<component.get("v.pageSize"); i++){
subWrapperlist.push(wlist[i]);
}
component.set("v.pWrapperlist", subWrapperlist);
}
},
getOpportunities : function(component) {
var action = component.get("c.getOpplist");
action.setParams({
});
action.setCallback(this, function(resp) {
var state=resp.getState();
if(state === "SUCCESS"){
component.set("v.pMasterWrapperlist", resp.getReturnValue());
component.set("v.masterlistSize", component.get("v.pMasterWrapperlist").length);
component.set("v.startPosn",0);
component.set("v.endPosn",component.get("v.pageSize")-1);
this.paginate(component);
}
});
$A.enqueueAction(action);
}
})

Key Points:

  • ‘PerformNavigation’ method will set the relevant attributes by fetching its values from the event whenever it is fired.
  • ‘getOpportunities’ method fetches the list of opportunities

Please feel free to post your queries/thoughts.

Happy coding!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s