Try ShortPoint now
Note: This article is for counting the total of items in a list view. If you would like the Counter Boxes to count the list items in general, please check How to Make the Counter Boxes Show the Total Number of Items in a SharePoint List.
Here is an example of the expected result:
TABLE OF CONTENTS
Step 1. Configure the REST API settings
1.1. Set up the REST API connection URL
In edit mode of the page, open the settings of the Counter Boxes. Simply click the cog wheel icon, as shown below.
The Settings tab will open:
Switch to the Connect tab and choose REST API from the connection options:
In the REST API URL paste the following URL link (the items highlighted in red, yellow and green require editing):
https://siteURL/_api/web/lists/getbytitle('listTitle')/views/getbytitle('viewName')
- siteURL - should be replaced with the site URL where the SharePoint list is located;
- listTitle - should be replaced with the SharePoint list title you would like to connect to;
- viewName - should be replaced with the SharePoint list view name you would like to connect to.
For example, our REST API URL looks like this:
https://mycompany.sharepoint.com/sites/HR/_api/web/lists/getbytitle('Employees')/views/getbytitle('Hired in 2019')
where:
- mycompany.sharepoint.com/sites/HR/ is the site collection URL where our SharePoint list is located;
- Employees is the title of our SharePoint list;
- Hired in 2019 is the name of the SharePoint list view.
1.2. Prepare the mapping function
Depending on the location of the SharePoint list to which you are connecting, choose and copy the code snippet:
Option 1. You are connecting to the list view of the same site collection
The item highlighted in yellow require editing:
- listTitle - should be replaced with the SharePoint list title you would like to connect to.
var listTitle = 'listTitle';
var $ = shortpoint.$;
var currentSite = window.location.protocol + "//" + window.location.host + _spPageContextInfo.webServerRelativeUrl;
var viewXml = '<View><Query>' + data.d.ViewQuery + '</Query></View>';
var url = currentSite + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems";
var queryPayload = {
'query' : {
'__metadata': { 'type': 'SP.CamlQuery' },
'ViewXml' : viewXml
}
};
var results = [];
var headers = {
Accept: "application/json;odata=verbose"
};
headers["X-RequestDigest"] = $("#__REQUESTDIGEST").val();
var ajaxOptions =
{
url: url,
type: "POST",
async: false,
contentType: "application/json;odata=verbose",
headers: headers
};
ajaxOptions.data = JSON.stringify(queryPayload);
$.ajax(ajaxOptions).done(function (response) {
results = response.d.results;
});
return { count : results.length };
Option 2. You are connecting to the list view of another site collection
The items highlighted in red and yellow require editing:
- siteURL - should be replaced with the site URL where the SharePoint list is located;
- listTitle - should be replaced with the SharePoint list title you are connecting to.
var listTitle = 'listTitle';
var $ = shortpoint.$;
var siteUrl ="siteURL";
var viewXml = '<View><Query>' + data.d.ViewQuery + '</Query></View>';
var url = siteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems";
var queryPayload = {
'query' : {
'__metadata': { 'type': 'SP.CamlQuery' },
'ViewXml' : viewXml
}
};
var results = [];
var headers = {
Accept: "application/json;odata=verbose"
};
$.ajax({
url: siteUrl + "/_api/contextinfo",
method: "POST",
async: false,
headers: { "Accept": "application/json; odata=verbose" },
}).done(function (ctxtInfo) {
headers["X-RequestDigest"] = ctxtInfo.d.GetContextWebInformation.FormDigestValue;
});
var ajaxOptions =
{
url: url,
type: "POST",
async: false,
contentType: "application/json;odata=verbose",
headers: headers
};
ajaxOptions.data = JSON.stringify(queryPayload);
$.ajax(ajaxOptions).done(function (response) {
results = response.d.results;
});
return { count : results.length };
1.3. Update the Advanced Settings
Enable Advanced Settings:
Scroll down to the Map Results field. Paste the code from the step 1.2:
1.4. Connect to the REST API
Press Connect and wait for connection to load:
After you see that the connection is set up, proceed to the next step to map the items:
Step 2. Map the Items and create a title
Switch to the Items tab.
Press the chain icon on the right of the Counter Number field and select count.
Note: Check our ShortPoint Connect: Basic Tutorial to know more about ShortPoint Connect and Items Mapping.
Create a title for your counter box in the Counter Title field.
Set up additional features, if required. For example, we are adding the Counter Icon:
You may click the Preview button to check the results:
Then, click Insert/Update and save your page:
Result
That's it. You can repeat the same steps for the different views of your list. Here is the end result we get for three different views of the same SharePoint list:
Related articles:
