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).

Comparándola con la tabla original:

Entendamos las propiedades de sap.m.Column que usaremos

Primero, veamos un extracto del código para entender dónde estamos. Lo que nos interesan son las propiedades de Column:

<Table>
  <columns>
    <Column><Label text="Apellido" /></Column>
    <Column minScreenWidth="50em" 
                    demandPopin="true"
                    popinDisplay="Inline"><Label text="Nombre" /></Column>
    ... más columnas ...
  </columns>
  <items>aquí van las celdas</items>
<Table>

Para aquellas columnas que queremos que se comporten de forma adaptativa (responsive), usaremos las tres siguientes propiedades:

• minScreenWidth: Nos indica que la columna es responsive. Aquí indicaremos un ancho en píxeles, en em... o utilizando el enumerador sap.m.ScreenSize. Si el ancho del navegador es inferior a este valor, entonces la columna se adaptará como corresponda. Por defecto, se ocultará.

• demandPopin: Aquí viene la joya de la corona responsive. Si asignamos minScreenWidth y añadimos demandPopin="true", la columna no se ocultará, sino que se colocará debajo de la primera columna.

• popinDisplay: Cuando demandPopin sea true, podemos indicar cómo se va a mostrar la columna de forma adaptativa usando uno de los tres posibles valores de sap.m.PopinDisplay. Block, Inline y WithoutHeader.
  
  La diferencia entre estas tres opciones la vamos a ver con un ejemplo, una tabla con la guardia de Ankh-Morpork, donde "Nombre" es responsive:

Apellido	Nombre
Vimes	Sam
Fundidordehierroson	Zanahoria
von Uberwald	Angua

• Si usamos Block se mostrará la columna como un bloque, primero el texto de la cabecera y luego el contenido:

Apellido

Vimes Nombre Sam

Fundidordehierroson Nombre Zanahoria

von Uberwald Nombre Angua

• Si usamos Inline mostrará la columna en una única línea, con formato Nombre: Sam:

Apellido

Vimes Nombre: Sam

Fundidordehierroson Nombre: Zanahoria

von Uberwald Nombre: Angua

• Si usamos WithoutHeader mostrará el contenido de la celda pero no el título de la columna:

Apellido

Vimes Sam

Fundidordehierroson Zanahoria

von Uberwald Angua

Hacemos los cambios en nuestro código

Hala, a hacer unos cambios en nuestra tabla de empleados. En nuestro ejemplo, sólo la primera columna será fija, en resto se adaptará según las necesidades:

• El nombre se mostrará debajo de la primera columna cuando el ancho sea inferior a 50em. Lo mostrará todo en una línea: Nombre: Faramir.

• El identificador se pondrá también debajo cuando el ancho sea inferior a 50em. Sin embargo, no mostrará la cabecera (ID), sólo el número.

• El título (Sr., Sra.) no nos aporta mucha información, así que lo ocultaremos directamente cuando el ancho sea inferior a 50em.

• Si reducimos más el ancho y se hace inferior al de una Tablet (600px), tanto la fecha de nacimiento como la de contratación se pondrán debajo en modo bloque.

Tras tanto blablabla que os he soltado, el código que tenemos es el siguiente:

En la cabecera de la aplicación, hemos usado como abreviatura xmlns="sap.m", así que donde dice <Column> realmente hace referencia a sap.m.Column, y donde dice <Table>... pues a sap.m.Table.

Y el resultado es el siguiente

Si reducimos el ancho del navegador hasta que sea inferior a 50em, el nombre, el ID y el título se verán afectados y se verá tal que así:

El cambio se hará automáticamente según vayamos reduciendo el tamaño

Y si reducimos aún más el ancho, todas las columnas acabarán viéndose afectadas, cada una con un formato diferente (Inline, WithoutHeader o Block).

Con esta opción, podremos ver los datos en el pc, en una tablet o en el móvil, y no necesitaremos usar el scroll horizontal. ¡Ya hemos hecho nuestra tabla responsive!