Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Uso di file CSS nei display template di JSLink

SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Nel precedente post abbiamo visto come possiamo inserire file Javascript aggiuntivi al singolo file contenente il nostro display template. Oggi vedremo invece come aggiungere in pagina dei file CSS, contenenti le classi che vengono poi utilizzate dal nostro display template.

In questo caso abbiamo due diverse modalità.

La prima prevede l’utilizzo dell’evento OnPreRender esposto dal Client Side Rendering per ogni display template personalizzato. Tramite questo evento possiamo infatti eseguire del codice Javascript che aggiunge in pagina la referenza ai file CSS di cui necessita il nostro display template.
Ecco l’esempio di codice di questa prima tecnica.

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

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

D4S.SP2013.PercentCompleteApplyCSS = function() {
    var css = '<link rel="stylesheet" type="text/css" href="/Style Library/CSR/customCSS.css" />';
    document.write(css);
};

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

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

La seconda è molto simile, ma al posto di utilizzare l'evento OnPreRender prevede la creazione di un secondo file Javascript che dovrà essere inserito, assieme al display template, all'interno della proprietà JSLink della web part SharePoint utilizzando il carattere pipe (come abbiamo descritto nel precedente post). Il codice di questo secondo file Javascript è esattamente lo stesso che abbiamo visto prima, con la differenza che viene inserito in un file a sé stante.

applyCss.js
var css = '<link rel="stylesheet" type="text/css" href="/Style Library/CSR/customCSS.css" />';
document.write(css);

Come vi dicevo, questo file va referenziato all’interno della proprietà JSLink della web part assieme al nostro display template:


~sitecollection/Style Library/CSR/displayTemplate.js|~sitecollection/Style Library/CSR/applyCSS.js

Non ho trovato grosse differenze nell'utilizzo dell'una o dell'altra tecnica.
Credo sia preferibile utilizzare la prima se il nostro display template viene inserito a mano in qualche document library SharePoint e quindi abbiamo modo di capire guardando direttamente il codice del display template se utilizza file CSS esterni, mentre penso sia meglio utilizzare la seconda nel caso in cui effettuiamo il deploy del nostro display template tramite una soluzione WSP, in cui sappiamo bene dove abbiamo deciso di installare i vari file Javascript e CSS utili al display template e in cui ne effettuiamo il relativo provisioning.

blog comments powered by Disqus