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.
(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:
(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):
(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);
})();
ctx.imagesPath ritorna il percorso delle immagini in SharePoint, ovvero '/_layouts/15/images/
Vedi anche
Using JSLink with SharePoint 2013