Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Modificare l'intera view di una lista con JSLink

SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Ultima modalità di personalizzazione di viste SharePoint 2013 che ci viene data dal Client Side Rendering è la possibilità di ridefinire l’intera visualizzazione, partendo dall'header della vista, passando per il rendering della singola riga e arrivando al footer. In poche parole, abbiamo il controllo completo della visualizzazione degli elementi di una lista o di una document library SharePoint.

Nota: vi ricordo che tramite il Client Side Rendering si modifica solamente la visualizzazione. Dati, filtri e ordinamenti sono sempre decisi dalla vista sottostante.
Per sfruttare questa potenzialità ci basta definire tre nuove funzioni Javascript, da applicare alle proprietà Header, Item e Footer del nostro display template e che, rispettivamente, si occupino di definire l’HTML della parte alta della vista, della singola riga e della parte bassa.
Per farvi capire meglio, vediamo un esempio di codice.

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

D4S.SP2013.CSR.HedaerRendering = function (ctx) {
    return '<ul>';
};

D4S.SP2013.CSR.FooterRendering = function (ctx) {
    return '</ul>';
};

D4S.SP2013.CSR.ItemRendering = function (ctx) {
    return '<li>' + ctx.CurrentItem.Title +'</li>';
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Header = D4S.SP2013.CSR.HedaerRendering;
    ctx.Templates.Footer = D4S.SP2013.CSR.FooterRendering;
    ctx.Templates.Item = D4S.SP2013.CSR.ItemRendering;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

Applicando questo display template alla nostra lista di task questo è il risultato.


Come potete vedere, i controlli di default della nostra lista SharePoint sono completamente spariti e rimpiazzati dall'HTML custom che abbiamo definito all'interno del display template.
In questo modo, come vi dicevo, abbiamo il controllo completo della view.

Nel prossimo post vedremo come sfruttare questa funzionalità del Client Side Rendering e dare all'utente finale una user experience della nostra lista di task totalmente nuova rispetto a quello a cui è stato abituato fin’ora.

blog comments powered by Disqus