SAPUI5: Crear una tabla (II, tabla enlazada con servicio oData)

En un post anterior, estuvimos viendo cómo funcionan las tablas con un ejemplo sencillo, mostrando datos estáticos. Pero claro, eso no nos vale para mucho. Lo que queremos hacer es mostrar los datos de un servicio oData, obteniendo así una tabla dinámica megachula.

Y eso es lo que vamos a hacer ahora. Partiendo de la aplicación del otro día, añadiremos una tabla que consulte la colección Employees del servicio de Northwind.

Los pasos que vamos a seguir son:

• Modificar la aplicación para cargar el servicio oData. Esto no tiene que ver con tablas, pero nos toca hacerlo.
• Crearemos una tabla que cargue los datos de la colección Employees.
• Modificaremos la tabla para darle formato y que quede más guapetona.

Cargar el servicio oData en la aplicación

Para poder usar el servicio oData, podríamos crear una nueva aplicación a partir de una plantilla del Web IDE y copiar el código que ya habíamos hecho. Pero vamos a aprovechar lo que ya teníamos y añadir el servicio manualmente. Eso sí, tenemos que habernos definido un destination que apunte al servicio de Northwind.

Si la aplicación la hicimos con la versión 1.30 o superior de SAP UI5, los modelos se definen el archivo manifest.json (el descriptor), y la aplicación los instancia automáticamente. Podemos ver los cambios necesarios en este documento de ayuda.

Vamos a hacer los cambios en el manifest.json mediante la vista Descriptor Editor para hacerlo más sencillo. Abrimos el manifest.json en este modo (lo podemos cambiar en la parte inferior) y vamos a la pestaña Data Sources. Ahí creamos una nueva entrada para elegir nuestro servicio de Northwind (pulsamos el + y elegimos el servicio como hacíamos en la sección Data Connection de este post).

Después, en la sección Models, añadimos una nueva entrada pulsando también el botón +.

Ahí escogemos la fuente de datos creada antes y lo marcamos como modelo por defecto (¡el modelo sin nombre!).

Con estos pasos nuestra aplicación instanciará el modelo por defecto usando como fuente el servicio oData de Northwind.

Crear la tabla de forma sencillota

En el fichero Tabla.view.xml nos creamos una tabla, recordando lo que habíamos visto de los agregados items y columns.

Os recuerdo que estamos usando la abreviatura xmlns="sap.m", por eso donde ponga <Table> realmente es como si dijésemos <sap.m.Table>.

Definir la colección

Lo primero, es indicar qué colección vamos a cargar en la tabla. Eso lo hacemos usando el atributo items dentro de la etiqueta de la tabla:

<Table items="{nombre_del_modelo>/Coleccion}">

Como el modelo que estamos usando es el por defecto (sin nombre) y la colección es Employees, ponemos lo siguiente:

<Table items="{/Employees}">

Ojo, que en la tabla vamos a tener realmente dos "secciones" llamadas items: El atributo (lo que acabamos de definir ahora mismo), que nos indica la colección a usar, y el agregado (lo que viene entre la etiqueta <items></items>), que veremos al Definir las filas.

Definir las columnas

Después definimos las columnas que vamos a mostrar. Serán seis: Apellido, Nombre, ID, Título, Nacimiento y Contratación. Esto lo hacíamos en el agregado <columns>.

Definir las filas

Y en el agregado items... tachán tachán... ¡sólo creamos una línea!

En este caso, lo que estamos haciendo en items es definir una especie de plantilla, que se repetirá una vez por cada registro de la colección Employees.

<Table items="{/Employees}">
  <columns>aquí las columnas</columns>
  <items>
    <ColumnListItem>
      <cells>aquí las celdas de la plantilla</cells>
    </ColumnsListItem>
  </items>
</Table>

Vale, pues vamos a definir la plantilla. Tenemos que saber las propiedades de la colección que mostraremos en la tabla. Cada propiedad la mostraremos entre llaves, en plan:

<Text text="{NombrePropiedad}">

Podemos añadir textos fijos si queremos, sin meterlos entre llaves (<Text text="el valor es {NombrePropiedad}">), pero no nos vamos a complicar.

¿Cómo sabemos las propiedades que queremos mostrar? Venga, a visitar la entidad Employee en el metadata:

Con toda esta información ya podemos definir "la plantilla" de las filas, y el todo nos queda así:

Tanto blablabla para luego este poquito de código

Pues si ejecutamos la aplicación y todo ha ido bien, tendremos el resultado que buscábamos.

Aquí vemos dos tablas, la primera era la estática del post anterior y la segunda es la dinámica.

Darle un poquito de color a la tabla

Vamos a dejar la tabla un pelín más bonita. Sólo para ver alguna cosa que podemos hacer.

Os pongo el código a continuación y vamos comentando los cambios hechos:

Sombra aquí y sombra allá, maquíllate, maquíllate...

Lo primero que hacemos es ordenar la tabla por el apellido (LastName). Eso lo conseguimos cambiando el atributo items, con este formato:

<Table items="{ path: '/NombreColeccion',
                            sorter: { path: 'NombreDeLaPropiedadParaOrdenar',
                                          descending: false
                                        }
                           }/>
                         
Además, para evitar que la tabla cargue demasiados datos (sobre todo cuando usamos un dispositivo móvil), podemos usar el atributo growing, que nos permite definir cuantas filas va a cargar la tabla, independientemente de que la colección tenga más. Las opciones que he puesto en el ejemplo son:

• growing = true para activar esta propiedad
• growingThreshold=5 para mostrar sólo 5 filas. Si no se indica este atributo, por defecto muestra 100.
• growingScrollToLoad=true para que, cuando hagamos scroll al final de la tabla, cargue más entradas (otras 5 en nuestro caso).

También añadimos un título a la tabla, gracias a headerToolbar.

Por último, las fechas mostradas por defecto quedan un poco feunas, así que le damos un formato para que se vean más cortitas. Hay varias opciones que podemos ver aquí, yo he elegido un formato medio (por ejemplo, 11 jul. 2017).

Eso lo conseguimos con este formato:

<Text text="{ path: 'NombreDeLaPropiedad',
  type: 'sap.ui.model.type.Date',
  formatOptions: { style: 'medium' } }"/>

Con estos cambios, nos queda la siguiente tabla:

Por defecto sólo me salen 5 filas. Pero si bajo con el scroll, cargará otras cinco más.
En la imagen se ve como la aplicación se lo está pensando. 

Y para finalizar

Para finalizar, vamos a hacer unos ajustes adicionales para que la tabla se adapte al tamaño del dispositivo. Pero esto lo veremos en el siguiente post.