SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Dopo aver capito come modificare la visualizzazione di un campo di una lista SharePoint 2013 attraverso il Client Side Rendering, vediamo oggi come ridefinire la modalità di inserimento di un valore all'interno di tale campo, in fase di creazione/modifica.
In una form di questo tipo solitamente si usa lasciare all’utente la funzionalità di base di inserimento del dato (anche perché altrimenti se ne viene meno il comportamento di base di SharePoint). Il codice HTML che abbiamo scritto nel precedente post per la parte di visualizzazione del nostro campo non risulta quindi più utile e va pensata una nuova modalità di inserimento della percentuale di completamento di un task (sempre che abbiamo intenzione di riscrivere il comportamento di default ovviamente).
Per questo esempio quindi, decidiamo di sfruttare uno dei nuovi elementi di input comparsi con HTML5: l'input "range". Questo elemento dice al browser di visualizzare uno slider al posto della classica casella di testo. Lo slider ci torna molto utile per assegnare un valore da 0% a 100% al nostro campo "PercentComplete".
Ecco quindi come possiamo inserire questo controllo nelle view di creazione e di modifica di una lista di task.

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;'>&nbsp;</div>"
            + "</div>&nbsp;"
            + "<span id='d4sTaskLabel-" + currentItem.ID + "'>" + currentValue + "</span>";
};

D4S.SP2013.PercentCompleteEdit = function (ctx) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        return document.getElementById('txtPercentComplete').value;
    });

    return "<input type='range' id='txtPercentComplete' min='0' max='100' oninput='outPercentComplete.value=txtPercentComplete.value' value='" + formCtx.fieldValue + "' /> <output name='outPercentComplete' for='txtPercentComplete' >" + formCtx.fieldValue + "</output>%";
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'PercentComplete': {
            'View': D4S.SP2013.PercentCompleteDisplay,
            'DisplayForm': D4S.SP2013.PercentCompleteDisplay,
            'EditForm': D4S.SP2013.PercentCompleteEdit,
            'NewForm': D4S.SP2013.PercentCompleteEdit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

Vi ricordo che per dar modo al CSR di caricare il vostro template nelle form di creazione e di modifica della vostra lista dovete modificare a mano le relative web part che costruiscono il form e inserire all'interno della proprietà "JSLink" la URL del file Javascript in cui avete inserito questo pezzo di codice.
Rispetto alla parte di visualizzazione, sfruttiamo le funzioni GetFormContextForCurrentField e registerGetValueCallback rispettivamente per recuperare il contesto della form di inserimento/modifica e registrare una funzione che verrà richiamata dal sistema di rendering di SharePoint quando è necessario sapere il valore attuale da salvare all’interno del database.
Senza l'utilizzo di queste due funzioni, SharePoint non può essere in grado di capire qual è il valore da salvare. E' proprio per questo che all'interno della funzione di callback, si ritorna il valore attuale preso dal campo di tipo input "range".
Il risultato di questa semplice tecnica risulta veramente utile all'utente finale.

Ridefinire la modalità di inserimento di un campo SharePoint 2013 tramite il Client Side Rendering

Come potete capire, anche in fase di inserimento/modifica abbiamo un ampio spazio di libertà. Senza troppi problemi possiamo implementare meccanismi di inserimento di dati che facilitano l'utilizzo del sistema da parte dell'utente finale, magari recuperando dati da altre liste tramite REST o il Client Object Model.