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.
- 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.
- Finally, we have Pagination here using lightning component on the Home page. Based on the button selection, record list will appear.
Reference Link:
