El formateo de los campos
1. Introducción
El formateo de campos en SAPUI5 permite controlar la forma en que se muestran los datos en la interfaz de usuario, adaptándolos a distintos formatos (monedas, fechas, cantidades, textos, etc.).
Este proceso no modifica los datos originales del modelo, solo su representación visual, mejorando la legibilidad y la experiencia del usuario en las aplicaciones SAP Fiori.
2. Concepto de formateo
El formateo consiste en aplicar una transformación al valor de un campo antes de mostrarlo en pantalla.
SAPUI5 permite hacerlo de dos formas principales:
-
Mediante funciones de formateo personalizadas (definidas por el desarrollador).
-
Utilizando formatters integrados del framework (por ejemplo, para fechas, monedas o números).
3. Uso de formatters personalizados
Un formatter es una función JavaScript que recibe un valor del modelo y devuelve el texto formateado que se mostrará en la vista.
Ejemplo:
Archivo formatter.js:
sap.ui.define([], function() { "use strict"; return { formatearMoneda: function(valor) { return parseFloat(valor).toFixed(2) + " USD"; }, formatearMayusculas: function(texto) { return texto ? texto.toUpperCase() : ""; } }; });
Enlazando el formatter en la vista XML:
<Text text="{path: 'precio', formatter: '.formatter.formatearMoneda'}" /> <Text text="{path: 'nombre', formatter: '.formatter.formatearMayusculas'}" />
Resultado:
El campo precio se mostrará con dos decimales y la unidad, mientras que nombre aparecerá en mayúsculas.
4. Uso de formatters integrados
SAPUI5 incluye utilidades dentro del espacio de nombres sap.ui.core.format que permiten aplicar formateos comunes sin crear funciones propias:
Tipo de dato
Clase de formateo
Ejemplo de uso
| Fechas |
sap.ui.core.format.DateFormat |
Formatear fecha a “dd/MM/yyyy” |
| Números |
sap.ui.core.format.NumberFormat |
Mostrar separadores y decimales |
| Monedas |
sap.ui.core.format.CurrencyFormat |
Añadir símbolo monetario |
| Texto |
sap.ui.core.format.ListFormat |
Unir valores de una lista con formato |
Ejemplo:
var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern: "dd/MM/yyyy"}); var sFecha = oDateFormat.format(new Date());
5. Integración con modelos y enlaces de datos
El formateo puede aplicarse directamente en el data binding de los controles SAPUI5.
Ejemplo:
<ObjectNumber number="{path: 'importe', formatter: '.formatter.formatearMoneda'}" />
También se puede combinar con expresiones de binding para transformar valores sin definir un formatter externo:
<Text text="{= ${cantidad} > 0 ? 'Disponible' : 'Sin stock'}" />
6. Buenas prácticas
-
Mantener los formatters en un archivo separado (formatter.js) para centralizar su mantenimiento.
-
Evitar lógica compleja en los bindings; usar funciones simples.
-
Reutilizar formatters en distintas vistas para mantener coherencia.
-
Nombrar claramente las funciones para reflejar su propósito (ej. formatearFechaCorta, formatearMonedaUYU).
-
Asegurarse de que el formato respete el idioma y configuración regional del usuario (i18n).
7. Conclusión
El formateo de campos en SAPUI5 es una herramienta clave para presentar los datos de forma clara, profesional y coherente con el diseño Fiori.
Permite adaptar la visualización sin alterar los datos reales, garantizando una mejor experiencia de usuario y un código más organizado.
Preguntas de repaso
-
¿Cuál es el objetivo principal del formateo en SAPUI5?
Adaptar la visualización de los datos sin modificar su valor real en el modelo.
-
¿Qué archivo se utiliza comúnmente para agrupar funciones de formateo personalizadas?
El archivo formatter.js.
-
¿Qué namespace utiliza SAPUI5 para los formateadores integrados?
sap.ui.core.format.
-
¿Qué diferencia hay entre un formatter y un binding expression?
El formatter se define como función externa; el binding expression se evalúa directamente en el XML.
-
Menciona una buena práctica al implementar formatters.
Centralizar los formatters en un único archivo y mantenerlos reutilizables.