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?

  • 2
    Yes because you are trying to call replace() on ctx.r. What is ctx.r? – Dylan Cristy May 15 '17 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 Gu May 15 '17 at 17:28
  • 1
    No it's not. r is your copy. ctx.r is nothing. – Dylan Cristy May 15 '17 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) – Danny '365CSI' Engelman May 15 '17 at 18:49
  • @DylanCristy sorry it is my fault ..please check my edit to see my updated code.. – john Gu May 15 '17 at 22:01
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
  • so now how i need to reference Cisar inside my sharepoint sites? is there a script i need to reference ? – john Gu May 15 '17 at 21:18
  • also i am not sure what i need to provide inside the sumcalculated.js ???can you adivce on this further ? – john Gu May 15 '17 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 – Danny '365CSI' Engelman May 16 '17 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 – Robert Lindgren May 16 '17 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 '17 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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