Pagination Using Lightning Components

Lightning Component is a new UI framework for developing web apps for mobile and desktop devices.It is used to build a single-page application with responsive user interfaces, and also it uses JavaScript on the client side and Apex on the server side.

Salesforce Lightning Components is a new UI framework for developing web apps for mobile and desktop devices. It is used to build a single-page application with responsive user interfaces, and also it uses JavaScript on the client side and Apex on the server side.

The below examples explain how to do a pagination using Lightning components.

Step 1: Go to Setup -> Developer Console -> File -> New -> Lightning Component -> Enter the lightning component name as “Opportunity_PaginationTable”.

Note:

  • <aura:attribute> tag defines an attribute available on component. name and type attributes are required for this tag.
  •  For dropdown we can use <ui:inputSelect> tag in lightning component.
  •  <aura:iteration> tag used to iterate over a collection of items. Data changes in the collection are rerendered automatically on the page.
  • Created the lightning buttons : First, Previous, Next, Last for page navigation.

Opportunity_PaginationTable.cmp 

<aura:component controller=”OpportunityController” implements=”force:appHostable,flexipage:availableForAllPageTypes”>

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

<aura:attribute name=”opportunityList” type=”Opportunity[]” />

<aura:attribute name=”paginationList” type=”Opportunity[]”/>

<aura:attribute name=”pageSize” type=”Integer” default=”5″/>

<aura:attribute name=”totalSize” type=”Integer”/>

<aura:attribute name=”start” type=”Integer” />

<aura:attribute name=”end” type=”Integer”/>

<table >

<tr > <td style=”width:5%”>Show</td><td style=”width:7%”><ui:inputSelect aura:id=”records” change=”{!c.onSelectChange}”>

<ui:inputSelectOption text=”5″ value=”5″/>

<ui:inputSelectOption text=”10″ value=”10″/>

<ui:inputSelectOption text=”20″ value=”20″/>

<ui:inputSelectOption text=”30″ value=”30″/>

</ui:inputSelect></td><td>Entries</td>

<td style=”width:7%”>Search</td>

<td style=”width:25%”>

<ui:inputText aura:id=”input1″   change=”{!c.searchKeyChange}”   required=”true”></ui:inputText>

</td>

</tr>

</table>

<table class=”slds-table slds-table–bordered “>

<thead>

<tr style=”background-color:#6cbcd2;color:white;font-weight:bold”>

<th>Name</th>

<th>Stage</th>

<th>Closedate</th>

<th>Amount</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.paginationList}” var=”item”>

<tr>

<td><ui:outputText value=”{!item.Name}” /></td>

<td><ui:outputText value=”{!item.StageName}” /></td>

<td><ui:outputText value=”{!item.CloseDate}” /></td>

<td><ui:outputText value=”{!item.Amount}” /></td>

</tr>

</aura:iteration>

<lightning:button label=”First” disabled=”{!v.start == 0}”  onclick=”{!c.first}” />

<lightning:button label=”Previous” disabled=”{!v.start == 0}”  onclick=”{!c.previous}” />

<lightning:button label=”Next” disabled=”{!v.end >= v.totalSize}” onclick=”{!c.next}” />

<lightning:button label=”Last” disabled=”{!v.end >= v.totalSize}” onclick=”{!c.last}” />

</tbody>

</table>

</aura:component>

Step 2: Create a Client-Side Controller

  • In the client-side controller, Aura handler calls the action like doInit which initializes the functions in Lightning component.
  • The setCallback method will return a response like Success , failure.
  • If it is a “Success”, we can get the list of Opportunity records. We can process this list of Opportunity records based on the button selection.
  • The onSelectChange method will be called when a dropdown value gets changed.
  • Iterate the opportunity list records using Start, End , totalsize, and PageSize attributes based on the button selection.
  • Here totalsize denotes the Opportunity list size. We must declare the attribute for Start, end, totalsize, and pagesize in the component.

Opportunity_PaginationTableController.js

({

doInit : function(component, event, helper)

{

var pageSize = component.get(“v.pageSize”);

var action = component.get(“c.getOpportunities”);

action.setCallback(this, function(response)

{

var state = response.getState();

if (component.isValid() && state === “SUCCESS”)

{

component.set(‘v.opportunityList’, response.getReturnValue());

component.set(“v.totalSize”, component.get(“v.opportunityList”).length);

component.set(“v.start”,0);

component.set(“v.end”,pageSize-1);

var paginationList = [];

for(var i=0; i< pageSize; i++)

{

paginationList.push(response.getReturnValue()[i]);

}

component.set(‘v.paginationList’, paginationList);

//console.log(paginationList);

}

});

$A.enqueueAction(action);

},

onSelectChange : function(component, event, helper) {

var selected = component.find(“records”).get(“v.value”);

var paginationList = [];

var oppList = component.get(“v.opportunityList”);

for(var i=0; i< selected; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

searchKeyChange: function(component, event) {

var searchKey =  component.find(“input1”).get(“v.value”);

console.log(searchKey);

var action = component.get(“c.getByName”);

var keysize = component.get(“v.totalSize”);

action.setParams({

“searchKey”: searchKey

});

action.setCallback(this, function(response) {

var state = response.getState();

if (component.isValid() && state === “SUCCESS”)

{

component.set(‘v.opportunityList’, response.getReturnValue());

component.set(“v.totalSize”, component.get(“v.opportunityList”).length);

var paginationList = [];

for(var i=0; i< keysize; i++)

{

paginationList.push(response.getReturnValue()[i]);

}

component.set(‘v.paginationList’, paginationList);

}

});

$A.enqueueAction(action);

},

first : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

for(var i=0; i< pageSize; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

last : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var pageSize = component.get(“v.pageSize”);

var totalSize = component.get(“v.totalSize”);

var paginationList = [];

for(var i=totalSize-pageSize+1; i< totalSize; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

next : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var end = component.get(“v.end”);

var start = component.get(“v.start”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

var counter = 0;

for(var i=end+1; i<end+pageSize+1; i++)

{

if(oppList.length > end)

{

paginationList.push(oppList[i]);

counter ++ ;

}

}

start = start + counter;

end = end + counter;

component.set(“v.start”,start);

component.set(“v.end”,end);

component.set(‘v.paginationList’, paginationList);

},

previous : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var end = component.get(“v.end”);

var start = component.get(“v.start”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

var counter = 0;

for(var i= start-pageSize; i < start ; i++)

{

if(i > -1)

{

paginationList.push(oppList[i]);

counter ++;

}

else {

start++;

}

}

start = start – counter;

end = end – counter;

component.set(“v.start”,start);

component.set(“v.end”,end);

component.set(‘v.paginationList’, paginationList);

}

})

Step 3: Create an Apex Class

  • In the Controller, using the getOpportunities method, we retrieve all opportunity records with a condition
  • We must declare @AuraEnabled in the Apex class method.
  • If any apex class method is not denoted by @AuraEnabled, then it’s not called by the lightning controller

OpportunityController_AC 

public with sharing class OpportunityController_AC

{

@AuraEnabled

public static List<Opportunity> getOpportunities()

{

return [SELECT Id, Name,StageName,CloseDate,Amount FROM Opportunity Where Amount!= Null];

}

// This method used for reterived  the list of opportunity records based on the search string

@AuraEnabled

public static List<Opportunity> getByName(String searchKey) {

String name = ‘%’ + searchKey + ‘%’;

return [SELECT id, Name,StageName, CloseDate,Amount FROM Opportunity WHERE name LIKE :name and Amount!= Null];

}

}

Step 4: How to include Lightning component in a home page?

  • Switch to Lightning experience.
  • We can use this pagination component to any objects.
  • For example, I have used this component in Home Page. Click Settings and select Edit Page. 
How To Include Salesforce Lightning Components into Salesforce Home Page
  • After the select Edit Page, Lightning Process Builder window will open. Here, we will be able to edit our page layouts.
  • In the right-side corner, all standard and custom components are available.
  • You can easily drag and drop the components to the canvas panel.
  • Drag the Opportunity_PaginationTable lightning component and click Save.
  • Salesforce Lightining Components
  • Finally, we have Pagination here using lightning component on the Home page. Based on the button selection, record list will appear.
Salesforce Lightining Components Pagination

Reference Link:

https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics
https://trailhead.salesforce.com/en/projects/quickstart-lightning-components

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Events in LWC

Introduction to Events  An event that fired by another lightning component or the component itself. Events is nothing but the way component is going to

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.