SAPUI5: Crear una tabla (III, tabla responsive)

Cuando decimos aquello de que SAPUI5 es responsive, podemos pensar que, mágicamente, la aplicación se va a adaptar al dispositivo. Pero eso no es así de sencillo, tenemos que poner (código) de nuestra parte.

Así que en este post vamos a ver cómo podemos hacer que una tabla sea responsive y se adapte al dispositivo o al tamaño del navegador, ya sea ocultando columnas que nos aportan poca información, o agrupando varias columnas debajo de la primera. Estas operaciones nos permitirán evitar tener columnas de un ancho absurdamente pequeño, tener que usar el scroll horizontal y tener que estar haciendo zoom constantemente.

Partiremos de una tabla de tipo sap.m.Table que habíamos creado en un post anterior, que mostraba el contenido de la colección Employees del servicio oData Northwind.

Esa aplicación la hemos ido creando a lo largo de tres posts (no sólo el que he mencionado antes), que en orden son los siguientes:

• La creación de una tabla estática, con un contenido fijo, para mostrar una leyenda; 
• La creación de la tabla dinámica que mencionaba antes;
• Dejar la aplicación más bonita, separando las tablas mediante un IconTabBar

Nos centraremos en tres propiedades que se usan en el elemento sap.m.Column para que nuestra tabla se convierta en algo así cuando se reduzca el ancho del navegador:

Sólo vemos tres columnas, pero es que las que nos faltan o se han ocultado (el título),
o se han colocado debajo de la primera (el nombre y el id).

SAPUI5: Separar contenido mediante barras de iconos (Icon Tab Bar)

Habíamos estado viendo ejemplos de cómo crear una tabla con contenido estático y con contenido dinámico, obtenido a través de un servicio oData. La primera (la estática) la estábamos utilizando como si fuese una leyenda, para aprender a trabajar con tablas. La segunda nos servía para ver como enlazar una colección con la tabla.

Todavía nos falta hacer la tabla dinámica responsive. Pero hay que admitir que la aplicación quedaba más fea que un goblin con sarna, con las dos tablas juntas y sin separación. Así que en este tutorial vamos a separarlas y así aprendemos a usar un componente, el IconTabBar.

Nuestro objetivo es obtener algo así:

Al pulsar cada icono, veremos una tabla distinta y el resto hará ¡puf! y dejará de verse

De tal forma que, cuando pulsemos un icono, nos muestre sólo la leyenda, y cuando pulsemos el otro, la tabla con los datos. El tercero será para mostrar información adicional.

A seguir estudiando después del veranito

Y yo que pensaba hace unos pocos días que no encontraba ningún curso interesante, y de repente me llega un email de openSAP para ponerme al día.

¿Alguno que me haya llamado la atención relacionado con SAP UX? Pues alguno hay, a ver si os gustan:

- SAP Fiori for iOS: Para finales de agosto de 2017, destinado a aquellos interesados en crear aplicaciones nativas para iOS. Eso sí, aunque no se necesitará obligatoriamente un iPad o un iPhone (ya que se podría usar un simulador), para los ejercicios sí que sera necesario tener un Apple. Digo yo que lógico, ¿no?

- Using SAP Screen Personas for Advanced Scenarios: Para principios de septiembre, un nuevo curso de esta herramienta que sirve para más que pintar las viejas dynpros del ECC y dejarlo cuco. El siguiente paso al curso básico dado anteriormente, Introduction to SAP Screen Personas. Si no diste ese curso, pues aprovecha este veranito antes de que empiece el nuevo ;).

- Basics of Design Research: Porque no todo va a ser picar código, para septiembre tenemos también la nueva edición de este curso donde podemos aprender a obtener la información necesaria para poder crear una aplicación guay, centrada en la persona que va a usarla.

Así que para ponerse al día y aprender un poquito más sólo es necesario ir echando un vistazo de vez en cuando a https://open.sap.com/courses .

O también podéis aprovechar para echar una ojeada a cursos antiguos, que no obsoletos ;).

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.

¿Programar en el Web IDE con el móvil? ¡Anda ya!

Pues sí, a ratos uno tiene ideas muy locas, y se me ocurre pensar si sería posible hacer una pequeña aplicación SAPUI5 en el móvil, mientras desde el bar del hotel veo cómo la lluvia me ha estropeado un día de playa. Se podría pensar "bueno, a lo mejor con una tablet y con un teclado externo...", pero no, he dicho ideas muy locas, así que a programar con el móvil.

Partamos de una premisa: Para programar se necesita teclado, pero uno de verdad, no uno virtual, con el que se pueda escribir cómodamente. Y una buena pantalla. Con esto en mente, ya sabemos que un móvil no es, ni de lejos,  lo más idóneo para picar código. Al menos no hasta que los teclados y monitores holográficos sean una realidad.

Mi intención era, sobre todo, probar si es factible hacer en el Web IDE, a través de un móvil decente (con Android en mi caso), alguna pequeña corrección en un código que ya exista, o incluso crear una aplicación a partir de una plantilla sin que se nos complique la existencia. Todo ello sin perder cordura como si estuviésemos invicando al mismísimo Cthulhu. Por ejemplo... no sé... ¿un ejemplo de una tabla en SAPUI5 para escribir un post?  ;)