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

Selector Alummnos / Empresas

Los conceptos de enlace de datos en SAPUI5

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:

<Text text="{/nombre}"/>

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:

<Text text="{/cliente/nombre}"/>

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:

<Input value="{path:'/cliente/nombre', mode:'TwoWay'}"/>

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:

<Text text="{path:'/cliente/nombre', mode:'OneTime'}"/>

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:

<Text text="{/producto/nombre}"/>

Ejemplo en JavaScript:

var oModel = new sap.ui.model.json.JSONModel({ producto: { nombre: "Laptop Lenovo" } }); this.getView().setModel(oModel);

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:

this.getView().bindElement({ path: "/cliente" });

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:

<List items="{/Clientes}"> <items> <StandardListItem title="{nombre}" description="{ciudad}"/> </items> </List>

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:

<Text text="{path:'/cliente/estado', formatter:'.formatearEstado'}"/>

Archivo controlador:

formatearEstado: function(estado) { return estado === "A" ? "Activo" : "Inactivo"; }

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
  1. ¿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.

  2. ¿Cuáles son los tipos principales de modelos utilizados en SAPUI5?
    JSONModel, XMLModel, ResourceModel (i18n) y ODataModel.

  3. ¿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.

  4. ¿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.

  5. ¿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.

  6. ¿Qué método se utiliza para asignar un modelo a una vista?
    El método setModel() del objeto de vista.

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


 

Escanear / Compartir

 

 


Sobre el autor

Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP SemiSenior

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

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "Los conceptos de enlace de datos en SAPUI5" de la mano de nuestros alumnos.

SAP Junior

Los Conceptos de enlace de datos en SAPUI5 El data binding o enlace de datos Es uno de los conceptos más importantes y útiles en SAPUI5. Consiste en la capacidad de vincular datos de un modelo con las propiedades de los controles de la interfaz de usuario, permitiendo que los valores se asignen y actualicen de forma dinámica sin necesidad de escribir mucho código. Básicamente, se relaciona el nombre de una propiedad del modelo con una propiedad de un control SAPUI5, y el framework se encarga de mantener esa relación. Gracias a esto, un uso eficiente del binding reduce significativamente la cantidad de código que se debe escribir en una aplicación. SAPUI5 admite cuatro tipos de modelos...

Acceder a esta publicación

Creado y Compartido por: Candela Analia Nuñez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

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

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

En concepto de data binding: Data Binding es el mecanismo que permite enlazar los datos del modelo con los controles de la interfaz de usuario (UI), de forma que cualquier cambio en los datos se refleje automáticamente en la vista, y viceversa (en algunos casos). Es como un "puente" entre el modelo (datos) y la vista (lo que el usuario ve). Modelo JSON Modelo XML Modelo de recursos Modelo Odata Tipos de binding Tipo de Binding Dirección Descripción One-Way Binding Modelo → Vista Los datos fluyen desde el modelo hacia la UI. Si cambian los datos del modelo,...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. EL CONCEPTO DE DATA BINDING NOS PERMITE AUTOMATIZAR EL MOVIMIENTO DE DATOS DE LA VISTA AL MODELO Y VECEVERSA. coniste en la capacidad de enlazar datos de un modelo A VALORE O PROPIEDADES DE CONTROLES SAPUI5 BENEFICIA EN QUE NO NECESITAMOS ESCRIBIR CODIGO EXPLICITAMENTE PARA DICHO CRUD SAPUI5 adminte 4 modelos de binding modelo JSON modelo XML modelo de recursos modelo OData independientemente, los pasos para el binding son los mismos definicion de datos crear una instancia del modelo de enlace de datos Vincular un modelo al control de la interfaz de usuario 1.1 LOS TIPOS DE BINDING One-way binding: los cambio en el modelo se transportan a la UI vinculada a los controles, Y NO EN VICEVERSA....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Como sabemos los datos de una aplicación de SAP GUI 5 siempre existen en un modelo en escenario de visualización debemos configurar los datos de este modelo en los controles de SAP GUI 5 para mostrar los datos al usuario por ejemplo al mostrar una lista de órdenes de compra en la tabla SAP GUI 5 el escenario de actualización los datos de interfaz de usuario deben almacenarse en el modelo para actualizar la base de datos en el servidor en el lugar de escribir código explícitamente en realizar estas transferencia de datos el enlace de datos proporciona varias formas de automatizarlas El enlace de elementos se usa se usa generalmente en escenarios maestro detalles la lista maestra esta generalmente vinculada...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


1 | The Concept of Data Binding Benefits of Binding Data binding is a fundamental technique in SAPUI5 that allows linking model data to UI controls. Efficient use of this technique can significantly reduce the amount of code needed in a SAPUI5 application, simplifying development and maintenance. Types of Binding There are several types of binding modes in SAPUI5 to handle different scenarios: One-way binding Changes in the model are reflected in the UI, but changes made in the UI do not affect the model. Example: Updating the price of a product in the model automatically displays the new price in the UI. Two-way binding Ensures that both the model and the UI are always synchronized. Any change...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

El concepto de data binding El data binding o enlace de datos en SAPUI5 permite automatizar el movimiento de datos entre la vista y el modelo. Se pueden enlazar valores o propiedades de controles SAPUI5 con los datos del modelo, reduciendo la cantidad de código necesario. SAPUI5 admite cuatro modelos de binding: JSON, XML, modelo de recursos y OData. El proceso de data binding implica la definición de datos, la creación de una instancia del modelo de enlace de datos y la vinculación del modelo al control de la interfaz de usuario. Existen tres tipos de modos de enlace: one-way binding, two-way binding y one-time binding. El enlace de agregación se utiliza para crear controles secundarios automáticamente...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Binding de Datos El binding o enlace a datos es una de las facetas más importantes en SAPUI5. Permite presentar en la capa de interfaz del usuario los datos del backend. A traves del binding se lleva a la practica el concepto de MVC (Modelo Vista Controlador) permitiendo conectar el Modelo con la Vista en forma directa. Existen distintos tipos de modelos orientados a lograr paginas mas performantes: One-way (unicamente los cambios en el modelo impactan en los controles) Two-ways (los cambios en el modelo impactan en controles y viceversa) One-Time (solo se pasan una vez del modelo a controles. datos de poca variabilidad como titulos) A su vez hay 4 modelos de binding: Modelo JSON, XML, de recursos y ODATA. ObjectListltem: control con...

Acceder a esta publicación

Creado y Compartido por: Cristian Cash

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

setear el modelo a la vista concepto de data binding el uso eficiente del binding puede reducir la cantidad de código que escribimos en una aplicación de SAPUI5 Modelo JSON Modelo XML modelo de recursos modelo de ODATA one-way binding two-way binding one-time binding aggregation binding enlazar la colección enlazar cada propiedad fullname this.getview().byid("Nombre").setValue(oFirstName) oModel.getProperty("/LastName") this.getView().byId("Nombre").getValue(oFirstName) control objectlistitem tecnica de vinculación de elementos los filtros ordenar y agrupar los datos herencia del modelo el nombre del modelo el modelo de recurso

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Enlace de Datos en SAPUI5 El uso eficiente del Binding Puede reducir significativamente la cantidad de código que estamos escribiendo en una aplicación SAPUI5S SAPUI5 admite cuatro modelos de binding Modelo JSON Modelo XML Modelo de recursos Modelo ODATA Independiente de modelo que utilicemos el principio de vinculación de datos es siempre el mismo. Definición de Datos Crear una instancia del modelo de enlace de datos Vincular un modelo al control de la interfaz Hay tres tipos de formas de enlace One-way Binding Two-way Binding One Time Binding Agregación Binding Se utiliza para crear controles secundarios automáticamente según los datos del...

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

 


 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 


 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!