jueves, 5 de noviembre de 2009

Columnas calculadas y HTML en listas MOSS 2007

Navegando por la red y debido a la búsqueda de soluciones para un cliente concreto, un compañero de trabajo (Gracias David C.) me remitió a utilizar un código de javascript embebido directamente en un webpart editor de contenido. Añadiendo este código a una página de Sharepoint, conseguiremos poder introducir código HTML en las columnas calculadas de nuestras listas y bibliotecas. ¿Qué conseguimos con ello? Pues todas las ventajas que nos brinda el HTML: Poder formatear a nuestro gusto las columnas con colores, cambios de formato, interlineados, etc...

Las únicas condiciones son que:

  1. El webpart editor de contenido debe estar al final de la página (solo opera en los webparts que tiene encima suyo)
  2. La columna calculada que contenga nuestro código HTML debe estar acotada con el tag "<DIV>"


Imaginaos que tenemos 3 campos distintos (Opcion1="Rojo", Opcion2="Amarillo", Opcion3="Verde") que queremos formatear en un único campo (Opciones) separado por interlineados, ya que queremos montar una vista de la lista con el campo calculado  que contenga los 3 campos unidos y formateados a nuestro gusto . En este caso nuestra columna calculada debería contener el siguente código:

="<DIV>1.-"&Opcion1&"<BR>2.-"&Opcion2&"<BR>3.-"&Opcion3"</DIV>"

El resultado lo debemos definirlo como una línea de texto (en campos calculados no podemos crear multilínea), aunque sin embargo obtendremos el siguiente aspecto visual para la columna:

1.-Rojo
2.-Amarillo
3.-Verde

Es un ejemplo sencillo pero que podemos complicar bastante introduciendo cadenas mayores de formato HTML. Os recomiendo leer el documento http://blogs.rbaconsulting.com/syokiel/content/binary/CalcColumnFormating.docx para ver algunos ejemplos más del resultado que se puede obtener con esta técnica.

Sin más ya solo me queda poneros el código que debeis incluir en vuestro webpart editor de contenido para que todo esto funcione (copiadlo tal cual):

<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText
theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

¡¡ Eso es todo !!

No hay comentarios: