Extender Project Server mediante Javascript: Añadir CallOut personalizado al Centro de Proyectos

Tanto Sharepoint 2013 como Project Server 2013 pueden extender su funcionalidad mediante el nuevo modelo de API Javascript que Microsoft pone a disposición de los desarrolladores. De esta forma, se pueden realizar muchos desarrollos sin necesidad de desplegar código de servidor en la granja.

Por otro lado, tanto para extender Sharepoint como Project Online no queda más remedio que utilizar Javascript. Recordemos que el nuevo modelo de despliegue basado en apps no deja de ser una solución con una estructura parecida a las soluciones “On Premise” pero que despliega archivos .js (ficheros Javascript).

Así pues, no es necesario desplegar soluciones de granja ni apps para poder extender los productos de Office 365: simplemente hay que añadir el código Javascript necesario en un “Script Editor Webpart”. 

A continuación,mostraremos un ejemplo de cómo extender el Centro de Proyectos (Project Center) haciendo uso del API de Javascript. No se explicará en profundidad el funcionamiento del desarrollo, simplemente queremos enseñar qué se puede conseguir mediante esta tecnología.

Nuestro ejemplo está basado en un caso real en el que un cliente nos pidió poder acceder a una biblioteca de documentos que se encontraba en el sitio raíz de PWA desde el Centro de Proyectos. Desde cada proyecto se debía acceder a su correspondiente carpeta dentro de la librería. Para conseguir esto se añadió un enlace a dicha carpeta al CallOut que se muestra al pulsar los tres puntos que aparecen al lado de cada uno de los proyectos. Los controles CallOut (o Globo) son nuevos en Sharepoint 2013 y permiten resaltar opciones o contenido y pueden ser personalizados mediante javascript:

SharepointCallOutExample

El Centro de Proyectos hace uso de esta tecnología para mostrar información de un proyecto:

ProjectCenterCallOut

Sin embargo, Project Server utiliza a su vez un método propio para poder añadir los CallOuts en el Project Center. Para poder extenderlo se implementó un desarrollo que capturaba cada llamada realizada a un evento de tipo Callout, sobreescribiendo el mismo para añadir un nuevo enlace que llevara a la biblioteca solicitada mediante el objeto CallOutManager obtenido. El resultado se puede ver en la siguiente imagen:

ProjectCenterExtensionCallOut2

Como se puede observar, aparece un nuevo enlace (resaltado en amarillo) que no existía anteriormente y que llevará a la librería solicitada por nuestro cliente. Pero también podria haberse redirigido a cualquier lista o librería del sitio documental del proyecto, por ejemplo. Lo importante es entender que es posible añadir nueva funcionalidad a Project Server mediante el Api Javascript, pudiendo obtener información de los proyectos o de los sitios documentales y mostrarla como mejor convenga.

Anuncios