Utilizando las WebParts de SharePoint

Las WebParts o Elementos Web de SharePoint, son elementos que cobran una gran importancia en las versiones 2007 y 2010 de la plataforma. Bien sea en su versión gratuita (WSS 3.0 o Foundation), como en su versión Estándar o Empresarial, las WebParts son componentes esenciales y muy versátiles que podemos usar sin mayores problemas dentro  de la plataforma.
En TopGroup venimos utilizándolas en nuestros clientes, siempre teniendo en mente el uso por defecto de las ofrecidas por SharePoint. Las más utilizadas pueden ser el agregar una lista o una biblioteca como un WebPart a una página de contenido, el Editor de Contenido Web, Pasador de Imágenes, los filtros, y en general los elementos que ya trae la plataforma listos para ser utilizados y que vale la pena explorar muy bien antes de tomar otras decisiones.
En la siguiente imagen podemos ver una Intranet de uno de nuestros clientes donde haciendo uso en su mayoría de WebParts ofrecidas por SharePoint, rápidamente podemos crear páginas de contenido, con información relevante para los usuarios del sitio:

Vallas2

En la imagen anterior podemos ver lo siguiente:
  • Haciendo uso de la WebPart de Editor de contenido, que es uno de los elementos Web por defecto, y la cual permite agregar cualquier contenido HTML, como también JavaScript, se puede desplegar información relevante y de manera rápida y eficiente de diferentes fuentes de información. Por ejemplo en la imagen anterior se puede observar que estamos desplegando un mapa de GOOGLE, plug-ins sociales de FaceBook, entre otros. Básicamente se debe editar la WebPart, ingresar a su editor HTML y ahí pegar el contenido HTML y JavaScript que los sitios de terceros como GOOGLE Maps, generan para embeber en nuestros sitios.
  • Si continuamos analizando la imagen, podemos ver también que las WebParts de Vínculos y Documentos, son listas de SharePoint que fueron agregadas a la página como elementos Web. El problema de hacer esto, es que SharePoint le da un formato tabular a la WebPart lo cual ocupa mucho espacio si no se reducen las columnas, y es poco amigable a la vista de los usuarios. Por esta razón, en el caso de esas dos WebParts, hemos utilizado XSLT, para transformar el resultado, agregar estilos vía CSS, y reacomodar la información para desplegarla de manera ordenada, relevante y de buen gusto para el usuario final.
  • SharePoint ofrece un pasador de Fotos por defecto, que es bastante bueno y rápido de configurar. En la imagen se aprecia una pasador de fotos que obtienes las imágenes, las cuales están almacenadas en una biblioteca de imágenes, se van desplazando de manera automática, y pueden ser adelantadas o atrasadas, e incluso detener el ciclo para visualizar una imagen a detalle. Este componente tiene opciones para desplegar el título y descripción de la Foto, lo cual la hace aun más interesante y puede ser muy útil en una Intranet, prácticamente emulando un elemento de tipo Carrusel.
Puede darse el caso cuando las WebParts por defecto de SharePoint no cubren las necesidades, o se cierran ante los requerimientos puntuales de nuestros clientes.
  • En la imagen anterior, se puede apreciar un Carrusel de Noticias implementado con JQuery. Esto también se apoya en el uso de la WebPart de Editor de Contenido, la cual como hemos comentado nos permite agregar contenido JavaScript. En ese caso adicionalmente consumimos los servicios REST de SharePoint 2010, y de ese modo podemos tomar información de una lista de Noticias, y así desplegar por ejemplo el Thumbnail, Título, fecha, Autor, etc.
  • Lo anterior por ejemplo nos lleva a salirnos del diseño por defecto de SharePoint, para que cuando el usuario decida visitar la noticia, la página siga conservando el rediseño acorde a su imagen corporativa. Recordemos que cuando se visita un ítem de una lista, SharePoint lo despliega en su formato tabular, muy poco amigable para el usuario final. La siguiente imagen muestra el rediseño de la página que permite visualizar cada noticia.
Noticia

  • Si nuevamente revisamos la primera imagen encontramos una WebPart de Usuarios Conectados. Esta funcionalidad no viene con la plataforma en ninguna de sus versiones. No hay manera de saber quién está conectado en la Intranet. En este caso hemos implementado una WebPart en Visual Studio .NET 2010, la cual apoyándose en una lista de SharePoint, va almacenando los usuarios que se encuentran en sesión dentro del sitio y los va registrando, para posteriormente listarlos en la WebPart. Adicionalmente la WebPart se apoya en AJAX para realizar un refresco de la información, evitando viajes completos al servidor, e indicando de manera amigable al usuario que se está actualizando, como se aprecia en la figura.
Conectados
  • Adicionalmente aprovechando la funcionalidad ofrecida por JavaScript, se ha implementado un Chat básico, que permite comunicarse a los usuarios Conectados entre sí. Esta es otra funcionalidad que no viene con SharePoint, y que está siendo muy solicitada por los clientes, el uso de Chat dentro de las Intranets implementadas con la plataforma. Para este caso, si se hace clic en uno de los usuarios conectados, vamos a poder iniciar una ventana modal, para poder conversar con la persona específica. En el momento que se hace clic, se activa un modulo JQuery, el cual le despliega una ventana de aviso específicamente al usuario que le hemos pedido charlar, en la esquina inferior derecha de su pantalla.
Chat
Aviso

De lo anterior la conclusión más importante es que SharePoint es una plataforma muy versátil, y que en el caso de SharePoint 2010, las mejoras son sustanciales. Siempre nuestra premisa es usar lo que ofrece por defecto la Plataforma, pero si ya no soporta los requerimientos, vemos que extender su funcionalidad es algo bastante potente. Tenemos a la mano muchas herramientas para hacerlo, REST, Web Services, JQuery, JavaScript, Microsoft .NET Framework, y en general muchas posibilidades que nos permiten entregar funcionalidades valiosas a nuestros clientes.

5 comentarios:

  1. Que tal la verdad estoy muy interesado en la web part de usuarios conectados, me podrias decir como que cada que un usuario ingresa se registra en una lista, y como implementas la funcionalidad de ajax

    ResponderEliminar
    Respuestas
    1. Manuel buenos días, por favor danos un mail para enviarte un poco más de información. Gracias

      Eliminar
  2. Mi estimado, necesito visualizar un rotador de noticias para lo cual mi lista de noticias tiene una sola imagen, esto ya lo tengo implementado, sin embargo deseo visualizar mas imagenes que son de la misma noticia, estas imagenes están en una biblioteca de imágenes, como podría hacer para realizar esto, gracias de antemano

    Hubert Calderón
    correo: hubpelca@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hubert buenas tardes

      Eso básicamente es lo que hace nuestro componente. A través de la combinación de los servicios REST de SharePoint 2010 o 2013 y JQuery puedes hacerlo sin mayor problema. Voy hacer la siguiente suposición tratando de entender tú situación. Abres la noticia y eso nos lleva a una página donde se despliega la noticia y ahí vamos a desplegar el carousel. Por query string debes enviar a esta página el ID de la noticia, si es el formulario DispForm.aspx de la lista de noticias entonces ya lo tienes. Con base en ese ID que seguramente tienes relacionado con tú biblioteca de imágenes entonces puedes hacer un filtro de la lista de Noticias. Cómo haces eso? http://msdn.microsoft.com/en-us/library/office/jj163201(v=office.15).aspx y usando CAML se puede hacer el filtro por el ID de la noticia, eso está en la parte de SharePoint list item tasks. Para obtener el valor del ID vía el query string ahí mismo está la función que hace eso: function getQueryStringParameter(paramToRetrieve) Luego de tener los ítems de la biblioteca de imágenes filtradas para esa noticia, puedes iterar por ese resultado y con JQuery se implementa el carousel con alguno de los que hay por ahí ya hechos: http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/

      Nosotros siempre buscamos alguna librería JQuery con un Carousel y lo adaptamos para que lea los ítems de la biblioteca de imágenes. Esos ejemplos usan rutas "quemadas" en código pero en el caso, eso debe ser dinámico leyendo los campos de la biblioteca de imágenes, por ejemplo la URL de la imagen para poder desplegarla:

      Saludos y esperamos que te sirva de algo esta explicación

      Eliminar
    2. Vale la pena aclarar que también te puedes agregar una webpart visor de imágenes en el formulario DispForm de la lista de noticias, también agregar una Webpart de filtro, tratar de conectarla con la webpart de imágenes que estaría conectada con la biblioteca de imágenes y buscar de filtrar por la noticia en la que te encuentras en ese momento. Si eso funciona, obviamente es mucho más rápido de implementar que por la otra solución que ya te enviamos. La otra solución te da todo el control, pero esta deberías probarla. https://www.nothingbutsharepoint.com/sites/eusp/Pages/default-web-parts-in-sharepoint-_e2_80_93-part-2-cewp-cqwp-cswp-rsswp.aspx Otro mecanismo sería agregar la WebPart de imágenes en el DispForm de la lista Noticias y manipular el XSLT, es otra manera rápida de hacer el filtro. Ahora bien esta ultima no te da la animación de las imagenes, pero te agilizaría el filtro de la imágenes. Con las imágenes ya filtradas ahí deberías ver de animarlas. Pero prueba primero conectando las webparts por favor.

      Eliminar