Cómo definir correctamente nuestros archivos de CSR (Client Side Rendering) o jslink

Un problema que suele pasar con jslink es cuando tenemos una página con dos o más webparts que cada uno tiene asignado un archivo jslink. Puede pasar que creamos nuestras funciones de override de campos/header/footer/grouping/etc con nombres iguales en cada archivo jslink.

Ej:

En el web part 1 llama al archivo documentosCSR.js

En el web part 2 llama al archivo taskCSR.js

Ambos archivos tienen un override de la view del campo “Title” y ambos archivos usan la función titleFieldOverride(ctx).

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    
    overrideCtx.Templates.Fields = {
        'Title': {'View': titleFieldOverride }
    };
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function titleFieldOverride(ctx)
{

}

Que pasa en estos casos? El último archivo js que se cargue será el que prevalece, lo cual puede ocasionar errores dificiles de detectar.

Para ello, siempre crea los archivos jslink con funciones definidas en global namespaces de javascript. Los namespaces nos permiten definir variables, funciones dentro de un “contenedor” ( a efectos prácticos es un objeto ), la idea de trasfondo consiste en que cada archivo jslink utilice su propio namespace para que de esta forma no perdamos funcionalidad al “solapar” el código.

Veamos un ejemplo correcto.

En el archivo documentosCSR.js defino el código de la siguiente manera

var solutionDocumentosCSR = solutionDocumentosCSR || {};
solutionDocumentosCSR.Fields = (function () {
    
    function convertirFecha(fecha) {
        /* convierto la fecha al formato ddMMYYY */
    };
 
    return {
        titleFieldOverride: function (ctx) {
            var html = "<div><strong>" + ctx.CurrentItem.Title + "</strong></div>";
           //aca puedo usar la funcion convertirFecha la cual esta definida dentro del mismo namespace
            return html;
        }
    }
})();

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    
    overrideCtx.Templates.Fields = {
        'Title': {'View': solutionDocumentosCSR.Fields.titleFieldOverride }
    };
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

En el otro archivo  taskCSR.js defino el código de la siguiente manera

var solutionTasksCSR = solutionTasksCSR || {};
solutionTasksCSR.Fields = (function () {
    
    function convertirFecha(fecha) {
        /* convierto la fecha al formato mmDDyyyy */
    };
 
    return {
        titleFieldOverride: function (ctx) {
            var html = "<div><strong>" + ctx.CurrentItem.Title + "</strong></div>";
            //aca puedo usar la funcion convertirFecha la cual esta definida dentro del mismo namespace, y no se toma en cuenta la función definida en el otro namespace
            return html;
        }
    }
})();

(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    
    overrideCtx.Templates.Fields = {
        'Title': {'View': solutionTasksCSR.Fields.titleFieldOverride }
    };
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();