Para aquellos que alguna vez se han enfrentado a la construcción de un sitio de publicación, sabrán lo complicado que es hacer algo “vistoso”, y habrá escuchado de su cliente, en más de una ocasión, la frase: “que soso queda, le falta algo”.

Y que demonios!! levan razón! hacer algo vistoso, no es algo que Sharepoint lleve “out of the box”, así que requiere de bastante conocimiento y horas de desarrollo. Afortunadamente, jQuery ha facilitado la tarea, permitiendo que la inserción de “efectos visuales”, sea más sencilla.

Antes de seguir, y por aquello de poner el caramelo en la boca, aquí tenéis una lista de los mejores sites hechos con Sharepoint del 2009:

http://www.topsharepoint.com/top-rated-sharepoint-sites-for-2009

En este post, vamos a ver cómo podemos insertar un efecto jQuery, dentro de Sharepoint. En concreto vamos a usar el “image slide menu”, que podéis ver funcionando en: http://jquerystyle.com/2009/05/07/image-menu-with-jquery

Y lo vamos a complicar un poco, para que las imágenes a mostrar, las saque de una biblioteca de imágenes de Sharepoint, de esta forma, las imágenes pueden cambiarse de forma fácil, sin entrar en código.

Llamada asíncrona al web service de Listas de Sharepoint

Antes de nada, vamos a recuperar el listado de imágenes que queremos incluir en el efecto, y para ello, haremos una llamada asíncrona al web service de Sharepoint, que maneja Listas:

http://Nombre_servidor/sitio/_vti_bin/lists.asmx

Para ello, lo más sencillo, es añadir una nueva página .aspx dentro de una biblioteca de documentos, desde Sharepoint Designer. Editamos el código fuente y añadimos, dentro del ContentPlaceHolder “PlaceHolderAdditionalPageHead”:

1) Los scripts jQuery necesarios.








2) La llamada, se hace usando la función Ajax, de jQuery:
















 

El parámetro “data”, corresponde al xml del SOAP envelope, que le indica, el método del webservice que debe invocar, y los parámetros que le pasa. Si lo que queremos es obtener los elementos de una lista, el soap de entrada, sería:
















El parámetro “complete”, indica la función que se ejecutará de retorno de la llamada asíncrona.

Procesando resultado de la llamada asíncrona

Una vez finalizada la llamada asíncrona al web service, procesamos el mensaje SOAP devuelto.

[TIP]: Como truquillo, tanto para sacar el mensaje SOAP de llamada a una función del webservice (SOAP request), como para ver el resultado de esa función (SOAP response), os recomiendo que os creéis un sencillo cliente con Visual Studio (una app de consola, por ejemplo), agreguéis la referencia al web service que queréis usar, y utilicéis el proxy que te genera el VS para invocar al web method que queráis, (así tendréis el intellisense y el tipado de datos). A esto, le añadimos el uso del Fiddler, que nos sacará las tripas de la llamada al web service, y su resultado. Fijaros en la imagen:

Fiddler

A mano derecha, aparecen todas las llamadas que se han hecho al servidor en la petición (varias imágenes, hojas de estilos, etc). Una de esas llamadas es las del webservice (lists.asmx). Si la seleccionamos, en la zona superior izquierda, podemos ver la información de la petición. Si ponemos la vista de XML, podemos ver el SOAP request, y si hacemos lo mismo en la zona inferior, veremos la respuesta del servidor. Si ponemos la vista “TextView”, podemos copiar y pegar el SOAP, para luego meterlo dentro de nuestra página de Sharepoint.

fiddler

Una vez tenemos claro, cuál es el mensaje de respuesta a nuestra llamada, se trata de parsear con jQuery, el XML resultante.

Antes de eso, vamos a meter un DIV en nuestra página, que será el contenedor del HTML que compondremos desde jQuery. Lo insertamos dentro dentro del ContentPlaceHolder “PlaceHolderMain”:








 

 

 

Ahora ya podemos inyectar el HTML. Para ello

  1. Recorremos todos los nodos del XML, que corresponden a los items de la lista (las imágenes que queremos mostrar).
  2. Sacamos la URL de la imagen
  3. Montamos los elementos <li> necesarios, con los estilos necesario, para que los scripts de jQuery, hagan el efecto visual.

El código sería algo como:
















































Añadiendo efectos visuales con jQuery

Hasta ahora, lo único que hemos hecho es montar el HTML del efecto, con los estilos necesarios, y sacando las imágenes de forma dinámica. Ahora nos falta añadir el jQuery necesario para los efectos de “slide” de las imágenes.

Para ello, utilizamos el siguiente código, dentro de la misma función retorno de la llamada asíncrona (justo después del código anterior):
































El resultado final !!

Y así queda el efecto, dentro de nuestra página de Sharepoint:

image

y si editamos la lista de imágenes y añadimos una nueva, automáticamente nos aparece en el menú:

image

 

 

 

Algunas consideraciones y posibles mejoras

  • Este ejemplo está adaptado a las imágenes utilizadas. Si quieres usar otro tamaño de imágenes, tendrás que jugar con los estilos de la CSS y el jQuery, para adaptarlo.
  • A pesar que el ejemplo está hecho para cargar las imágenes de una biblioteca, hay que aclarar que no tiene mucho sentido colocar muchas imágenes, ya que no cabrán en el div principal “.jimgMenu”. Digamos que este efecto está pensado para el típico “menú destacado” que aparece en la parte superior de la Home (por debajo de la cabecera).
  • En el ejemplo no lo hemos hecho, pero se podría mejorar, si el link al que redirige la imagen, se toma de una columna de la lista.

Nada más, espero que os sea de utilidad. Ya me contareis.

Saludos!!!