✒️SAP BTPFIORI / El formateo de los campos Por Jose Baz Suarez

Selector Alummnos / Empresas

SAP BTPFIORI El formateo de los campos

SAP BTPFIORI El formateo de los camposEl 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

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

  2. ¿Qué archivo se utiliza comúnmente para agrupar funciones de formateo personalizadas?
    El archivo formatter.js.

  3. ¿Qué namespace utiliza SAPUI5 para los formateadores integrados?
    sap.ui.core.format.

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

  5. Menciona una buena práctica al implementar formatters.
    Centralizar los formatters en un único archivo y mantenerlos reutilizables.

 

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

🎓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 "El formateo de los campos" de la mano de nuestros alumnos.

SAP SemiSenior

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

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

El formateo de los campos: refiere a cómo los valores de datos (fechas, números, montos, textos, booleanos, etc.) se presentan visualmente al usuario en la interfaz de la aplicación Fiori, normalmente construida con SAPUI5. El formateo usando tipos de datos Fecha Flotante Moneda Booleano El formatero de medida: Es el proceso de mostrar correctamente un valor numérico acompañado de su unidad de medida. El enlace de expresion: Es una técnica en SAPUI5 que permite usar expresiones lógicas o aritméticas directamente en el binding del XML

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

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

1. TRABAJANDO CON EXPRESIONES Y FORMATEADORES DE DATOS Algunas veces vamos a necestiar mostrar los datos de una forma diferente a la que nos devuelve el servicio OData. 2. EL FORMATEO USANDO TIPO DE DATOS SAPUI5 proporciona 4 tipos de datos que se puede utilizar para influir en el formato de datos de una pantalla: fecha flotante moneda booleano Ejemplo formateo fecha en la vista value="{path:'/FdN', type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'MM/dd/yyyy' }}" 3. EL FORMATEO A MEDIDA Los formateadores son funciones JS especificadas en las vistas de SAPUI5 junto con el enlace e implementadas en un controlador o en un archivo JS de formateador dedicado PARA ALMACENAR TODAS LAS FUNCIONES DEL FORMATEADOR....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

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

SAP Expert


Los formatedores se utilizan para definir el formato de los datos en la interfaz de usuario mientras que los tipos de datos funcionan en ambas direcciones formatean los datos de la interfaz de usuario y la analizan y validan la entrada del usuario que se ingresa, podemos utilizar formateadores y tipos de datos estándar o definir sus propios objetos personalizados, SAP GUI 5 proporciona clases de formateador estándar que se pueden utilizar para definir tipos de datos personalizados y formateadores personalizados. Mediante space for banding podemos calcular los valores directamente en la vista de una forma sencilla evitando que tengamos que crear un formatter por ejemplo si queremos cambiar el texto del elemento dependiendo de su...

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 | Working with Expressions and Data Formatters When we link a property from a model to an SAPUI5 control, we might need to format the incoming data to display it differently on the screen. Data formatting can include date and number formatting. These techniques allow us to link values (e.g., amount and currency) or display a completely different dataset based on predefined data. For instance, in an SAPUI5 application, data is typically consumed from an SAP system. These transactional applications provide a refreshed look along with standard or customized functionality and can rewrite data back to the SAP system. Hence, the OData services used in the application are created in NetWeaver with SAP ABAP as the main programming language. Similarly,...

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 formateo de los campos en SAPUI5 En SAPUI5, el formateo de campos es una práctica esencial para presentar datos de manera legible y comprensible en la interfaz de usuario. Se puede lograr mediante la aplicación de formateadores en las vistas XML o en funciones específicas en el controlador. En las vistas XML, las expresiones de enlace (binding) junto con formateadores permiten ajustar la apariencia de los datos directamente en la definición de la vista. Por ejemplo, puedes formatear un valor monetario para que se muestre con el formato correcto, como separadores de miles y decimales. Por otro lado, en el controlador, puedes realizar el formateo antes de asignar valores a los controles de la vista. Esto proporciona...

Acceder a esta publicación

Creado y Compartido por: Claudio Marcelo Hermann / Disponibilidad Laboral: FullTime

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

SAP Senior

formateadores de datos formatter vistas ABAP CDS expuestas como OData fecha flotante moneda booleano new Date showMeasure el enlace de expresión escape parts clase de formateador standard uso de formateadores en la vista ${products>UnitInStock} > 50 ? 'Success' : 'Error' showMeasure para mostrar la moneda

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

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

SAP Senior

los formateadores son tecnicas que se utilizan para modificar el modo en que se presentan los datos del modelo en UI. El enlace de un modelo se puede mostrar en diferentes formatos en la interfaz usuario los formateadores son funciones javaScript especificadas en las vistas SAPUI5 Se recomienda tener los archivos formateadores en la carpeta model, dentro del formateador se usa el sap.ui.define para definir lo que devolvemos El enlace de Expresion las tecnicas de enlace de expresion nos permiten escribir logica simple dentro de la vista en si misma si necesidad de formateadoroes escribir funciones de formateador puede ser una sobrecarga para casos simples y en su lugar se puede usar el enlace de expresion

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!