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 (questo post)
- 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
- 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
Nella prima parte di questo post abbiamo ridefinito il campo "% complete" di una lista di task, in modo tale da stampare a video il testo "Hello from CSR!". Oggi vedremo come modificare notevolmente la UI di questo campo, sia in visualizzazione che in aggiunta/modifica.
Partiamo dalla visualizzazione.
Così come abbiamo stampato a video una frase, possiamo far ritornare alla funzione Javascript assegnata alle proprietà "View" e "DisplayForm" un po’ di codice HTML utile ad avere una visualizzazione un po’ più articolata e utile per l’utente finale.
window.D4S = window.D4S || {}; window.D4S.SP2013 = window.D4S.SP2013 || {}; D4S.SP2013.PercentCompleteDisplay = function (ctx) { var currentItem = ctx.CurrentItem; var currentValue = currentItem[ctx.CurrentFieldSchema.Name]; return "<div style='background-color: #e5e5e5; width: 100px; display:inline-block;'>" + "<div id='d4sTask-" + currentItem.ID + "' style='width: " + currentValue.replace(/\s+/g, '') + "; background-color: #0094ff;'> </div>" + "</div> " + "<span id='d4sTaskLabel-" + currentItem.ID + "'>" + currentValue + "</span>"; }; (function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete': { 'View': D4S.SP2013.PercentCompleteDisplay, 'DisplayForm': D4S.SP2013.PercentCompleteDisplay } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })();
Con poche righe di codice, ecco che abbiamo già un risultato degno di nota.
Pagina di dettaglio:
Questo oggetto viene passato a tutte le funzioni di rendering e la sua struttura cambia in base alla view o alla form in cui il nostro template è stato iniettato. In questo caso risulta molto utile la natura dinamica del linguaggio Javascript.
Nei prossimi post vedremo come modificare la modalità di inserimento dei valori in creazione o modifica, ma prima vi vorrei ricordare che per arrivare a questo risultato con le precedenti versioni di SharePoint avremmo dovuto districarci tra la sintassi XSLT o scrivere un campo custom. Ora facciamo tutto con qualche riga di Javascript e HTML. Un bel passo avanti per fortuna.