Crear un gráfico en SAPUI5 (III) - Tooltip a medida

En artículos anteriores, habíamos creado un gráfico en SAPUI5 para mostrar la probabilidad de éxito al tirar dos dados (2d6) y habíamos añadido un tooltip que aparecía al seleccionar uno o varios elementos del gráfico (uno de los "puntitos") y que nos mostraba la información de la última selección hecha.

Y oye, el resultado era aparente... bueno, más o menos, tampoco era para tirar cohetes en una fiesta hobbit. ¿Pero qué pasa si queremos que el tooltip muestre una información más personalizada? Por ejemplo, que nos liste todos los elementos que están seleccionados y muestre la probabilidad total de que, al lanzar los dados, el resultado sea alguno de dicho conjunto.

De eso nos vamos a encargar en este artículo, y los pasos que seguiremos serán:

• Crear en la vista el control que vamos a utilizar: sap.viz.ui5.controls.Popover.
• En el controlador, conectar el Popover con el gráfico (el control VizFrame): Método connect.
• Crear en contenido personalizado del Popover. Aquí añadiremos un layout vertical con dos textos, uno para mostrar los elementos seleccionados y otro para mostrar la probabilidad total.
• Calcular y modificar los datos a visualizar en el método que se llamará al seleccionar un elemento del gráfico: Método setCustomDataControl.
• Crear un array de botones, que se mostrarán en el Popover para realizar acciones personalizadas adicionales: Método setActionItems.

Y el resultado que obtendremos será algo como lo siguiente:

Sí, se me ha olvidado añadir la tilde a selección, pero luego lo he hecho :P.

Lea antes de usar

NOTA: Antes de nada, tengo que reconocer que para este artículo he hecho un poco de trampa. En el artículo anterior, mostraba dos líneas de probabilidad diferentes: Una para mostrar la probabilidad de aparición de cada resultado individual y otra la probabilidad acumulada (obtener 2 o más, 3 o más, etc).

El problema es que, a la hora de recuperar los elementos seleccionados, el método vizSelection no te dice qué línea estás leyendo, sólo "la coordenada" X e Y. Por no complicarme la vida, ya que el objetivo del post era mostrar el tooltip personalizado, he decidido borrar la gráfica de resultados acumulados y mostrar sólo la de resultados individuales.

Actualizando la vista XML

Para añadir un tooltip, usaremos un control de tipo sap.viz.ui5.controls.Popover. Lo definimos dentro de la vista. Si tenemos el namespace xmlns:viz="sap.viz.ui5.controls", lo haremos así:

<viz:Popover id="idPopOver"></viz:Popover>

Modificando el controlador

Vamos ahora a picar el código en el controlador. En este ejemplo, todo el código que vamos a incluir estará dentro del onInit.

Lo primero es recuperar el VizFrame y el Popover (les habíamos puesto un id, así que cosa sencilla) y "enganchar" el segundo al primero con el método connect. Además, tenemos que desactivar la configuración del tooltip estándar del Vizframe (en el método setVizProperties). En este ejemplo, simplemente no activamos el tooltip, pero podemos ver cómo se activaba en el artículo anterior:

this.oVizFrame = this.byId("idVizFrame");
this.oVizFrame.setVizProperties( { "title" : { "text" : "2d6"} });

// Configuración del PopOver
var oPopOver = this.byId("idPopOver");
oPopOver.connect(this.oVizFrame.getVizUid());

Ojo, para poder hacer el connect, el VizFrame tiene que ser de tipo fiori. Esto ya lo hemos definido en la vista XML (en el atributo uiConfig, con applicationSet : 'fiori').

El Popover nos va a mostrar unas secciones por defecto (el título, un botón para cerrar y el número de elementos actualmente seleccionados) pero también nos permite añadir dos bloques adicionales: Una sección para añadir nuestro contenido personalizado (donde vamos a mostrar la información adicional que queramos) y, en la parte inferior, una sección con botones para realizar acciones.

El contenido se añade con el método setCustomDataControl y los botones, con setActionItems.

Crear el contenido personalizado

Así que primero vamos a crear el contenido que se mostrará en el tooltip. Vamos a añadir un layout de tipo vertical y dos textos, cuyo contenido recalcularemos cada vez que seleccionemos un elemento en el gráfico. Los controles los vamos a tener ya guardados en variables, para no estar destruyéndolos y creándolos continuamente a la hora de calcular el contenido de los textos.

Como el addContent nos devuelve el propio control, podemos encadenar varios addContent

Función que se ejecuta para mostrar el tooltip

Después llamamos al método setCustomDataControl para añadir dicho contenido. Ese método tiene como parámetro una función callback que devolverá el objeto que queremos añadir al popover (en nuestro caso, el this.oLayout que hemos creado antes). Ojo, que no vale conque lo hayamos añadido previamente en una iteración, siempre hay que devolverlo.

El método es llamado cada vez que seleccionamos un elemento del gráfico, así que es ahí donde generaremos el contenido de los textos.

¿Cómo podemos hacerlo? Mediante el método vizSelection() del VizFrame. Este método, llamado tal cual, nos devuelve todos los elementos seleccionados en un array (con contenido data.<Nombre_de_feeditem>).

Una vez tengamos todos los valores, simplemente cambiaremos el contenido de los textos con setText y devolveremos el Layout que ya habíamos creado previamente. Evitamos volver a crear aquí elementos para cada nueva iteración.

El nombre de los "ejes" son aquellos que ya asignamos en su momento en el XML, los FeedItems. En nuestro caso, como se llaman Probabilidad y Resultado, en el array de selección buscaremos por data.Probabilidad y data.Resultado.

Esto es lo que definimos en la vista

Y así lo vemos al debuggear

Función que determina los botones de acción

Ya sólo nos falta una cosa en el controlador: Añadir los botones que ejecutan acciones. Eso se hace con setActionItems, método al que pasamos como parámetro un array de objetos con las acciones (con el tipo, el texto que mostrará el botón y una función callback que se ejecutará cuando pulsemos el botón).

oPopOver.setActionItems([{
  type : 'action',
  text : 'Texto del botón',
  press : funcion_callback() { ... }
}]);

Código resumen

Y con todo esto ya tenemos nuestro Popover, que se mostrará cada vez que seleccionemos uno de los elementos del gráfico.

El código resumen del onInit en el controlador sería el siguiente (con los bloques del modelo de datos, del setCustomDataControl y del setActionItems minimizados):

Pero como sé que así se ve más feo que un klingon con tutú, podemos descargarnos el resultado en este enlace de Git.