SharePoint 2013 JSLink per cambiare la modalità con cui vengono visualizzati i campi

SharePoint 2013 estende il modello ad oggetti JavaScript con la funzionalità JS Link con la quale è possibile modificare, lato client, il render dei campi. Quindi è possibile controllare come i singoli campi vengono visualizzati senza aggiungere codice lato server.

L'esempio seguente modifica il render del campo con internal name TestoLungo nellw viste (View). La funzione associata alla View viene richiamata ogni volta che è necessario visualizzare il campo a video.
In questo caso sostituisco il render standard del campo multi linea "TestoLungo", inserendo un div html limitato in altezza che si espande quando si clicca sul stesso.

JavaScriptCopia

(function () {
  if (typeof SPClientTemplates === 'undefined') return;

  var fldCtx = {};
  fldCtx.Templates = {};
  fldCtx.Templates.Fields = {
    "TestoLungo": {
      "View": function (ctx) {
          var v= ctx.CurrentItem.TestoLungo;
          return "<div style='height:20px;overflow:hidden;border:1px solid red;' onclick='linkJsFields_TestoLungo(this);'>" + v + "</div>";
      }
    }
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fldCtx);
})();

function linkJsFields_TestoLungo(obj){
  var d = $(obj);
  var v = d.css('overflow-y');
  if(v == 'hidden'){
    d.css('overflow-y', 'auto');
    d.height(300);
  }else{
    d.css('overflow-y', 'hidden');
    d.height(20); 
  }
}

Per utilizzare lo script, dopo averlo salvato ad esempio nella Style Library, ci sono due possibilità:

• aggiungerlo alla master page inserendo il tag <script type="text/javascript" src="/Style Library/linkJsFields.js"></script>
• oppure settare la nuova proprietà JS Link di una List View WebPart BaseXsltListWebPart.JSLink property

Gli altri template che è possibile sovrascrivere oltre a View sono: DisplayForm, EditForm e NewForm.


La stessa versione ma con l'aggiunta di una immagine che indica se il campo è espanso o meno:

JavaScriptCopia

(function () {
  if (typeof SPClientTemplates === 'undefined') return;

  var fldCtx = {};
  fldCtx.Templates = {};
  fldCtx.Templates.Fields = {
    "TestoLungo": {
      "View": function (ctx) {
        //if(ctx.inGridMode == true)
        var v= ctx.CurrentItem.TestoLungo;
        if(v==null) v="";
        // return "<div style='height:40px;overflow:hidden;border:1px solid red;'><span onclick='linkJsFields_TestoLungo(this);' style='float:right'>[+]</span>" + v + "</div>";
        return "<div style='height:100%;overflow:hidden;border:1px solid red;'><img src='/_layouts/15/images/advadd.png' onclick='linkJsFields_TestoLungo(this);' style='float:right;' />" + v + "</div>";
      }
    }
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fldCtx);
})();

function linkJsFields_TestoLungo(obj){
  var img = $(obj);
  var d = img.parent();
  var v = d.css('overflow-y');
  if(v == 'hidden'){
    img.attr('src', '/_layouts/15/images/advminus.png');
    //img.val('[-]');
    d.css('overflow-y', 'auto');
    d.height(300);
  }else{
    img.attr('src', '/_layouts/15/images/advadd.png');
    //img.val('[+]');
    d.css('overflow-y', 'hidden');
    d.height("100%"); 
  }
}

Un altro esempio per le document library che visualizza l'anteprima dell'immagine al posto dell'icona del file (gif, jpg e png):

JavaScriptCopia

(function () {
    if (typeof SPClientTemplates === 'undefined') return;
    var fldCtx = {};
    fldCtx.Templates = {};
    fldCtx.Templates.Fields = {
        "DocIcon": {
            "View": function (ctx) {
                var fullPath = ctx.CurrentItem['FileRef'];
                var fileName = ctx.CurrentItem['FileLeafRef'];
                var ext = (typeof ctx.CurrentItem.File_x0020_Type === 'undefined') ? '' : ctx.CurrentItem.File_x0020_Type.toLowerCase();
                var ico = ctx.imagesPath + ctx.CurrentItem['HTML_x0020_File_x0020_Type.File_x0020_Type.mapico'];
                if (ctx.CurrentItem.FSObjType === '1')
                    ico = ctx.imagesPath + 'folder.gif';
                if (ext === 'png' || ext === 'jpg' || ext === 'jpeg' || ext === 'gif')
                    return '<a href="' + fullPath + '" target="_blank" style="width:100px;height:100px;display:block;overflow:hidden;border:1px solid #c0c0c0;padding:2px;"><img title="' + fileName + '" border="0" alt="' + fileName + '" src="' + fullPath + '?width=100&height=100" /></a>';
                else
                    return '<img width="16" height="16" title="' + fileName + '" class=" ms-draggable" alt="' + fileName + '" src="' + ico + '" border="0">';
            }
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fldCtx);
})();

Vedi anche Using JSLink with SharePoint 2013