Evidenziare una riga in una view in base al valore di un campo con JSLink (SharePoint)

Con questo JavaScript, basato su JQuery,è possibile, in SharePoint 2013, evidenziare un intera riga di una list view in base al valore di un campo.

In questo esempio controllo un campo di tipo data e se questo è nullo o con valore inferiore a oggi (scaduto) evidenzio l'intera riga impostando lo sfondo in rosso:

JavaScript

(function () {
  if (typeof SPClientTemplates === 'undefined') return;

  var fldCtx = {};
  fldCtx.Templates = {};
  fldCtx.Templates.Fields = {
    "DateToComplete" : {
      "View": function (ctx) {
        //evidenzia le righe con item scaduti o senza data
        var v= ctx.CurrentItem.DateToComplete;
        var cls = "";
        //if(ctx.inGridMode == true)
        if(v == "") {
          cls = "date-to-complete";
        }else{
          var dt = Date.parseExact(v, "d/M/yyyy");  //richiede Date.js http://www.datejs.com/
          var now = Date.today();
          if(dt == null || dt < now) 
            cls = "date-to-complete";
        }
        return "<div class='" + cls + "'>" + v + "</div>";
      }
    }
  };
  fldCtx.Templates.Footer = function(ctx) { 
    // cerco la riga (TR) e gli cambio il colore di sfondo
    //$('.date-to-complete').closest('tr').addClass('date-to-complete-row'); //definire la classe nel css
    $('.date-to-complete').closest('tr').find('td:first').css('background-color', '#FF0000');
    return ""; 
  };
  
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fldCtx);
})();
Per funzionare richiede jQuery e Date.js.
Tags:
JavaScript184 JQuery33 SharePoint498 SharePoint 2013137
Potrebbe interessarti anche: