SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Nel precedente post abbiamo visto come è possibile, sfruttando i display template del Client Side Rendering, ridefinire completamente la visualizzazione di una vista di una lista SharePoint 2013.
Sfruttando questa tecnica, assieme ad un plugin JQuery molto popolare, possiamo offrire all'utente finale una user experience sulla lista veramente innovativa rispetto alla modalità di rendering di default.
Vediamo il codice.

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

D4S.SP2013.CSR.TasksHeader = function (ctx) {
    var html = '<div class="filterTitle">FILTER - </div>';
    html += '<div class="filter" data-filter="all">Show All</div>';
    html += '<div class="filter" data-filter=".Completed">Completed</div>';
    html += '<div class="filter" data-filter=".InProgress">In progress</div>';
    html += '<div class="filter" data-filter=".NotStarted">Not started</div>';
    html += '<div class="filterTitle">SORT - </div>';
    html += '<div class="sort" data-sort="default">Default</div>';
    html += '<div class="sort" data-sort="priority:asc">Proprity (asc)</div>';
    html += '<div class="sort" data-sort="priority:desc">Proprity (desc)</div>';
    html += '<div class="sort" data-sort="random">Random</div>';
    html += '<div class="clearBoth"></div>';
    html += '<div id="d4s-tasks-container">'

    return html;
};

D4S.SP2013.CSR.TasksItem = function (ctx) {
    var currentItem = ctx.CurrentItem;
    var priority = currentItem.Priority.substring(1, 2);
    var status = currentItem.Status.replace(' ', '');

    var html = '<div class="mix d4s-taskItem ' + status + '" data-priority="' + priority + '">';
    html += '<h2>' + currentItem.Title + '</h2>';
    if (currentItem.AssignedTo.length > 0) {
        html += 'Assigned to: ' + currentItem.AssignedTo[0].title + '<br />';
    }
    html += 'Status: ' + currentItem.Status + '<br />';
    html += 'Priority: ' + currentItem.Priority.substring(currentItem.Priority.indexOf(' '));
    html += '</div>';

    return html;
};

D4S.SP2013.CSR.TasksFooter = function (ctx) {
    var html = '</div>'
    html += '<div class="clearBoth"></div>';
    return html;
};

D4S.SP2013.CSR.ApplyCSSForTasks = function(ctx) {
   var css = '<link rel="stylesheet" type="text/css" href="/_layouts/15/D4S/Styles/d4s-tasks.css"></link>';
   document.write(css);
}

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Header = D4S.SP2013.CSR.TasksHeader;
    ctx.Templates.Footer = D4S.SP2013.CSR.TasksFooter;
    ctx.Templates.Item = D4S.SP2013.CSR.TasksItem;
    ctx.OnPreRender = D4S.SP2013.CSR.ApplyCSSForTasks;

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

$(document).ready(function () {
    $('#d4s-tasks-container').mixItUp();
});

In questo display template applichiamo la tecnica che abbiamo visto nel precedente post, oltre all'utilizzo del plugin JQuery MixItUp.
Per prima cosa abbiamo ridefinito header, footer e la singola riga della nostra lista di task.
All'interno della funzione che ridefinisce la visualizzazione della singola riga abbiamo preparato l'HTML di modo da visualizzare le informazioni base del task, ma con uno stile differente rispetto a quello di default. Gli stili vengono presi dal file "d4s-tasks.css" che è stato importato all'interno della pagina attraverso la funzione di callback assegnata alla proprietà OnPreRender.
Ogni singolo elemento è stato poi "taggato" tramite il valore del relativo campo Status e del relativo campo Priority, utilizzando le tecniche evidenziate dal plugin MixItUp (cioè il filtro degli elementi tramite una classe CSS, nel nostro caso è stato utilizzato il valore del campo Status, e il sorting degli elementi tramite i valori inseriti all'interno dell’attributo "data-priority", nel nostro caso tale attributo è stato valorizzato tramite il valore del campo Priority).
Poi è stato creato l'header con pulsanti per filtrare gli elementi della lista e per ordinarli. Su questi pulsanti è stato specificato che il filtro dovesse essere fatto sulle classi "Completed", "InProgress" e "NotStarted" (i valori che può avere il campo "Status" della nostra lista di task) e che l'ordinamento potesse essere crescente, decrescente o random.
Infine, al completamento del caricamento del DOM della pagina (tramite l'evento "ready" di JQuery), è stato applicato il plugin MixItUp sfruttando il selettore ".d4s-tasks-containter".
Volete vedere il risultato? Eccolo:


Veramente di impatto no?
Come vi dicevo nei precedenti post di questa serie, ricordatevi che la funzionalità di filtro e di ordinamento che abbiamo appena implementato tramite questo esempio, viene fatta solamente sugli elementi ritornati dalla vista SharePoint. Questo per dirvi che se la nostra lista contiene 100 elementi e la vista di default ne ritorna solo 30, questo display template effettua filtro e ordinamento solamente sui 30 elementi ritornati dalla vista. Questo a causa della natura del Client Side Rendering.

In ogni caso, se ci pensate bene, in questo modo abbiamo appena implementato un'applicazione a sé stante, basandoci su una lista SharePoint e qualche riga di codice Javascript. Il tutto senza scrivere una web part e senza modificare la pagina inserendo codice Javascript in maniera barbina, ma sfruttando una funzionalità del core di rendering di SharePoint 2013.