2

So I have a calculated field in my List view that gives the number of days from the contract end date - current date. I wrote the following script to change the color of the row if less then 90 or greater then 90 days.

I cannot seem to get it to work, pretty much the first SharePoint Script I have written. Could anyone point out what is wrong?

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.OnPostRender = [
    HighlightRowOverride
];

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function HighlightRowOverride(inCtx) {


    for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
        var listItem = inCtx.ListData.Row[i];

        var iid = GenerateIIDForListItem(inCtx, listItem);
        var row = document.getElementId(idd);

        if (listItem.[Contractdaysleft] > 90) {

            row.style.backgroundColor = "yellow"; //yellow

        }

        if (listItem.[Contractdaysleft] < 90) {

                    row.style.backgroundColor = "red"; //red

        }

    }


}
  • How do you add additional information? Tried to but seems there are major restrictions. – Greatwhite Feb 2 '16 at 13:57
  • You can edit your own post and get more privileges if you gain more points. – Danny '365CSI' Engelman Feb 6 '16 at 21:41
3

First answering your question:

listItem.[Contractdaysleft]

Should be written as:

listItem.Contractdaysleft

//which is the same as:

listItem["Contractdaysleft"]

Writing less JavaScript using iCSR.js

I took the liberty of making your Contracts and End Date question use-case
into an iCSR.js example

With this Open-Source CSR support library it can be done in one statement.

And you do not need any other Today calculations in your list

If you have a column "ContractEndDate" (or any DateTime column), you declare:

      "ContractEndDate":{
        View : iCSR.DueDate({
          ranges:'red,89,white,90,yellow',
          rowcolor:true,
        })
      }

To produce:

(blurred image caused by imgur host jpg compression)

Note: your code did not code the 90 days date either

No need for OnPostRender or anything else

All CSR code required

Ofcourse you need to load the iCSR.js library BEFORE the CSR code executes.

So the complete CSR file (csr_contracts.js) will be:

function executeCSR() {//function gets called AFTER the iCSR library is loaded
  var csrfile="~siteCollection/Style Library/csr_contracts.js";//name of this csr file
  function init(){
    var overrides={
      Templates: {
        Fields: {
          "ContractEndDate":{//date column with the contract end date
            View : iCSR.DueDate({
              ranges:'red,89,white,90,yellow',
              rowcolor:1,
            })
          }
        }//Fields
      }//Templates
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrides);
  };//init
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens(csrfile), init);
  init();// MDS safe
};//executeCSR
//Using the public demo version, download the library to your own server
SP.SOD.registerSod("iCSR", 'https://365csi.nl/iCSR/iCSR.js');//register external library
SP.SOD.executeFunc("iCSR", null, executeCSR );//load the iCSR library
if (typeof iCSR !== 'undefined') executeCSR();//line only required so Cisar does live edits

iCSR.js can do better

Text color contrast is an issue, and you probably want some more highligting of important info:

Change the View definition to:

      "ContractEndDate":{//date column with the contract end date
        View : iCSR.DueDate({
          ranges:     "coral/red,-1,lightcoral,0,khaki/red,89,lightgreen,90,yellowgreen",
          rowcolor:   true,
          red:        "style=color:[msRed]",
          labelNodate:"<i [red]>No Contract Enddate!</i>",
          labelToday: "<b [red]>Today</b>",
        })

And you get:

I do hope that code needs no explanation...

iCSR.js is the result of making my own CSR development as easy as 1,2,3

(and a huge ambition to proof jQuery development is something of the past)

iCSR.js is open source on GitHub

Editing CSR files

Please use the Cisar Chrome Browser extension by Andrei Markeev

"It is the best thing since sliced bread" -- Danny Engelman

iCSRjs

| improve this answer | |
0

Do you think its the typo in the code...'iid' and 'idd'?

If that's not it, check the dev tools to see if you see any errors in the console. Then write the values of 'iid' and 'row' to console using console.log(iid) and console.log(row). Check if any of those values are undefined.

Do the same inside the if conditions too. Let me know at what point you are having the issue.

| improve this answer | |
0

listItem.[Contractdaysleft] is this correct? i think it should be listItem[Contractdaysleft] without dot.

| improve this answer | |
  • OK so I made the typo changes and no effect. So I decided to comment out the if statements and just try to at least turn the row yellow and that didn't even work. – Greatwhite Feb 2 '16 at 13:54
  • (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.OnPostRender = [ HighlightRowOverride ]; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); function HighlightRowOverride(inCtx) { for (var i = 0; i < inCtx.ListData.Row.length; ++i) { var listItem = inCtx.ListData.Row[i]; var idd = GenerateIIDForListItem(inCtx, listItem); var row = document.getElementId(idd); row.style.backgroundColor = "yellow"; } inCtx.skipNextAnimation = true; } – Greatwhite Feb 2 '16 at 13:54
  • did you debug the script? may be code in the loop is not executing. – Ali Feb 3 '16 at 0:03
  • OK so now I have made it as simple as possible and a few corrections and still cannot get it to even turn a row yellow. – Greatwhite Feb 3 '16 at 20:32
  • (function () { var overrideCtx = {}; overrideCtx.Templates = {}; overrideCtx.Templates.fields = {'Contractdaysleft': { 'View' : HighlightRowOverride }}; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); function HighlightRowOverride(inCtx) { for (var i = 0; i < inCtx.ListData.Row.length; ++i) { var listItem = inCtx.ListData.Row[i]; var idd = GenerateIIDForListItem(inCtx, listItem); var row = document.getElementId(idd); row.style.backgroundColor = "yellow"; //yellow } – Greatwhite Feb 3 '16 at 20:32

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.