In this blog, we will have demo of how to implement
Paging using SharePoint 2013 Rest API
Paging in SharePoint?
Paging allows getting items from a SharePoint list in a chunks instead of getting them all in one shot, this chunk is controlled by two variables:
When requesting GET call to the List API from JavaScript: "/_api/web/lists/GetByTitle('ListName')/items", the default results returned are limited to 100 rows.
In this blog, we have given a demo example of Paging using SharePoint 2013 REST API. Lets review all the steps along with example below:
Step 1: To create paging using REST API. We first need to create a list in SharePoint. So create list a list name Employee in SharePoint. Add columns like First Name, LastName , Address , Email , ContactNo in It.
Step 2: After that create SharePoint Hosted App for Paging. Here Go to Templates -> Visual C# -> Office/SharePoint -> Apps and in that select App for SharePoint and give that a Name and click Ok.
Step 3: Here in What SharePoint site do you want to use for debugging your app? Add the url of your SharePoint online site url. In How do you want to host your app for SharePoint? Select SharePoint-hosted.
Step 4: After creating SharePoint hosted app, add Client Web Part (Host Web) page in the project. For that right click the project name and go to Add -> New Item.
Step 5: Here from Visual C# Items -> Office/SharePoint select Client Web Part (Host Web) and click Ok.
Step 6: Now select Create a new app web page for the client web part content and click Finish.
Step 7: The App will look like the below image where there will be Next-Previous buttons and in the property you can set page size as well.
Step 8: To create custom properties in app, you first need to define that properties in Element.xml file in that Client Web Part you added.
Step 9: Now create a property for SharePoint Hosted app in App.js which we can add once the app will be added to the SharePoint.
function getPageProperties() {
var params = document.URL.split("?")[1].split("&");
var pString;
for (var i = 0; i < params.length; i = i + 1) {
var param = params[i].split("=");
if (param[0] == "PageTitle") {
pageTitle = decodeURIComponent(param[1]);
$('#index-app-title').text(pageTitle);
}
elseif (param[0] == "PageLibraryURL") {
hostweburl = decodeURIComponent(param[1]);
}
elseif (param[0] == "PageLibraryName") {
pageLibraryName = decodeURIComponent(param[1]);
}
elseif (param[0] == "ItemTitleField") {
itemTitle = decodeURIComponent(param[1]);
}
elseif (param[0] == "ItemBodyField") {
itemBody = decodeURIComponent(param[1]);
}
elseif (param[0] == "PageSize") {
pageSize = parseInt(decodeURIComponent(param[1]));
topVal = pageSize;
lastPage = pageSize;
}
}
}
It will add Page Title, Page Library Url, Page Library name, Item Body Field and Page Size properties to the app.
Step 10: Now create a function for Next button in App.js.
If we click on ">" button; we need to pass parseInt(topVal) this simply tells SharePoint "I need the next X items that come after the item with ID 5".
Step 11: Now create the function for the Previous Button App.js.
If we click on "<" button; we need to pass parseInt(topVal); this simply tells SharePoint "I need the previous X items that precede (come before) the item with ID 4".
Step 12: Now deploy the project.
Step 13: Now in SharePoint create a page to add your app. For that go to Settings -> Add a Page.
Step 14: Now give name to a page and then click Create.
Step 15: Now in the page go to Page -> Edit to add the app in that page and after that go to Insert -> App.
Step 16: Now select your app and click ok to add it in the page.
Step 17: Now after adding the app click on the square at the right of the app and select Edit Web Part.
Step 18: Here you will make all the required changes through Page Properties, in that in Item Body Field Name select Body, Item Title Field Name select Title, List or Library Name select your list Here I have selected Announcement List, List or Library URL select that list url, in Page size select custom page size which will show the data according to that size and give Page Title which will be at the top.
Step 19: Here you can see the News App which is created. You can see that there are three news updates coming as we selected Page Size to 3. At the bottom you can see the number of pages is being shown. When you are in the first page only right arrow will be shown as there is nothing before it.
Step 20: Now if you select the right arrow you will go to the other news data in the list. As there are only 4 entries in the list you can see only two entries here and because there are no more data after that the right arrow is disabled and the left arrow is enabled as there are some news before the current news.
Paging in SharePoint?
Paging allows getting items from a SharePoint list in a chunks instead of getting them all in one shot, this chunk is controlled by two variables:
- Page size: number of items to be displayed.
- Page position: current index; in other words; in which page we are right now.
When requesting GET call to the List API from JavaScript: "/_api/web/lists/GetByTitle('ListName')/items", the default results returned are limited to 100 rows.
In this blog, we have given a demo example of Paging using SharePoint 2013 REST API. Lets review all the steps along with example below:
Step 1: To create paging using REST API. We first need to create a list in SharePoint. So create list a list name Employee in SharePoint. Add columns like First Name, LastName , Address , Email , ContactNo in It.
Step 2: After that create SharePoint Hosted App for Paging. Here Go to Templates -> Visual C# -> Office/SharePoint -> Apps and in that select App for SharePoint and give that a Name and click Ok.
Step 3: Here in What SharePoint site do you want to use for debugging your app? Add the url of your SharePoint online site url. In How do you want to host your app for SharePoint? Select SharePoint-hosted.
Step 4: After creating SharePoint hosted app, add Client Web Part (Host Web) page in the project. For that right click the project name and go to Add -> New Item.
Step 5: Here from Visual C# Items -> Office/SharePoint select Client Web Part (Host Web) and click Ok.
Step 6: Now select Create a new app web page for the client web part content and click Finish.
Step 7: The App will look like the below image where there will be Next-Previous buttons and in the property you can set page size as well.
Step 8: To create custom properties in app, you first need to define that properties in Element.xml file in that Client Web Part you added.
<!-- Define properties in the Properties element.
Remember to put Property Name on the Src attribute of the Content element above. -->
<Properties>
<Property
Name="PageTitle"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="SharePoint Empower News"
WebCategory="IndexPage Properties"
WebDisplayName="Page Title"
WebDescription="Provide the title of page.">
</Property>
<Property
Name="PageLibraryURL"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="https://sharepointonlineempower.sharepoint.com/sites/devsite"
WebCategory="IndexPage Properties"
WebDisplayName="Page Library URL"
WebDescription="Provide the URL to the site that contains the page library with a '/' on the end.">
</Property>
<Property
Name="PageLibraryName"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="News"
WebCategory="IndexPage Properties"
WebDisplayName="Page Library Name"
WebDescription="Provide the name of page library.">
</Property>
<Property
Name="ItemTitleField"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="Title"
WebCategory="IndexPage Properties"
WebDisplayName="Item Title Field Name"
WebDescription="Provide the field name of item title.">
</Property>
<Property
Name="ItemBodyField"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="Body"
WebCategory="IndexPage Properties"
WebDisplayName="Item Body Field Name"
WebDescription="Provide the field name of item body.">
</Property>
<Property
Name="PageSize"
Type="string"
RequiresDesignerPermission="true"
DefaultValue="5"
WebCategory="IndexPage Properties"
WebDisplayName="Page Size"
WebDescription="Provide the page size for number of items per page.">
</Property>
</Properties>
</ClientWebPart>
Step 9: Now create a property for SharePoint Hosted app in App.js which we can add once the app will be added to the SharePoint.
function getPageProperties() {
var params = document.URL.split("?")[1].split("&");
var pString;
for (var i = 0; i < params.length; i = i + 1) {
var param = params[i].split("=");
if (param[0] == "PageTitle") {
pageTitle = decodeURIComponent(param[1]);
$('#index-app-title').text(pageTitle);
}
elseif (param[0] == "PageLibraryURL") {
hostweburl = decodeURIComponent(param[1]);
}
elseif (param[0] == "PageLibraryName") {
pageLibraryName = decodeURIComponent(param[1]);
}
elseif (param[0] == "ItemTitleField") {
itemTitle = decodeURIComponent(param[1]);
}
elseif (param[0] == "ItemBodyField") {
itemBody = decodeURIComponent(param[1]);
}
elseif (param[0] == "PageSize") {
pageSize = parseInt(decodeURIComponent(param[1]));
topVal = pageSize;
lastPage = pageSize;
}
}
}
It will add Page Title, Page Library Url, Page Library name, Item Body Field and Page Size properties to the app.
Step 10: Now create a function for Next button in App.js.
function onNextPage() {
$('#index-app-content').empty();
topVal = topVal + pageSize;
firstPage = firstPage + pageSize;
lastPage = lastPage + pageSize;
//If PageSize will be greater than or equal to TopVal then It will go inside If
if (topVal >= pageSize) {
queryUrl = appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" +
pageLibraryName + "')/items?@target='" + hostweburl +
"'&$select=EncodedAbsUrl,Title,LastName,Address,Email,ContactNo,Id,Modified,EditorId&$orderby=Modified
desc&$top=" + parseInt(topVal);
}
//If PageSize will be less than TopVal means the data will be less than topval then It will go in else part
else {
topVal = pageSize;
firstPage = 1;
lastPage = pageSize;
queryUrl = appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" +
pageLibraryName + "')/items?@target='" + hostweburl +
"'&$select=EncodedAbsUrl,Title,LastName,Address,Email,ContactNo,Id,Modified,EditorId&$orderby=Modified
desc&$top=" + parseInt(topVal);
}
execCrossDomainRequest();
}
If we click on ">" button; we need to pass parseInt(topVal) this simply tells SharePoint "I need the next X items that come after the item with ID 5".
Step 11: Now create the function for the Previous Button App.js.
function onPreviousPage() {
$('#index-app-content').empty();
topVal = topVal - pageSize;
firstPage = firstPage - pageSize;
lastPage = lastPage - pageSize;
//If PageSize will be greater than or equal to TopVal then It will go inside If
if (topVal >= pageSize)
{
queryUrl = appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" +
pageLibraryName + "')/items?@target='" + hostweburl +
"'&$select=EncodedAbsUrl,Title,LastName,Address,Email,ContactNo,Id,Modified,EditorId&$orderby=Modified
desc&$top=" + parseInt(topVal);
}
//If PageSize will be less than TopVal means the data will be less than topval then It will go in else part
else
{
topVal = pageSize;
firstPage = 1;
lastPage = pageSize;
queryUrl = appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" +
pageLibraryName + "')/items?@target='" + hostweburl +
"'&$select=EncodedAbsUrl,Title,LastName,Address,Email,ContactNo,Id,Modified,EditorId&$orderby=Modified
desc&$top=" + parseInt(topVal);
}
execCrossDomainRequest();
}
If we click on "<" button; we need to pass parseInt(topVal); this simply tells SharePoint "I need the previous X items that precede (come before) the item with ID 4".
Step 12: Now deploy the project.
Step 13: Now in SharePoint create a page to add your app. For that go to Settings -> Add a Page.
Step 14: Now give name to a page and then click Create.
Step 15: Now in the page go to Page -> Edit to add the app in that page and after that go to Insert -> App.
Step 16: Now select your app and click ok to add it in the page.
Step 17: Now after adding the app click on the square at the right of the app and select Edit Web Part.
Step 18: Here you will make all the required changes through Page Properties, in that in Item Body Field Name select Body, Item Title Field Name select Title, List or Library Name select your list Here I have selected Announcement List, List or Library URL select that list url, in Page size select custom page size which will show the data according to that size and give Page Title which will be at the top.
Step 19: Here you can see the News App which is created. You can see that there are three news updates coming as we selected Page Size to 3. At the bottom you can see the number of pages is being shown. When you are in the first page only right arrow will be shown as there is nothing before it.
Step 20: Now if you select the right arrow you will go to the other news data in the list. As there are only 4 entries in the list you can see only two entries here and because there are no more data after that the right arrow is disabled and the left arrow is enabled as there are some news before the current news.
Comments