SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Nei precedenti post abbiamo introdotto il Client Side Rendering e abbiamo cercato di muovere i primi passi con questo framework, ridefinendo il rendering (solo in visualizzazione per ora) di uno dei campi di default di SharePoint 2013.
Come avrete visto quindi, possiamo ridefinire la UI di campi SharePoint tramite delle funzioni Javascript e un particolare oggetto (il nostro template) che viene iniettato in pagina dal nuovo sistema di rendering introdotto nel prodotto di collaborazione Microsoft. 
Durante la definizione di queste funzioni di rendering, vi consiglio vivamente di utilizzare i namespace Javascript.

Abbiamo detto che la visualizzazione di un campo può essere ridefinita assegnando una nuova funzione alla proprietà "View" del campo che stiamo ridefinendo. Nel primo esempio abbiamo utilizzato una funzione Javascript in-line. 

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': function() { return 'Hello from <b>CSR</b>!'; },
            'DisplayForm': function() { return 'Hello from <b>CSR!</b>'; },
            'EditForm': function() { return 'Hello from <b>CSR!</b>'; },
            'NewForm': function() { return 'Hello from <b>CSR!</b>'; },
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

Questa funzione è perfetta per evitare conflitti di nomi in pagina, ma aumenta la memoria che la pagina occupa all'interno del browser in quanto la funzione in-line viene istanziata ogni volta che il campo appare nella griglia.
Si ha un aumento delle performance se, al posto di utilizzare una funzione in-line, si salva la funzione in una variabile globale e la si assegna alla proprietà "View" del template. 

function PercentCompleteCustomRendering() {
    return 'Hello from <b>CSR</b>!';
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': PercentCompleteCustomRendering,
            'DisplayForm': PercentCompleteCustomRendering,
            'EditForm': PercentCompleteCustomRendering,
            'NewForm': PercentCompleteCustomRendering,
        }
    };

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

L'utilizzo però di una variabile globale è concettualmente sbagliato, in quanto è possibile che accadano dei conflitti di nomi in pagina se lo stesso nome viene utilizzato all'interno di altri script Javascript.
E' per questo che vi consiglio di crearvi sempre i vostri namespace personalizzati. In questo modo potete essere ancora più sicuri di evitare conflitti di nomi.
I namespace in Javascript non sono nient’altro che degli oggetti dentro altri oggetti.
Ecco quindi il nostro script ottimizzato al meglio: 

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

D4S.SP2013.PercentCompleteCustomRendering = function() {
    return 'Hello from <b>CSR</b>!';
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': PercentCompleteCustomRendering,
            'DisplayForm': PercentCompleteCustomRendering,
            'EditForm': PercentCompleteCustomRendering,
            'NewForm': PercentCompleteCustomRendering,
        }
    };
    ctx.ListTemplateType = undefined;
    ctx.BaseViewID = undefined;

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

Spero vi sia utile.