SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013
- Introduzione al Client Side Rendering di SharePoint 2013
- Ridefinire la visualizzazione di un campo tramite il Client Side Rendering - Parte 1
- Utilizzare i namespace Javascript nella definizione di template per il Client Side Rendering
- Ridefinire la visualizzazione di un campo tramite il Client Side Rendering - Parte 2
- Ridefinire la modalità di inserimento di valori in un campo tramite il Client Side Rendering
- Gestire la modalità "Quick edit" all'interno di un display template
- Come applicare un plugin JQuery su un display template (questo post)
- Aggiungere un tooltip per aiutare l'inserimento di valori tramite il Client Side Rendering
- Specificare più file Javascript all’interno della proprietà JSLink
- Utilizzare file CSS nei display template del Client Side Rendering
- Modificare il rendering delle righe di una lista tramite il Client Side Rendering
- Modificare l'intera visualizzazione di una lista tramite il Client Side Rendering
- Applicare il plugin MixItUp su liste SharePoint 2013 tramite il Client Side Rendering
- Provisioning di display template
- Ridefinire il rendering di un custom field tramite il Client Side Rendering
Continua la nostra serie di post sul Client Side Rendering di SharePoint 2013.
Questa volta vedremo come sfruttare un qualsiasi plugin di JQuery all’interno dei nostri display template, così da rendere la visualizzazione delle nostre liste ancora più avanzata.
Il plugin che ho scelto è il plugin ProgressBar.js e, come potete ben immaginare, si occupa di renderizzare una progress bar.
Il risultato finale risulta quindi molto simile al nostro esempio di partenza, ma la cosa su cui vorrei porre attenzione è la tecnica utilizzata. Questo perché così come possiamo utilizzare ProgressBar.js allìinterno del nostro display template, allo stesso modo possiamo applicare tutti i plugin JQuery che troviamo sul web e che ci permettono di aumentare la user experience per l’utente finale su liste e document library di default di SharePoint 2013.
Nei prossimi post vedremo come sfruttare alcuni plugin molto conosciuti e che danno alle nostre liste un tocco davvero innovativo.
Il concetto di base è quello che tramite il codice che scriviamo per modificare la visualizzazione di un campo tramite il display template noi dobbiamo preparare l’HTML per poi applicarci il plugin.
Una volta preparato l'HTML possiamo aggiungere, alla fine del file Javascript che contiene il nostro display template, la chiamata al plugin scelto.
Vediamo il codice per capire meglio di cosa sto parlando.
Questa volta vedremo come sfruttare un qualsiasi plugin di JQuery all’interno dei nostri display template, così da rendere la visualizzazione delle nostre liste ancora più avanzata.
Il plugin che ho scelto è il plugin ProgressBar.js e, come potete ben immaginare, si occupa di renderizzare una progress bar.
Il risultato finale risulta quindi molto simile al nostro esempio di partenza, ma la cosa su cui vorrei porre attenzione è la tecnica utilizzata. Questo perché così come possiamo utilizzare ProgressBar.js allìinterno del nostro display template, allo stesso modo possiamo applicare tutti i plugin JQuery che troviamo sul web e che ci permettono di aumentare la user experience per l’utente finale su liste e document library di default di SharePoint 2013.
Nei prossimi post vedremo come sfruttare alcuni plugin molto conosciuti e che danno alle nostre liste un tocco davvero innovativo.
Il concetto di base è quello che tramite il codice che scriviamo per modificare la visualizzazione di un campo tramite il display template noi dobbiamo preparare l’HTML per poi applicarci il plugin.
Una volta preparato l'HTML possiamo aggiungere, alla fine del file Javascript che contiene il nostro display template, la chiamata al plugin scelto.
Vediamo il codice per capire meglio di cosa sto parlando.
window.D4S = window.D4S || {}; window.D4S.SP2013 = window.D4S.SP2013 || {}; window.D4S.SP2013.CSR = window.D4S.SP2013.CSR || {}; D4S.SP2013.CSR.TasksPercentCompleteView = function (ctx) { var currentItem = ctx.CurrentItem; var currentValue = currentItem[ctx.CurrentFieldSchema.Name]; var currentPercent = currentValue.substring(0, 2); return '<div id="d4s-percent-' + currentItem.ID + '" data-value="' + currentPercent + '"></div>'; }; (function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete': { 'View': D4S.SP2013.CSR.TasksPercentCompleteView } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })(); $(document).ready(function () { var bars = $('div[id^=d4s-percent]'); $.each(bars, function (index, item) { var pb = new ProgressBar(item.id, { 'width': '100px', 'height': '20px' }); pbItem = {}; pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "item1"; pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.BAR; pbItem[ProgressBar.OPTION_NAME.OPACITY] = 0.5; pbItem[ProgressBar.OPTION_NAME.SPACE] = 0; pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT; pbItem[ProgressBar.OPTION_NAME.POSITION] = ProgressBar.OPTION_VALUE.POSITION.RELATIVE; pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.ORANGE; pbItem[ProgressBar.OPTION_NAME.PERCENT] = 60; pb.createItem(pbItem); pbItem = {}; pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "line1"; pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.LINE; pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT; pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.RED; pbItem[ProgressBar.OPTION_NAME.PERCENT] = 30; pb.createItem(pbItem); pbItem = {}; pbItem[ProgressBar.OPTION_NAME.ITEM_ID] = "line2"; pbItem[ProgressBar.OPTION_NAME.TYPE] = ProgressBar.OPTION_VALUE.TYPE.LINE; pbItem[ProgressBar.OPTION_NAME.ALIGN] = ProgressBar.OPTION_VALUE.ALIGN.LEFT; pbItem[ProgressBar.OPTION_NAME.COLOR_ID] = ProgressBar.OPTION_VALUE.COLOR_ID.GREEN; pbItem[ProgressBar.OPTION_NAME.PERCENT] = 80; pb.createItem(pbItem); pb.setPercent(parseInt($(item).attr('data-value'))); }); });
Come potete vedere, prima abbiamo definito il rendering del nostro campo tramite la funzione TasksPercentCompleteView e abbiamo fatto in modo che tale funzione ritornasse l'HTML contenente un semplice DIV con un identificativo e l’attributo "data-value" valorizzato con la percentuale di completamento del task (il valore del campo PercentComplete, di cui stiamo ridefinendo il rendering), poi abbiamo applicato il plugin JQuery al completamento della creazione del DOM (sfruttando la funzione ready di JQuery).
Così facendo, il sistema di rendering di SharePoint ha richiamato tante volte la nostra funzione TasksPercenteCompleteView, così da ridefinire il rendering del campo, ma ha eseguito solo una volta la funzione ready di JQuery e il susseguente codice per applicare la funzionalità offerta da ProgressBar.js.
Ecco il risultato.
Così facendo, il sistema di rendering di SharePoint ha richiamato tante volte la nostra funzione TasksPercenteCompleteView, così da ridefinire il rendering del campo, ma ha eseguito solo una volta la funzione ready di JQuery e il susseguente codice per applicare la funzionalità offerta da ProgressBar.js.
Ecco il risultato.
Bello no?
Per apprezzarlo meglio, vi invito sempre a ricordarvi cosa dovevamo fare nelle precedenti versioni di SharePoint per ottenere questo risultato :)
Per apprezzarlo meglio, vi invito sempre a ricordarvi cosa dovevamo fare nelle precedenti versioni di SharePoint per ottenere questo risultato :)