Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Modificare le righe di una lista tramite JSLink

SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


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.

blog comments powered by Disqus