jueves, 1 de julio de 2010

MSS 2010: Columnas gráficas en listas con vistas condicionales

En SharePoint 2007, para obtener columnas con formato en nuestras listas (colores del texto, gráficos de fondo, etc.) debíamos utilizar  las columnas calculadas combinadas con un webpart de contenido que permitia introducir código html a dichas columnas. A pesar de que esa solución sigue siendo válida en SharePoint 2010, ahora tenemos la alternativa más directa y limpia (sin código añadido ni webparts adicionales) de las vistas condicionales que podemos implantar desde SharePoint Designer 2010. En concreto hoy voy a mostrar cómo utilizando esta nueva funcionalidad, podemos implantar rápida y facilmente columnas gráficas en listas de SharePoint 2010.

Para ello deberemos abrir SharePoint Designer 2010, abrir el sitio que contenga la lista donde queramos obtener la columna gráfica. Posteriormente nos situamos en la lista concreta y abrimos la vista (o creamos una nueva) que será la que contenga la columna gráfica.

En mi ejemplo he utilizado el caso de querer mostrar una semaforización de la gravedad de un riesgo en función de 2 parámetros: Probabilidad e Impacto. Así que primero creo estas 2 columnas en la vista, que son campos de selección con 3 opciones cada una ("Alto", "Medio" o "Bajo"). Después creo otras 2 columnas que me devuelven el valor numérico de las primeras. Es decir, si el valor es "Alto" lo convierto en 3, si el valor es "Medio" lo convierto en 2 y si el valor es "Bajo" lo convierto en 1. La fórmula para este cálculo puede ser tan sencilla como: =IF(Probabilidad ="Alto",3,IF(Probabilidad ="Medio",2,1)) . Aplico la misma fórmula para la columna numérica del Impacto, de forma que hasta ahora tengo 4 columnas creadas (Probabilidad, Impacto, #Probabilidad, #Impacto). Ahora creo la quinta y definitiva columna, la de "Gravedad", que de nuevo es una columna calculada con la multiplicación de #Probabilidad y #Impacto ( =[#Impacto]*[#Probabilidad] ).

En la vista que estamos editando en SharePoint designer, oculto los campos numéricos de #Impacto y #Probabilidad, selecciono el la columna "Gravedad" y en la Ribbon, abrimos el menú del botón "Formato Condicional" y seleccionamos "Formato de columna"
Acceso a las opciones de formato condicional para la columna seleccionada

Ahora creamos una nuevo formato condicional con el criterio "cuando el campo gravedad sea mayor o igual a 6",
Definimos la condición deseada en la que queremos aplicar una determinada imagen en la columna

 y hacemos 2 cambios en el estilo aplicado: El primero es en el apartado "Fuente", donde pondremos que el tamaño de la fuente es = a 0 px.
Especificamos el tamaño de la fuente a 0 para que no muestre ningún texto en el campo

El segundo es en la sección "Fondo", seleccionar una imagen de fondo que tengamos subida a alguna biblioteca de imágenes de nuestro SharePoint (en mi caso la dejé en "SiteAssets" del propio sitio contenedor de la lista que estoy modificando), posteriormente seleccionaremos "no-repeat" en la sección "background repeat". En este caso ya tendremos definido el formato en el que se mostrará el semáforo rojo.
Carga de la imagen de fondo sin repetición en el estilo condicional

Pulsamos en OK. Un tema curioso es que probablemente en la visualización de Designer continueis viendo un texto de fondo (no aplica bien el formato especificado), pero os garantizo que si lo probais en Internet Explorer se visualizará correctamente (ya sabemos que designer no es muy fino mostrando vistas previas on-time).

Ahora creamos 2 formatos condicionales más siguiendo el mismo proceso:

Uno que aplique cuando el campo Gravedad sea inferior a 6 e igual o menor que 3, donde aplicaremos el formato del semáforo amarillo.

Otro que aplique cuando el campo Gravedad sea inferior a 3, donde aplicaremos el formato del semáforo verde.

En este punto ya deberíamos tener definida nuestra vista con el formato gráfico para la columna "Gravedad". En caso de que no os esté funcionando, os recomiendo que editeis las condiciones y pulseis el botón de "Avanzado". En la ventana donde se muestra la fórmula debereis eliminar el punto que en ella aparece (parece que no especifica del todo bien el campo a la primera).
Pantalla avanzada de la condición, donde eliminaremos el punto de la fórmula condicional

Llegados a este punto, ya hemos conseguido nuestro objetivo. Guardamos la vista con Designer, cerramos el programa, y en nuestro SharePoint 2010 deberíamos ver un resultado muy similar al que muestra la siguiente pantalla: 
Visualización final de una lista con una columna gráfica mediante formato condicional

Solamente advertiros que aunque este es un método sencillo para dar formato gráfico a nuestras columnas, también es un método frágil, ya que si por "casualidad" nosotros u otro administrador nos da por añadir una columna más a la vista o hacer alguna otra modificación en ella desde la interface del SharePoint (no Designer), machacará el formato condicional aplicado en la vista, y mas nos valdrá haber hecho un backup de la misma o tendremos que volver a iniciar el proceso...

Que cada cual lo use (o no) según su critero!

Un saludo!

No hay comentarios: