SAPUI5: Mostrar el tamaño de una tabla en el IconTabFilter

Cuando tenemos un IconTabBar con una tabla que recupera datos de un servicio oData y no tenemos ni repajolera idea de cuantas entradas tiene la tabla, queda muy chulo poder recuperar el número de entradas y mostrarlo en el icono donde esta la tabla. De esta manera tenemos una información visual muy útil.

Así que si partimos de una aplicación como la que hicimos en este post, podríamos querer conseguir algo como lo siguiente:

¿Pero cómo podemos obtener y rellenar ese dato?

¡El Gran Circo de SAPUI5 ya está aquí! ¡Pasen y vean, señoras y señores, pasen y vean!

Recordando lo que habíamos hecho

Partiremos de la aplicación que habíamos mencionado antes: un IconTabBar y dos tablas. Cada vez que se pulsa un icono, se muestra una tabla o la otra. La segunda tabla es la que nos interesa, ya que recupera los datos dinámicamente.

La aplicación la habíamos hecho con los siguientes pasos:

• Primero una tabla con datos estáticos, que es la que se mostrará al pulsar el primer icono. Aunque aquí nos valdría con poner cualquier texto chorra.
• Después una tabla que recupera los datos de un servicio oData.
• Finalmente ordenamos la aplicación gracias a un iconTabBar.
• Como extra, aunque no venga a cuento de este post, la hacíamos responsive.

El código XML

Vamos a modificar la aplicación para poder trabajar sobre los elementos.

• Le asignaremos un id a varios objetos para poder trabajar con ellos: al IconTabFilter, a la Table y al Title. De esta manera les podremos hacer cositas en el controlador, gracias al Javascript. Porque sí, hoy vamos a ver un poco de Javascript.

• También vamos a usar un evento muy importante para nuestro propósito: updateFinished. Este evento lo hereda sap.m.Table de una de sus mamiclases, sap.m.ListBase, y lo que va a hacer es ejecutar la función que le pasamos, cargarTam, cuando la tabla acabe de cargar los datos (que ha recuperado del servicio oData, por cierto).

• Finalmente, debemos tener en cuenta que la propiedad que queremos cambiar se llama count, y que la podemos modificar en el XML directamente (por ejemplo, asignando un modelo de datos) o en Javascript, mediante el método setCount(valor). Lo vamos a hacer con esta segunda opción.

Ojo, que el primer IconTabFilter lo tengo minimizado...

Primer intento, el incorrecto

Podríamos pensar en modificar la propiedad asignando directamente el tamaño de la colección invocada, mediante /Employees/$count.

Si esto funcionase, sería la bomba

Pero eso no nos vale. La propiedad count no es capaz de invocar por su cuenta al servicio oData como hace el items de la tabla. Así que nuestro icono de Empleados siempre aparecerá en pelotillas, sin numerito.

¿Y por qué lo sé? Pues porque ya lo he intentado yo con esas artimañas :D.

¡Prueba no superada!

Consultando el número de entradas de la tabla

Ahora sí que le vamos a meter mano al controlador. Ahí nos crearemos una función llamada cargarTam, que asignamos al evento updateFinished de la tabla. Dicha función puede recibir un parámetro, que yo he llamado evt y que usaremos más adelante.

En esa función lo que hacemos es recuperar la tabla mediante su id y el método byId, ver cuantos elementos tiene con getItems().length y asignar dicho valor al IconTabFilter gracias a setCount.

¿Y esto nos valdrá? Pues sólo a medias.

Tenemos que recordar que la tabla tenía una propiedad, growingThreshold, a la que le pusimos un valor de 5, y que significaba que la tabla sólo nos mostraría las primeras 5 entradas (para no sobrecargar la tabla en dispositivos pequeños) y luego añadiría la opción de cargar otras 5 entradas según bajásemos con el scroll.

En este caso, con getItems SÓLO recuperaremos las entradas que se están mostrando, así que el icono sólo nos mostrará un 5 la primera vez, y lo irá aumentando según carguemos más datos.

¿Lo tenemos ya? Casi, pero no.

Recuperando el valor total y el valor actual de líneas cargadas

Lo que tenemos que hacer es aprovecharnos del parámetro que pasa el evento updateFinished, y que hemos llamado evt.

Dicho parámetro tiene, a su vez, dos parámetros, total y actual, que con esos nombres ya os podéis imaginar lo que significan: Total es el número total de entradas de la tabla, y actual el número que está mostrando.

¿Cómo recuperamos dichos valores? De la siguiente forma:

var nTotal = evt.getParameter("total");
var nActual = evt.getParameter("actual");

Y lo demás, ya nos lo sabemos: Modificar el count del IconTabBar con setCount(nTotal).

Y, para hacerlo aún más chulo, aprovechamos para cambiar el título de la tabla y que, en lugar de Empleados, ponga "Empleados: X de 9".

Todo eso se conseguiría con este pequeño código en la función cargarTam:

Ahora sí que lo tenemos

Y, como resultado, tenemos lo siguiente:

Cada vez que se haga scroll y se muestren más entradas, el título se modificará automáticamente.

Y eso es todo, amigos, un código sencillito pero resultón.

Por último, si el servicio oData en lugar de cargarlo en el MXL lo hubiésemos hecho con código Javascript (por ejemplo, mediante un read), ahí también podríamos haber modificado el count en el evento success, leyendo la cantidad de entradas recibidas. Vamos, que como pasa siempre con código, soluciones hay muchas.