1

I am working on a sharepoint server 2016. and i want to show the sum of my list fields.. so i follow this appraoch:-

https://social.technet.microsoft.com/wiki/contents/articles/30317.sharepoint-2013-displaying-sum-for-calculated-column-in-a-list-view-using-jslink.aspx

which worked well. but if the column i want to show the Sum of have an item which contain empty value, i will get this result sum=NaN. so seems it can not do the sum for null values. now i try modifying the script as follow, to check if the column is null and assign it zero as follow:-

function CalculatedFieldViewTemplate(ctx) { 
if(ctx.CurrentItem.Yearof2016MLC != null){
_totalValue += parseFloat((ctx.CurrentItem.Yearof2016MLC).replace(',', ''));
return ctx.CurrentItem.Yearof2016MLC;
}
else
{
    return 0;
}


}

but this did not solve the issue. i also try checking the following typeof ctx.CurrentItem.Yearof2016MLC != "undefined" but same problem... now the Yearof2016MLC is of type number and which does not have any defualt value and it is optional... and again if there is not any empty value for the Tearof2016MLC every thing will work well. so how i can solve this?

5
  • 2
    Yes because you are trying to call replace() on ctx.r. What is ctx.r? May 15, 2017 at 17:15
  • @DylanCristy the ctx.r is just a copy of the field ctx.CurrentItem.Total_x0020_billing. as shown on my above script
    – John John
    May 15, 2017 at 17:28
  • 1
    No it's not. r is your copy. ctx.r is nothing. May 15, 2017 at 17:54
  • Note that ctx is a global object, everyone passes it as a variable, but it is not. Objects in JavaScript are always passed by reference. So depending on when this code executes, ctx can be a totally different object. In CSR function calls you can leave the function definition as ( ) instead of (ctx) and all should work the same (because ctx is global object) May 15, 2017 at 18:49
  • @DylanCristy sorry it is my fault ..please check my edit to see my updated code..
    – John John
    May 15, 2017 at 22:01

1 Answer 1

3

That TechNet article is just stupid... using hardcoded Columnnumbers to inject content

And the Array.reduce method (since IE9) is a lot easier to calculate

I whipped this up real quick.. ofcourse with Cisar, so this is the complete MDS safe CSR file:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function sumColumn(columnName){
    var rows=ctx.ListData.Row; // global ctx!!
    var sum=rows.reduce(function(sums,item){  // loop over all Array items
        var value=item[columnName];
        return sums + (value ? Number(value) : 0); // calculate sums, does not take care of strings!
    },0); // sums starts at 0
    var id="Sum"+columnName; // unique id so multiple columns can be summed
    var sumDIV=document.getElementById(id);
    if(!sumDIV){ // if no Sum div exist
      sumDIV=document.createElement('DIV');
      sumDIV.id=id;
      // find column
      var header=document.querySelector("[id*='thead-WPQ1'] div[name='"+columnName+"']");
      header.appendChild(sumDIV);
    }
    sumDIV.innerHTML=String.format("<B>Sum: {0}</B>",sum);
  }

  function init() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) { 
        sumColumn('MonthSpan');   // USE INTERNAL FIELD NAME!
      },
    });
  }
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/sumcalculated.js"), init);
  init();
});

See last Column, just to proof it works, I picked a Custom List I had open so no fancy sum:

Paging

This only gets you the Sum in the View

If you need the sum of all Items you

  • Need code behind/workflow to calculated a Sum for every new Item added

OR

  • Need to read all Items using JSOM or REST code, then use above code to proces the rows you get with data.d.results
14
  • so now how i need to reference Cisar inside my sharepoint sites? is there a script i need to reference ?
    – John John
    May 15, 2017 at 21:18
  • also i am not sure what i need to provide inside the sumcalculated.js ???can you adivce on this further ?
    – John John
    May 15, 2017 at 21:24
  • 2
    Cisar is a Chrome Extensions that adds an editor (just like you are now using Notepad or Visual Studio) to the F12 Dev tools, It creates the JS files you are now creating by hand, sets the JSLinks you are now setting by hand. So everything is the same as you are now doing by hand, only more automated. The only thing to change in the above code is the internal fieldname of the View field you want to Sum May 16, 2017 at 8:08
  • 1
    Hi there, I think both of you need to focus on the problem and lay of the attitude. I'm sure Danny is just trying to help you John, and you have to try to take his advice. And Danny, I think John wants your help May 16, 2017 at 13:39
  • 1
    @johnG But Danny DID give you an answer: you can't accomplish what you need with straight JSLinks. You need to use JSOM or REST. If you are having trouble with that as well, then revise or ask a new question.
    – wjervis
    May 18, 2017 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.