jueves, 14 de octubre de 2010

Conectar un WebPart de Imagen

Una vez explicado el concepto de Mashup y realizado un ejemplo del mismo, hoy quisiera explicar cómo conectar un webpart de imagen con otro de formato lista, de forma que pueda servirnos como pieza dinámica de una aplicación más completa.

Para ello volveré a basarme en una variación del mismo ejemplo: Una lista de libros, que según el libro escogido, muestra una imagen u otra de la portada del mismo.

Lo primero es crear una lista personalizada donde añadiremos las columnas de Título, Autor y Número y donde "Número" es un valor numérico que no puede repetirse.


Además creamos una última columna calculada llamada URL_Portada, donde calcularemos automáticamente la URL de la imagen de la portada de cada número. La fórmula sería del estilo ="/portadas/"&Numero&".jpg"  (donde "portadas" sería el nombre de la biblioteca de imágenes donde guardaremos las portadas de los libros)

¿Por qué generar esta última columna calculada? Porque para que el único parámetro de entrada que acepta el webpart de imagen es el de la URL de la imagen, y para mandárselo necesitamos crear un campo con la misma.

Posteriormente creamos la biblioteca de imágenes, y al cargar las mismas en la biblioteca, ponemos especial cuidado en ponerle como título de cada imagen el número correspondiente al campo "Numero" de cada libro generado en la lista personalizada de nuestra biblioteca. De esta forma, la portada 1.jpg se corresponde al libro con el número 1, y la portada 2.jpg se corresponde al libro con el número 2.


Finalmente, creamos una página wiki (puede ser la página principal del site mismo), y en ella añadimos los 2 webparts: el de la lista personalizada con los libros, y el de imagen (Insertar--> Imagen). Una vez introducidos los dos webparts en la página wiki, y continuando en la edición de la página, abrimos el menú desplegable del webpart dela lista personalizada y seleccionamos "conexiones-->Enviar fila de datos a-->Portada" (donde "Portada" es el nombre del webpart de la imagen).


En la ventana que nos aparecerá, debemos escoger el campo de la lista que mandamos como parámetro al webpart de imagen. Tal y como comentamos anteriormente, este debe ser uno que indique la URL de la imagen a mostrar, por tanto, seleccionamos el campo URL_Imagen, donde estamos calculando dicha URL.


Al pulsar el botón "Finish", salimos de la edición de la página y... ya tenemos los webparts conectados. Si seleccionamos un libro concreto del listado, veremos que automáticamente nos cambia la imagen de la portada (recordad, Número y Título de Imagen han de ir coordinados). En mi caso, además, también le conecté un par de webpart de filtros, para acercarme un pelín más al concepto de mashup, tal y como muestra la siguiente imagen:

Y eso es todo por hoy, pensad en cómo podeis conectar vuestros webparts, seguro que hareis más interactiva vuestra intranet. ¡Un saludo!

No hay comentarios: