✒️SAP BTPFIORI / La adaptación de la IU a los diferentes dispositivos Por Candela Nuñez

La adaptación de la IU a los diferentes dispositivos en SAP Fiori se basa en el diseño responsivo. El diseño responsivo es la capacidad de una aplicación web de funcionar correctamente en distintos dispositivos, anchos de pantalla, resoluciones y densidades de píxeles, sin necesidad de desarrollar versiones separadas. Esto significa que una misma aplicación puede ejecutarse en teléfono, tableta o computadora de escritorio ajustando automáticamente su distribución y comportamiento.

En SAPUI5, además de adaptar el layout, también se puede ajustar el tamaño de los controles según el tipo de interacción, ya sea táctil o mediante teclado y mouse. La principal ventaja del diseño responsivo es que las aplicaciones se adaptan a diferentes tamaños de pantalla sin requerir esfuerzos adicionales de codificación o mantenimiento, lo que reduce costos y mejora la eficiencia del desarrollo.

En el caso de tablas responsivas, SAPUI5 permite controlar cómo se muestran las columnas mediante propiedades como minScreenWidth y demandPopin. Si el ancho de la pantalla es mayor o igual al valor definido en minScreenWidth, la columna se muestra normalmente. Si el ancho es menor, se activa el comportamiento definido por demandPopin: cuando esta propiedad es verdadera, la columna no desaparece, sino que se muestra como información secundaria en formato “pop-in”; si es falsa, la columna simplemente se oculta. Esto permite mantener la información relevante visible incluso en pantallas pequeñas.

También es posible ocultar controles individuales según el tipo de dispositivo utilizando clases CSS estándar como sapUiVisibleOnlyDesktop o sapUiHideOnDesktop, lo que brinda un control adicional sobre la visualización.

Para detectar el tipo de dispositivo, SAPUI5 utiliza la API sap.ui.Device, que identifica si el acceso se realiza desde teléfono, tableta o escritorio mediante propiedades como system.phone. Es importante entender que reducir manualmente el tamaño de la ventana del navegador no cambia el tipo de dispositivo detectado. Para realizar pruebas correctas, se debe usar la emulación de dispositivos del navegador o probar en un dispositivo real. Dentro del proyecto SAPUI5, se agrega la dependencia a sap.ui.Device en el componente de la aplicación y se inicializa el modelo del dispositivo en el método init.

Otro aspecto clave es la accesibilidad web. El objetivo es que las aplicaciones puedan ser utilizadas por la mayor cantidad de personas posible, independientemente de sus capacidades o del dispositivo utilizado. Para ello se emplean los atributos ARIA (Accessible Rich Internet Applications), que permiten a los lectores de pantalla reconocer la estructura de la aplicación e interpretar correctamente los elementos de la interfaz. Dentro de ARIA existen los llamados “puntos de referencia” o landmarks, que funcionan como mapas de navegación para ayudar al usuario a desplazarse por la aplicación. En SAPUI5 se puede utilizar la librería sap.m.PageAccessibleLandmarkInfo para definir roles y etiquetas ARIA en las vistas, por ejemplo en el archivo Overview.view.xml. Para probar la navegación por puntos de referencia puede utilizarse Google Chrome con extensiones como Landmark Navigation via Keyboard.

En cuanto a la densidad de contenido, SAP Fiori debe funcionar correctamente tanto con interacción táctil como con mouse y teclado. SAPUI5 ofrece factores de “content density” que ajustan el tamaño y espaciado de los controles según el tipo de interacción. La densidad Cozy (clase sapUiSizeCozy) está optimizada para dispositivos táctiles como smartphones o tablets; los controles son más grandes y con mayor espaciado, facilitando la interacción con los dedos. Es la densidad predeterminada en la mayoría de los controles, especialmente en la biblioteca sap.m. La densidad Compact (clase sapUiSizeCompact) reduce el tamaño y el espaciado de los controles, siendo más adecuada para dispositivos de escritorio operados con mouse. Existe también la densidad Condensed (clase sapUiSizeCondensed), utilizada específicamente en tablas analíticas como sap.ui.table.AnalyticalTable. En el archivo Component.js se puede definir dinámicamente qué densidad aplicar según si el dispositivo es táctil o no.

Por último, SAPUI5 incluye controles que ya incorporan comportamiento responsivo. Un ejemplo es el control ObjectHeader, que reorganiza automáticamente la información según el tamaño de la pantalla. Este control puede configurarse en modo más flexible estableciendo las propiedades responsive en true y fullScreenOptimized en true, permitiendo que el encabezado aproveche mejor el espacio disponible en pantallas pequeñas.

La adaptación de la IU en SAP Fiori combina diseño responsivo, control dinámico de columnas, detección de dispositivo, accesibilidad web y ajuste de densidad de contenido, garantizando que una misma aplicación pueda ofrecer una experiencia óptima en cualquier dispositivo.