Modificare le righe di una lista tramite JSLink

SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013

• Introduzione al Client Side Rendering di SharePoint 2013
• Ridefinire la visualizzazione di un campo tramite il Client Side Rendering - Parte 1
• Utilizzare i namespace Javascript nella definizione di template per il Client Side Rendering
• Ridefinire la visualizzazione di un campo tramite il Client Side Rendering - Parte 2
• Ridefinire la modalità di inserimento di valori in un campo tramite il Client Side Rendering
• Gestire la modalità "Quick edit" all'interno di un display template
• Come applicare un plugin JQuery su un display template
• Aggiungere un tooltip per aiutare l'inserimento di valori tramite il Client Side Rendering
• Specificare più file Javascript all’interno della proprietà JSLink
• Utilizzare file CSS nei display template del Client Side Rendering
• Modificare il rendering delle righe di una lista tramite il Client Side Rendering (questo post)
• Modificare l'intera visualizzazione di una lista tramite il Client Side Rendering
• Applicare il plugin MixItUp su liste SharePoint 2013 tramite il Client Side Rendering
• Provisioning di display template 
• Ridefinire il rendering di un custom field tramite il Client Side Rendering

Negli esempi precedenti abbiamo visto un sacco di esempi circa la scrittura di display template utili alla modifica della visualizzazione di singoli campi. Oggi vedremo come sfruttare una delle altre funzionalità dei display template del Client Side Rendering: l'evento OnPostRender.
Tale evento viene lanciato dal sistema di rendering di SharePoint quando è stato completato il rendering della vista o della form di inserimento/modifica e ci offre quindi la possibilità di eseguire del codice personalizzato in quel particolare momento.
Di conseguenza, risulta molto utile per modificare la visualizzazione delle righe di una vista.

A titolo d'esempio, facendo riferimento alla solita lista di task, abbiamo modo di modificare la visualizzazione della relativa lista e scegliere un colore di sfondo per ogni riga in base al valore di uno dei campi della vista stessa (nel mio caso il campo "PercentComplete").

window.D4S = window.D4S || {};
window.D4S.SP2013 = window.D4S.SP2013 || {};
window.D4S.SP2013.CSR = window.D4S.SP2013.CSR || {};

D4S.SP2013.CSR.HighlightTaskRow = function (ctx) {
    for (var i = 0; i < ctx.ListData.Row.length; i++) {
        var item = ctx.ListData.Row[i];
        var percentComplete = parseInt(item.PercentComplete);
        var row = document.getElementById(GenerateIIDForListItem(ctx, item));
        if (percentComplete > 0 && percentComplete <= 30)
            row.style.backgroundColor = 'rgba(255, 0, 0, 0.2)';
        if (percentComplete > 30 && percentComplete <= 70)
            row.style.backgroundColor = 'rgba(255, 255, 0, 0.2)';
        if (percentComplete > 70)
            row.style.backgroundColor = 'rgba(0, 255, 0, 0.2)';
    }
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.OnPostRender = D4S.SP2013.CSR.HighlightTaskRow;
    ctx.Templates.Fields = {};
    ctx.ListTemplateType = 171;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

Come potete vedere, la funzione di callback che viene applicata all'evento OnPostRender ha un parametro in input che rappresenta il contesto di rendering e che viene valorizzato in automatico dal Client Side Rendering. Tramite questo contesto è possibile ciclare tra tutte le righe della nostra vista ed effettuare tutte le operazioni di cui abbiamo bisogno.
Inoltre, questo display template è stato creato per funzionare solamente se applicato a liste con ListTemplate = 171, cioè a liste di Tasks.
Di seguito il risultato dell’applicazione del nostro script d'esempio.

Immagino abbiate capito la potenza di questa funzionalità del Client Side Rendering.