How can we help you today?

How to Make the Counter Boxes Show the Number of Items in a SharePoint List (Different Views)

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 Boxes Design Element. 


Have several views in your SharePoint list and would like to count the items depending on which view you have chosen? 

No worries. Connect the Counter Boxes 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 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 redyellow 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:



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 27 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more