Los formularios y el envío de datos al backend
1. Introducción
Los formularios son elementos fundamentales en las aplicaciones SAPUI5, ya que permiten a los usuarios ingresar, modificar y enviar datos hacia el backend SAP mediante servicios OData.
Estos formularios son comunes en aplicaciones Fiori transaccionales, donde se requiere capturar información del usuario (por ejemplo, crear pedidos, clientes o registrar incidencias).
SAPUI5 ofrece una estructura flexible y modular para construir formularios dinámicos que se integran fácilmente con los modelos de datos y con los servicios OData del SAP Gateway.
2. Estructura de un formulario en SAPUI5
El control base para formularios es sap.ui.layout.form.SimpleForm, que permite agrupar etiquetas y campos de entrada de forma ordenada.
Ejemplo básico:
<SimpleForm id="formCliente" editable="true" layout="ResponsiveGridLayout"> <Label text="Nombre" /> <Input value="{/Name}" /> <Label text="Correo electrónico" /> <Input value="{/Email}" /> <Label text="País" /> <Input value="{/Country}" /> </SimpleForm>
📘 Explicación:
-
Label define el texto descriptivo del campo.
-
Input vincula el valor al modelo mediante data binding.
-
layout="ResponsiveGridLayout" adapta la presentación a distintos tamaños de pantalla.
3. Modelos y binding de datos
El formulario utiliza un modelo (OData o JSON) para leer y escribir los datos que se mostrarán o enviarán al backend.
a) Binding bidireccional (TwoWay)
Permite que los cambios realizados por el usuario se reflejen automáticamente en el modelo.
"models": { "": { "dataSource": "mainService", "settings": { "defaultBindingMode": "TwoWay" } } }
💡 Ventaja: no es necesario capturar manualmente los valores antes de enviarlos al backend.
4. Envío de datos al backend (método create)
El método create() del modelo OData permite enviar los datos ingresados en el formulario al servicio OData en el backend.
Ejemplo:
onGuardar: function () { var oModel = this.getView().getModel(); var oNuevoCliente = { Name: this.byId("inputName").getValue(), Email: this.byId("inputEmail").getValue(), Country: this.byId("inputCountry").getValue() }; oModel.create("/CustomerSet", oNuevoCliente, { success: function () { MessageToast.show("Cliente creado exitosamente."); }, error: function (oError) { MessageBox.error("Error al guardar los datos."); } }); }
📘 Explicación:
-
create() realiza una llamada HTTP POST al endpoint del servicio OData.
-
El objeto oNuevoCliente contiene los valores capturados del formulario.
-
En caso de éxito, se muestra un mensaje confirmando la creación.
5. Actualización de datos (método update)
Para modificar registros existentes, se utiliza el método update(), que envía una petición HTTP PUT/PATCH.
var sPath = "/CustomerSet('0001')"; oModel.update(sPath, oClienteActualizado, { success: function () { MessageToast.show("Datos actualizados correctamente."); }, error: function () { MessageBox.error("No se pudo actualizar el registro."); } });
💡 Nota:
El parámetro sPath indica la clave del registro que se actualizará en el servicio OData.
6. Eliminación de datos (método remove)
var sPath = "/CustomerSet('0001')"; oModel.remove(sPath, { success: function () { MessageToast.show("Registro eliminado."); }, error: function () { MessageBox.error("Error al eliminar el registro."); } });
📘 Explicación:
remove() ejecuta una operación DELETE en el backend para eliminar un registro específico.
7. Validaciones antes del envío
Antes de enviar los datos al backend, es importante realizar validaciones locales en el controlador:
if (!this.byId("inputName").getValue()) { MessageBox.warning("Debe ingresar el nombre del cliente."); return; }
💡 Esto evita solicitudes innecesarias y asegura que el usuario complete todos los campos requeridos.
8. Mensajes de confirmación y manejo de errores
Los métodos OData (create, update, remove) incluyen callbacks para manejar el resultado de la operación:
SAPUI5 recomienda usar:
9. Buenas prácticas
-
Validar campos obligatorios en frontend antes de enviar.
-
Utilizar binding TwoWay para sincronizar datos automáticamente.
-
Definir los modelos y endpoints en el manifest.json.
-
Evitar múltiples llamadas consecutivas (usar promesas o async/await si es necesario).
-
Manejar todos los errores de comunicación con MessageBox.error().
-
En formularios grandes, utilizar SimpleForm o SmartForm para mantener la legibilidad.
-
Asegurarse de que el servicio OData tenga los permisos correctos en /IWFND/MAINT_SERVICE.
10. Conclusión
El manejo de formularios y el envío de datos al backend son pilares del desarrollo SAP Fiori.
Gracias a los métodos del modelo OData (create, update, remove), las aplicaciones SAPUI5 pueden interactuar directamente con los datos del sistema SAP de forma segura, controlada y eficiente.
La combinación de formularios bien estructurados, binding bidireccional y validaciones robustas asegura aplicaciones estables y alineadas con los estándares de SAP UX.
Preguntas de repaso
-
¿Qué control SAPUI5 se utiliza para crear formularios de entrada de datos?
→ sap.ui.layout.form.SimpleForm
-
¿Qué método del modelo OData se usa para enviar nuevos registros al backend?
→ create()
-
¿Qué método se utiliza para actualizar datos existentes en el backend?
→ update()
-
¿Qué tipo de operación HTTP ejecuta el método remove()?
→ Una operación DELETE
-
¿Qué tipo de binding se utiliza para sincronizar automáticamente la vista y el modelo?
→ TwoWay binding