Tired of counting elements in lists? Leave it to ShortPoint Counter Boxes!

With ShortPoint, you can present the number of items stored in a SharePoint list in a Counter Box element. You have several views in your SharePoint list and would like to count the items depending which view you have chosen? 



No worries. Connect the Counter Box to any SharePoint list or library, apply some easy REST API magic, and you will have the number of items presented in a stylish and comprehensive way right where you want it. And of course, the numbers will renew dynamically. 


Note: this article is for counting the total of items in a list view. If you would like the Counter Boxes to count the items of the list in general, please check this solution.


Here is an example of the expected result:



Step 1. Configure the REST API settings

In edit mode of the page, open the settings of the Counter Box. Simply click the cog wheel icon, as shown below.



The settings window will open.



Switch to the Connect tab.



In the Select Connection Type field, choose REST API option from the drop-down.



In the REST API URL paste the following URL link (the items highlighted in redyellow and green require editing):


https://yoursitename/_api/web/lists/getbytitle('yourlistname')/views/getbytitle('listviewname')

  • yoursitename - should be replaced with your site name (root site, site collection, subsite);
  • yourlistname - should be replaced with the list name you would like to connect to;
  • listviewname - should be replaced with the list view 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 name of our Site Collection;
  • Employees is the name of our list;
  • Hired in 2019 is the name of the list view.



Click Enable Advanced Settings option.



Copy this code (the item highlighted in yellow require editing - it should be replaced with the list name you would like to connect to:

var listTitle = 'yourlistname';

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};


Skroll down to the Map Results field and paste the copied code:


Press Connect and wait until the button becomes red:




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.



Create a title for your countdown in the Counter Title field. 



Set up additional features, if required. You may as well check our ShortPoint Connect: Basic Tutorial solution.

For example, we are adding the Counter Icon:



You may click the Preview button to check the results.



If you are satisfied with the results, click Update and save the page.



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: