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:

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

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
• Prerequisite
• Step 1. Configure the REST API settings
  • 1.1 Set up the REST API connection URL
  • 1.2 Prepare the mapping function
  • 1.3 Update the Advanced Settings
  • 1.4 Connect to the REST API
• Step 2: Map the Items and create a title
• Result

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.

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

Prerequisite

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

• 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 Grid Mode. Make sure to switch to it, if you are in the Live Mode: 

Click the cog wheel icon as shown below:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder: 

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

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:

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

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:

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

Now that you are able to establish the REST API connection, let us 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.

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:

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

You may click Preview button to check the results:

Then, click Insert/Update and save your page:

Result

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

Related articles:

• How to Make Bold Titles, Symbols and Numbers of the ShortPoint Counter Boxes
• How to Change the Location of the Symbol in the Counter Boxes Design Element with Custom CSS
• How to Make the Counter Boxes Show the Number of Items in a SharePoint List (Different Views)