0

Before i show my code, let me give some background. I am using JSLink in the webpart of the list. I have MDS disabled for the site. my javascript file is located in my root sitecollection in Style library.

this list works correctly at first but when filtered it looses the color until the list is refreshed. I have tried the skipanimation line as well, and it did nothing.

(function () {

  var overrideCtx = {};
  overrideCtx.Templates = {};

  overrideCtx.OnPostRender = [
    HighlightRowOverride
  ];

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}) ();

function HighlightRowOverride (inCtx) {

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

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

    if (listItem.Status == "Stale") {
      if (row != null) {
        row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
      }
    }    
  }
}
1
  • this is running on sharepoint 2016 Aug 13, 2020 at 20:00

1 Answer 1

0

Try this:

<script>
  (function(){
    // Create object that have the context information about the field that we want     to change it's output render
    var statusFiledContext= {};
    statusFiledContext.Templates = {};
    statusFiledContext.Templates.Fields = {
      //Apply the new redenring for nom du projet field on the list view
      "status" : {"View" : statusFiledTemplate}
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext);
  })();
  
  //this function provides our purpose
  function statusFiledTemplate(ctx){
    var status= ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  switch (status) { 
              case "Stale": 
                  return "<span style='color :#f00'>" + status + "</span>"; 
                  break; 
              case "Pending": 
                  return "<span style='color :#ff6a00'>" + status + "</span>"; 
                  break; 
              case "Rejected": 
                  return "<span style='color :#cab023'>" + status + "</span>"; 
          } 
  }
</script>

Test result:

enter image description here

Updated code:

<script>
(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.OnPostRender = renderItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();


function renderItem() {
    
    if (ctx.ListTitle == "test4") {
        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {
            var status = rows[i]["status"];            

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);
            if (row != null && status=="Pending" ) {
                row.style.backgroundColor = '#ffcccc';
            }
            
        }

        ctx.skipNextAnimation = true;
    }
   
}

</script>
7
  • I am looking to do entire row, not the text or background color of the column cell. but thanks for that. Aug 14, 2020 at 12:14
  • Check the updated.
    – Amos
    Aug 17, 2020 at 3:10
  • does not work for me either as a JSlink in the webpart or as a code snippet in a script editor web part. Aug 17, 2020 at 11:39
  • in the code you provided, I changed 'test4' to the title of my list 'FullRowColor'. I changed Aug 17, 2020 at 11:40
  • if (ctx.ListTitle == "test4") to "FullRowColor", var status = rows[i]["status"]; to Status as as my column is capitalized. if (row != null && status=="Pending" ) to Stale as Stale is the value that i want the row color changed on. Aug 17, 2020 at 11:42

Your Answer

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

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