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 (questo post)
- 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
Nei precedenti post abbiamo visto come creare il nostro display template utile a ridefinire sia la visualizzazione di un campo all’interno di una lista SharePoint, che la modalità di inserimento di valori all’interno del medesimo campo per l’utente finale.
Oggi vedremo come possiamo modificare il comportamento del nostro rendering template nel momento in cui l'utente finale decide di utilizzare la funzione "Quick edit", presente all'interno di tutte le liste e document library della nuova versione di SharePoint. Questa funzionalità permette all'utente di modificare in rapidità gli elementi della lista con una interfaccia molto simile a quella di Excel. Non è niente di nuovo per chi utilizza SharePoint da tanto. E' la rivisitazione in chiave moderna (HTML5 e Javascript) della "Edit view" che avevamo nelle vecchie versioni di SharePoint (implementata tramite un ActiveX che andava solo su IE).
Per prima cosa, se prendiamo il nostro primo esempio e proviamo ad andare in modalità "Quick edit" ci accorgeremo con piacere che anche in tale modalità viene comunque renderizzato il nostro template personalizzato.
Oggi vedremo come possiamo modificare il comportamento del nostro rendering template nel momento in cui l'utente finale decide di utilizzare la funzione "Quick edit", presente all'interno di tutte le liste e document library della nuova versione di SharePoint. Questa funzionalità permette all'utente di modificare in rapidità gli elementi della lista con una interfaccia molto simile a quella di Excel. Non è niente di nuovo per chi utilizza SharePoint da tanto. E' la rivisitazione in chiave moderna (HTML5 e Javascript) della "Edit view" che avevamo nelle vecchie versioni di SharePoint (implementata tramite un ActiveX che andava solo su IE).
Per prima cosa, se prendiamo il nostro primo esempio e proviamo ad andare in modalità "Quick edit" ci accorgeremo con piacere che anche in tale modalità viene comunque renderizzato il nostro template personalizzato.
Questa cosa è molto bella dal punto di vista di uno sviluppatore. Significa che il Client Side Rendering è comunque un framework reattivo e che è in grado di riapplicare tutti i template in maniera dinamica al cambiamento della visualizzazione da una modalità ("View") all'altra ("Quick edit") e, soprattutto, durante la modifica del valore del campo da parte dell'utente.
Per l'utente finale però il nostro display template personalizzato è appena diventato un ostacolo. Ha sempre la possibilità di fare doppio click sopra la barra blu e modificare il valore (vedi immagine sotto), il problema però è che non è più così immediato capire che tale possibilità di modifica è sempre disponibile.
Per l'utente finale però il nostro display template personalizzato è appena diventato un ostacolo. Ha sempre la possibilità di fare doppio click sopra la barra blu e modificare il valore (vedi immagine sotto), il problema però è che non è più così immediato capire che tale possibilità di modifica è sempre disponibile.
Come possiamo ovviare al problema?
E' molto semplice… il contesto del Client Side Rendering ci espone una proprietà specifica utile a capire in che modalità di visualizzazione siamo. Questa proprietà si chiama inGridMode e ci basta controllarne il valore per capire se siamo nella modalità "Quick edit" o se nella visualizzazione normale.
Riprendendo il nostro esempio di partenza, ecco come dobbiamo modificare il codice del display template per far in modo di visualizzare la barra di avanzamento in modalità "View" e il valore vero e proprio del campo in modalità "Quick edit".
E' molto semplice… il contesto del Client Side Rendering ci espone una proprietà specifica utile a capire in che modalità di visualizzazione siamo. Questa proprietà si chiama inGridMode e ci basta controllarne il valore per capire se siamo nella modalità "Quick edit" o se nella visualizzazione normale.
Riprendendo il nostro esempio di partenza, ecco come dobbiamo modificare il codice del display template per far in modo di visualizzare la barra di avanzamento in modalità "View" e il valore vero e proprio del campo in modalità "Quick edit".
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]; if (ctx.inGridMode === undefined || ctx.inGridMode === false) { 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>"; } else return currentValue; }; (function () { var ctx = {}; ctx.Templates = {}; ctx.Templates.Fields = { 'PercentComplete': { 'View': D4S.SP2013.PercentCompleteDisplay, 'DisplayForm': D4S.SP2013.PercentCompleteDisplay } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); })();
Vi consiglio sempre di controllare che tale proprietà non sia "undefined", in quanto è molto probabile che utilizziate la stessa funzione di visualizzazione sia per la "View" che per la pagina di dettaglio di un elemento ("DisplayForm"), proprio come abbiamo fatto nel nostro esempio, e dovete sapere che il contesto del Client Side Rendering che viene creato nella pagina di dettaglio di un elemento non contiene la proprietà inGridMode.