SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Ora che avete capito come ridefinire quella che è la visualizzazione di default di un campo SharePoint 2013, cerchiamo di fare un esempio un po' più serio.
Nella prima parte di questo post abbiamo ridefinito il campo "% complete" di una lista di task, in modo tale da stampare a video il testo "Hello from CSR!". Oggi vedremo come modificare notevolmente la UI di questo campo, sia in visualizzazione che in aggiunta/modifica.

Partiamo dalla visualizzazione.
Così come abbiamo stampato a video una frase, possiamo far ritornare alla funzione Javascript assegnata alle proprietà "View" e "DisplayForm" un po’ di codice HTML utile ad avere una visualizzazione un po’ più articolata e utile per l’utente finale. 

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

D4S.SP2013.PercentCompleteDisplay = function (ctx) {
    var currentItem = ctx.CurrentItem;
    var currentValue = currentItem[ctx.CurrentFieldSchema.Name];

    return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'>"
                + "<div id='d4sTask-" + currentItem.ID + "' style='width: " + currentValue.replace(/\s+/g, '') + "; background-color: #0094ff;'>&nbsp;</div>"
            + "</div>&nbsp;"
            + "<span id='d4sTaskLabel-" + currentItem.ID + "'>" + currentValue + "</span>";
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': D4S.SP2013.PercentCompleteDisplay,
            'DisplayForm': D4S.SP2013.PercentCompleteDisplay
        }
    };

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

Con poche righe di codice, ecco che abbiamo già un risultato degno di nota.


 

Pagina di dettaglio:



Dall'esempio capiamo l’importanza dell’oggetto "context" (la variabile "ctx" per intenderci), che contiene tutte le informazioni circa lo stato in cui si trova il nostro template di rendering. Tramite questo oggetto possiamo infatti accedere alle proprietà del campo, al valore che sta per essere visualizzato, allo stato della pagina in cui tale valore sta per essere visualizzato e tante altre info molto utile ai nostri scopi.
Questo oggetto viene passato a tutte le funzioni di rendering e la sua struttura cambia in base alla view o alla form in cui il nostro template è stato iniettato. In questo caso risulta molto utile la natura dinamica del linguaggio Javascript.

Nei prossimi post vedremo come modificare la modalità di inserimento dei valori in creazione o modifica, ma prima vi vorrei ricordare che per arrivare a questo risultato con le precedenti versioni di SharePoint avremmo dovuto districarci tra la sintassi XSLT o scrivere un campo custom. Ora facciamo tutto con qualche riga di Javascript e HTML. Un bel passo avanti per fortuna.