How can we help you today?

How to Display Sum Total of a SharePoint List Column Using ShortPoint Counter Boxes

If you have a SharePoint list that displays the sum total of the items in a column, and you want to display it on your SharePoint page, this article is for you. We will give you a detailed instruction how it is done using the ShortPoint Counter Box Design Element and some REST API magic.


Here is an example of a ShortPoint list that we are going to use:


SharePoint list samples


And a sample of how the Counter Box Design Element is going to look like on your page after following this article:


sample of Counter Boxes


NOTE: This article is for displaying the sum total of items in a column. If you would like the Counter Boxes to show the total number of items in a SharePoint list, then you may check How to make the Counter Boxes Show the Total Number of Items in a SharePoint List.

TABLE OF CONTENTS


Before we begin

  • Make sure you are on Office 365 or SharePoint 2019 environment
  • Make sure you have ShortPoint installed on your SharePoint sites(s). We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.
  • It is important that you are a ShortPoint user with an active license.

Prerequisite

  • You have a column in your SharePoint list that already displays the sum total of the items added to the list: 


Prerequisite SharePoint list sample


  • You have Counter Boxes Design Element added to the SharePoint page.

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.  


INFO: Currently, configuring ShortPoint connections is only supported in the Wireframe Builder. Make sure to switch to it, if you are in the Visual Builder mode: 
switch to Wireframe Builder


Click the cog wheel icon as shown below:


  • New Wireframe Builder:


New Wireframe Builder


  • Legacy Wireframe Builder: 


Click the settings of the Counter Box Design Element


The Settings tab will open:


The settings tab will open


Switch to the Connect tab and choose REST API from the connection options: 


Click Connect and choose REST API


In the REST API URL, paste the following URL link (the items highlighted in red and yellow require editing): 


https://siteURL/_api/web/lists/getbytitle('LISTNAME')/items


  • siteURL - should be replaced with the site URL where the SharePoint list is located;
  • LISTNAME - should be replaced with the SharePoint list title you would like to connect to.


For example, our REST API URL looks like this: 


https://mycompany.sharepoint.com/sites/IT/_api/web/lists/getbytitle('Our Company')/Items


where:

  • mycompany.sharepoint.com/sites/IT is the site collection URL where our SharePoint list is located;
  • Our Company is the title of our SharePoint list.


REST API sample URL


1.2 Prepare the mapping function


We have prepared a code that we can use to make the REST API connection successful. Please copy the code snippet below.


Make sure to change the ColumnName to the name of the column where the total sum is calculated in your SharePoint list.

var items = data.d.results;
var result = {};

if(items) {
  var columnsToCount = ['ColumnName'];

  for(var i=0; i < columnsToCount.length; i++){
      var columnName = columnsToCount[i];
      result[columnName + 'Count'] = 0;
  }

  items.forEach(function(item){
    for(var columnIndex=0; columnIndex < columnsToCount.length; columnIndex++){
      var columnName = columnsToCount[columnIndex];
      var columnValue = item[columnName];
      if(columnValue){
        result[columnName + 'Count'] += columnValue;
      }
    } 
  });

}

return result;
IMPORTANT: In our case, the ColumnName is replaced with NumberofEmployees since it is the column name of our SharePoint list with sum total.

NOTE: To know more about the REST API connection, you may check the Connection Type: REST API article.

1.3 Update the Advanced Settings


Click the toggle button to Enable Advanced Settings:


Enable advanced settings


Scroll down to the Map Results field and paste the code from Step 1.2:


Map Results field


1.4 Connect to the REST API


Once the code has been pasted to the Map Results, press the Connect button, and wait for the connection to load:


Click the connect button


After you see that the connection is set up, proceed to the next step to map the items:


Confirm connection


Step 2: Map the Items and create a title


Now that you are able to establish the REST API connection, let us switch to the Items tab: 


Switch to the Items tab


Press the chain icon on the right side of the Counter Number field and select the name of your column. In this example, the name of our column is NumberofEmployees.


Select the Counter Number


NOTE: To know more about ShortPoint Connect and Items mapping, you may visit ShortPoint Connect: Basic Tutorial. 


Create a title for your counter box in the Counter Title field:


Add a title for your Counter Box


You may add additional features depending on your preference. For example, we will be adding a Counter Icon to our Counter box


Add an Icon


You may click Preview button to check the results:


Preview result before saving


Then, click Insert/Update and save your page:


Click Update to save the settings


Result


That's it. Here is how it will look like on your page: 

sample result


Related articles:

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 65 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