Hace poco un cliente nos planteó un requerimiento en el que deseaba hacer una comparación visual de dos formularios InfoPath en una página web en Office SharePoint Server 2007. La implementación debía llevarse a cabo sin instalar código de servidor.
Para resolver el pedido, creamos una página con las siguientes características:
- Una lista que permite seleccionar los documentos a comparar
- Dos IFRAMES en donde se muestran los formularios InfoPath
- Un conjunto de acciones que permiten:
- Maximizar el espacio de trabajo para la comparación visual
- Ver los documentos don distintas opciones de zoom (100%, 75% y 50%)
- Borrar los filtros que el usuario pudo haber aplicado en la lista de selección
El resultado es una pantalla como la siguiente:
Pero, ¿cómo fue la implementación? …
Los IFRAMES
Lo primero es crear los IFRAMES en donde se muestran los documentos INFOPATH. Eso puede hacerse con una breve instrucción en JavaScript:
function crear_iframe(id_iframe) {
document.write("<iframe id=" + id_iframe + " name='" + id_iframe +
" 'width=100% height='530' frameborder='0'><p>Your browser does not
support iframes.</p></iframe>");
}
La carga de los IFRAMES
El segundo paso es la creación de los botones que permitan al usuario cargar los IFRAMES con los documentos InfoPath:
Estos botones contienen un hipervínculo como el siguiente que hace posible la carga de los IFRAMES:
<DIV><A HREF='' onClick='javascript:document.all.IFrameUno.src="/Evaluaciones%20de%20Desempeo/Sebastian Torres - 2009.xml?OpenIn=Browser";return false;'><IMG SRC='\_layouts\Images\icongo02rtl.gif' TITLE='Agregar a la izquierda' BORDER='0'></A></DIV>
El hipervínculo no hace más que apuntar al documento XML que se desea mostrar. Es importante la utilización del parámetro OpenIn=Browser, caso contrario intentará abrir el documento en la herramienta cliente de InfoPath.
Para crear los botones sin utilizar código en el servidor, podemos utilizar la excelente funcionalidad de HTML Calculated Column creada por Christopher en su blog Path to SharePoint, que utiliza JavaScript para convertir una columna que tiene texto HTML en HTML “real”.
Para ello necesitamos crear dos campos calculados con esta fórmula:
=CONCATENATE("<DIV><A HREF='' onClick='javascript:document.all.IFrameUno.src=";CHAR(34);"/Evaluaciones%20de%20Desempeo/";Título;"?OpenIn=Browser";CHAR(34);";return false;'><IMG SRC='\_layouts\Images\icongo02rtl.gif' TITLE='Agregar a la izquierda' BORDER='0'></A></DIV>")
La función CHAR nos permite agregar un carácter especial, en este caso las comillas dobles. La columna Título es la que contiene el nombre del archivo XML.
Una vez creada las dos columnas calculadas para cargar los IFRAMES, sólo resta agregar el código de Christopher para convertir en texto en HTML.
Pantalla completa y zoom
La opción de pantalla completa lo que en realidad hace es agrandar el espacio de trabajo para que el usuario puede ver con mayor amplitud los documentos. Para ello se puede utilizar jQuery para modificar los estilos y ocultar algunas zonas. jQuery nos proporciona además algunos efectos “lindos” con la función hide.
$('.ms-pagetitleareaframe').hide("slow");
$('#MSOZoneCell_WebPartWPQ3').hide("slow");
$('#onetIdTopNavBarContainer').hide("slow");
$('.ms-globalbreadcrumb').hide("slow");
$('#boton_completa').hide("slow");
$('#boton_normal').show("slow");
}
Para la opción de zoom podemos utilizar las bondades del IFRAME, que nos permite modificar el zoom con el cual estamos visualizando la página dentro del IFRAME:
$('#IFrameUno').attr('style', 'zoom:75%');
$('#IFrameDos').attr('style', 'zoom:75%');
$('#IFrameUno').attr('height','720');
$('#IFrameDos').attr('height','720');
}
Por último, el borrado de filtros, es un simple link a la página sin los parámetros que SharePoint agrega en el momento de aplicar un filtro:
document.write("<a href='/internal/compare.aspx'><img src='/_layouts/Images/filteroff.gif' border='0' title='Borrar filtros'></a>");
Fin
Eso es todo por hoy amigos, si bien es un caso muy particular de requerimiento, me pareció importante compartirlo. Nunca se sabe si hay alguien del otro lado del mundo tratando de hacer lo mismo.
Hasta la próxima y no duden en comentar y sugerir mejoras.
Les dejo este interesante enlace desde el sitio de Office de Microsoft que explica cada una de las acciones de SharePoint Designer 2010 para el manejo de flujos de trabajo:
