SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Continua la nostra serie di post sul Client Side Rendering di SharePoint 2013.
Questa volta vedremo come sfruttare un qualsiasi plugin di JQuery all’interno dei nostri display template, così da rendere la visualizzazione delle nostre liste ancora più avanzata.

Il plugin che ho scelto è il plugin ProgressBar.js e, come potete ben immaginare, si occupa di renderizzare una progress bar.
Il risultato finale risulta quindi molto simile al nostro esempio di partenza, ma la cosa su cui vorrei porre attenzione è la tecnica utilizzata. Questo perché così come possiamo utilizzare ProgressBar.js allìinterno del nostro display template, allo stesso modo possiamo applicare tutti i plugin JQuery che troviamo sul web e che ci permettono di aumentare la user experience per l’utente finale su liste e document library di default di SharePoint 2013.
Nei prossimi post vedremo come sfruttare alcuni plugin molto conosciuti e che danno alle nostre liste un tocco davvero innovativo.

Il concetto di base è quello che tramite il codice che scriviamo per modificare la visualizzazione di un campo tramite il display template noi dobbiamo preparare l’HTML per poi applicarci il plugin.
Una volta preparato l'HTML possiamo aggiungere, alla fine del file Javascript che contiene il nostro display template, la chiamata al plugin scelto.
Vediamo il codice per capire meglio di cosa sto parlando.

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

D4S.SP2013.CSR.TasksPercentCompleteView = function (ctx) {
    var currentItem = ctx.CurrentItem;
    var currentValue = currentItem[ctx.CurrentFieldSchema.Name];
    var currentPercent = currentValue.substring(0, 2);    

    return '<div id="d4s-percent-' + currentItem.ID + '" data-value="' + currentPercent + '"></div>';
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': D4S.SP2013.CSR.TasksPercentCompleteView
        }
    };

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

$(document).ready(function () {
    var bars = $('div[id^=d4s-percent]');
    $.each(bars, function (index, item) {
        var pb = new ProgressBar(item.id, { 'width': '100px', 'height': '20px' });

        pbItem = {};
        pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "item1";
        pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.BAR;
        pbItem[ProgressBar.OPTION_NAME.OPACITY] = 0.5;
        pbItem[ProgressBar.OPTION_NAME.SPACE] = 0;
        pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT;
        pbItem[ProgressBar.OPTION_NAME.POSITION] = ProgressBar.OPTION_VALUE.POSITION.RELATIVE;
        pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.ORANGE;
        pbItem[ProgressBar.OPTION_NAME.PERCENT] = 60;
        pb.createItem(pbItem);

        pbItem = {};
        pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "line1";
        pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.LINE;
        pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT;
        pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.RED;
        pbItem[ProgressBar.OPTION_NAME.PERCENT] = 30;
        pb.createItem(pbItem);

        pbItem = {};
        pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "line2";
        pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.LINE;
        pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT;
        pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.GREEN;
        pbItem[ProgressBar.OPTION_NAME.PERCENT] = 80;
        pb.createItem(pbItem);

        pb.setPercent(parseInt($(item).attr('data-value')));
    });
});

Come potete vedere, prima abbiamo definito il rendering del nostro campo tramite la funzione TasksPercentCompleteView e abbiamo fatto in modo che tale funzione ritornasse l'HTML contenente un semplice DIV con un identificativo e l’attributo "data-value" valorizzato con la percentuale di completamento del task (il valore del campo PercentComplete, di cui stiamo ridefinendo il rendering), poi abbiamo applicato il plugin JQuery al completamento della creazione del DOM (sfruttando la funzione ready di JQuery).
Così facendo, il sistema di rendering di SharePoint ha richiamato tante volte la nostra funzione TasksPercenteCompleteView, così da ridefinire il rendering del campo, ma ha eseguito solo una volta la funzione ready di JQuery e il susseguente codice per applicare la funzionalità offerta da ProgressBar.js.
Ecco il risultato.


Bello no?
Per apprezzarlo meglio, vi invito sempre a ricordarvi cosa dovevamo fare nelle precedenti versioni di SharePoint per ottenere questo risultato :)