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.


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.

NoteShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.


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

Click the cog wheel icon as shown below:

  • New ShortPoint Page Builder Grid Mode:

New Wireframe Builder

  • Legacy Page 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): 


  • 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:'Our Company')/Items


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

    for(var columnIndex=0; columnIndex < columnsToCount.length; columnIndex++){
      var columnName = columnsToCount[columnIndex];
      var columnValue = item[columnName];
        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


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