SERIE: IL CLIENT SIDE RENDERING DI SHAREPOINT 2013


Nell'ultimo post di questa mini-serie abbiamo visto come è possibile utilizzare plugin JQuery all'interno dei nostri display template personalizzati. Abbiamo visto che questa è una tecnica molto facile da utilizzare e soprattutto che da all'utente finale un plus notevole in termini di funzionalità.
Oggi continuiamo su questa via e vediamo come possiamo aiutare l'utente durante l’inserimento di dati aggiungendo un tooltip descrittivo ai campi della forma di inserimento/modifica. Tale tooltip verrà aggiunto utilizzando la stessa tecnica di cui abbiamo parlato nel precedente post.
Questa volta il plugin che ho deciso di utilizzare è Tipsy, un plugin JQuery molto utile che crea tooltip su qualsiasi elemento HTML. Lo potete scaricare a questo indirizzo: http://onehackoranother.com/projects/jquery/tipsy/

Qui il codice per applicare tale plugin al campo “Title” di una qualsiasi lista.

window.D4S = window.D4S || {};
window.D4S.SP2013 = window.D4S.SP2013 || {};
window.D4S.SP2013.CSR = window.D4S.SP2013.CSR || {};

D4S.SP2013.CSR.PrepareFieldForTipsy = function (ctx) {
    var description = ctx.CurrentFieldSchema.Description;
    return '<input type="text" original-title="' + description + '" maxlength="255" class="ms-long ms
spellcheck-true d4s-tipsy" />'
};

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'Title': {
            'NewForm': D4S.SP2013.CSR.PrepareFieldForTipsy
        }
    };

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

$(document).ready(function () {
    $('.d4s-tipsy').tipsy({ trigger: 'focus', gravity: 'w', fade: true });
    $('.d4s-tipsy').next().hide();
});

A puro titolo d'esempio ho applicato il plugin solamente ad un campo. Lascio a voi scoprire come possiamo creare template un po' più generici, applicabili quindi a tutti i campi di una form.
Come vi dicevo, la tecnica è esattamente la stessa. Prima prepariamo l'HTML del campo tramite il nostro display template e poi applichiamo il plugin quando il DOM è stato caricato.
In più rispetto al precedente esempio, abbiamo visto come possiamo recuperare altre informazioni sul campo che stiamo ridefinendo (in questo caso la descrizione del campo) utilizzando l’oggetto di contesto che viene creato dal sistema di rendering di SharePoint.

Questo il risultato.