✒️SAP BTPFIORI / Los conceptos de enlace de datos en SAPUI5 Por Jose Baz Suarez
Los conceptos de enlace de datos en SAPUI5

Los conceptos de enlace de datos en SAPUI5
1. Introducción
El enlace de datos o data binding es uno de los conceptos fundamentales en el desarrollo con SAPUI5.
Permite conectar los modelos de datos con los controles de la interfaz de usuario (UI), de modo que cualquier cambio en los datos se refleje automáticamente en la vista y viceversa.
Gracias al data binding, SAPUI5 ofrece un desarrollo más rápido, dinámico y coherente, eliminando la necesidad de manipular manualmente los valores entre la capa lógica y la capa visual.
2. Concepto general de data binding
El data binding consiste en establecer una relación entre una fuente de datos (modelo) y un destino (control o propiedad del control).
Cuando el modelo cambia, el valor en la interfaz también se actualiza, manteniendo ambos sincronizados.
Ejemplo básico de data binding en XML:
En este caso, el control Text muestra el valor del atributo nombre dentro del modelo cargado en la vista o componente.
3. Tipos de modelos de datos en SAPUI5
SAPUI5 ofrece distintos tipos de modelos que se adaptan a diferentes escenarios de desarrollo:
a. JSONModel:
Utiliza datos en formato JSON. Es el modelo más simple y usado para pruebas, configuraciones locales o mockups.
b. XMLModel:
Se utiliza cuando los datos provienen de un archivo XML estructurado.
c. ResourceModel (i18n):
Contiene textos traducibles. Permite manejar la internacionalización (i18n) mediante archivos .properties.
d. ODataModel:
Se utiliza para conectarse con fuentes de datos remotas, normalmente servicios OData expuestos por el backend SAP (Gateway o S/4HANA).
Es el modelo más utilizado en entornos productivos SAP Fiori.
4. Tipos de data binding
SAPUI5 define tres tipos principales de enlace de datos:
a. One-way binding (enlace unidireccional):
Los datos fluyen desde el modelo hacia el control. Si el modelo cambia, el control se actualiza automáticamente, pero no al revés.
Ejemplo:
b. Two-way binding (enlace bidireccional):
Existe sincronización en ambos sentidos. Si el usuario modifica el valor en el control, el modelo se actualiza automáticamente.
Ejemplo:
c. One-time binding (enlace de una sola vez):
Los datos se cargan solo una vez y no se actualizan aunque cambie el modelo.
Ejemplo:
5. Data binding en vistas XML y en JavaScript
El data binding puede configurarse directamente en las vistas XML o programáticamente desde el controlador.
Ejemplo XML:
Ejemplo en JavaScript:
El método setModel() asigna el modelo a la vista, permitiendo que todos los controles que hagan referencia a él queden vinculados automáticamente.
6. Binding por contexto
SAPUI5 también permite enlazar datos por contexto, es decir, vincular todo un objeto o nodo del modelo a un control específico, en lugar de enlazar propiedad por propiedad.
Ejemplo:
En este caso, todos los controles hijos de la vista podrán acceder directamente a los atributos del objeto cliente sin necesidad de repetir la ruta completa.
7. Enlace de datos en tablas y listas
Los controles como Table o List utilizan un tipo especial de data binding llamado aggregation binding, ya que requieren repetir una estructura para múltiples registros.
Ejemplo:
Cada elemento del arreglo Clientes en el modelo se representa como una instancia del control StandardListItem, actualizándose automáticamente al modificarse los datos.
8. Uso de formatters
Los formatters son funciones personalizadas que permiten modificar la forma en que se muestran los valores enlazados.
Son útiles para aplicar formato a fechas, números o textos antes de mostrarlos en la interfaz.
Ejemplo:
Archivo XML:
Archivo controlador:
9. Ventajas del data binding en SAPUI5
-
Reduce la cantidad de código manual.
-
Mantiene sincronización automática entre modelo y vista.
-
Facilita el mantenimiento y escalabilidad del proyecto.
-
Aumenta la productividad del desarrollador.
-
Mejora la separación entre lógica (modelo) y presentación (vista).
10. Conclusión
El data binding es una de las características más potentes y diferenciadoras de SAPUI5.
Permite conectar modelos de datos con la interfaz de usuario de forma eficiente, flexible y sincronizada.
Comprender su funcionamiento, los tipos de modelos disponibles y los distintos modos de binding es esencial para desarrollar aplicaciones Fiori dinámicas y escalables.
Preguntas de repaso
-
¿Qué permite el data binding en SAPUI5?
Permite enlazar datos entre los modelos y los controles de la interfaz, manteniendo sincronización automática entre ambos. -
¿Cuáles son los tipos principales de modelos utilizados en SAPUI5?
JSONModel, XMLModel, ResourceModel (i18n) y ODataModel. -
¿Qué diferencia existe entre one-way, two-way y one-time binding?
El one-way actualiza la vista cuando cambia el modelo; el two-way sincroniza ambos sentidos; y el one-time solo carga los datos una vez. -
¿Qué es un formatter y para qué se utiliza?
Es una función personalizada que permite transformar el valor del dato antes de mostrarlo en la interfaz. -
¿Qué tipo de binding se utiliza para representar datos repetitivos en listas o tablas?
El aggregation binding, que repite una estructura de control por cada elemento del conjunto de datos. -
¿Qué método se utiliza para asignar un modelo a una vista?
El método setModel() del objeto de vista. -
¿Qué ventaja aporta el data binding al desarrollo Fiori?
Reduce la cantidad de código manual y garantiza la sincronización constante entre los datos y la interfaz, mejorando la eficiencia y mantenibilidad del desarrollo.
 
 
 
Sobre el autor
Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
Jose Rodrigo Baz Suarez
Profesión: Analista de Inventarios y Auditoria - Uruguay - Legajo: WX92M
✒️Autor de: 47 Publicaciones Académicas
🎓Cursando Actualmente: Carrera Consultor SAP MM Nivel Avanzado
🎓Egresado del módulo:
Disponibilidad Laboral: FullTime
Presentación:
Analista con experiencia en sap, contabilidad, inventarios y costos. manejo de cierres, balances, reportes y mejoras de procesos administrativos.
Certificación Académica de Jose Baz

























