Evidenziare una riga in una view in base al valore di un campo con JSLink (SharePoint)
04 settembre 2013
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:
Per funzionare richiede jQuery e Date.js.
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);
})();