Imaginemos que tenemos una lista en SharePoint con un campo de tipo persona que muestra la imagen del usuario. Una vista estándar de lista de SharePoint nos mostraría una foto en cada renglón. ¿Pero cómo podríamos hacer para mostrar las fotos como en un muro, una al lado de la otra? Algo así:
Seguramente hay muchas formas de resolverlo con SharePoint Designer por ejemplo. Sin embargo, aquí vamos a mostrar una opción con jQuery y una CEWP. Espero les resulte interesante:
/*
Este script convierte una vista con estilo tabla basica con un sólo campo de usuario (con foto) en un muro de fotos
*/
function fotos () {
// alert ('Controlo si hay fotos para mostrar');
var hay_fotos = true;
// Verifico si hay elementos a mostrar
$("td:contains('No hay elementos que mostrar en esta vista de la'):last").each(function(index) {
hay_fotos = false;
});
// Oculto la vista y el tìtulo de la vista
document.writeln("<style> .ms-listviewtable {display: none;} .ms-listdescription {display: none;} </style>");
// Si hay elementos, aplico formato
if ( hay_fotos ) {
// alert ('Busco las fotos');
// Obtengo fotos de la lista
var fotos = new Array();
z = 0;
$('.ms-listviewtable > tbody > tr > td > table > tbody > tr > td > a > img').each(function(index) {
//alert ($(this).attr("src"));
if ( !( $(this).attr("src") == '/_layouts/images/person.gif') ) {
// Sólo tomo aquellos que usuarios que tengan foto
fotos[z] = '<img OnError=\"foto_error()\" class=\"fotomuro\" src=\"' + $(this).attr("src") + '\" title=\"' + $(this).attr("alt").substring(8) + '\"></img>';
z = z +1;
}
});
// alert ('Armo el muro');
// Armo el muro de fotos
document.writeln ('<p class=\"muro\" >');
document.writeln ('<div>¿Tu foto no está? <a title=\"\" href=\"/sites/Intranet/_layouts/MySite.aspx\" target=_blank>Subí tu foto</A></div></BR>');
//for (i = 0; i < 5; i++) {
for (i = 0; i < fotos.length; i++) {
document.writeln (fotos[i]);
}
document.writeln ('</p></BR></BR>');
// Un poco de estilo a las fotos
document.writeln("<style> .muro {} .fotomuro { width:62px; height:62px; } </style>");
}
}
function foto_error() {
window.event.srcElement.style.display = "none";
}
El código de la CEWP sería:
<script type="text/javascript"
src="/sites/Intranet/Internal/jquery142min.js"></script>
<script type="text/javascript"
src="/sites/Intranet/Internal/fotos.js"></script>
<script type="text/javascript">
fotos();
</script>
Hasta el próximo truco jQuery! Nos vemos…
