Gestire la modalità "Quick edit" nei display template di JSLink

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.

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.

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".

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;'>&nbsp;</div>"
                + "</div>&nbsp;"
                + "<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.