SAP Fiori Elements
SAP Fiori elements es un framework de SAPUI5 que genera aplicaciones SAP Fiori a partir de los metadatos del servicio OData, las anotaciones de UI y un app descriptor, usando floorplans predefinidos como el list report y la object page en lugar de vistas y controladores escritos a mano. SAP Fiori elements renuncia a libertad de diseño a cambio de un diseño coherente, funciones empresariales integradas y menos código de UI que mantener.
Datos clave
- Tipo
- Framework de UI basado en metadatos, construido sobre SAPUI5
- Capa
- Aplicaciones de UI
- Entradas
- Servicio OData V2 o V4, anotaciones de UI (CDS o XML), ajustes de manifest.json
- Floorplans
- List report, object page, worklist, analytical list page, overview page
- Back-ends típicos
- Servicios RAP en ABAP, servicios CAP en SAP BTP
- Quién trabaja con ello
- Desarrolladores SAP Fiori, desarrolladores ABAP y CAP, diseñadores UX
- Se aplica a
- SAP S/4HANA (todas las ediciones), SAP BTP
Capa: Aplicaciones de UIDónde se ubica ▾
Capa: Aplicaciones de UI
Abrir el mapa de arquitectura →¿Cómo funciona SAP Fiori elements?
SAP Fiori elements traslada las decisiones de UI del código a los metadatos:
- Un servicio OData expone las entidades de negocio, por ejemplo los pedidos de compra y sus posiciones.
- Las anotaciones describen cómo debe presentarlas la UI: UI.SelectionFields para los campos de filtro, UI.LineItem para las columnas de tabla, UI.HeaderInfo para los títulos de objeto, UI.Facets para las secciones de la object page.
- El app descriptor (manifest.json) selecciona una plantilla de floorplan para cada página y define opciones como la carga inicial o la edición masiva.
- En tiempo de ejecución, el framework lee los metadatos, las anotaciones y el descriptor y construye las páginas, incluidos la barra de filtros, las variantes, las tablas, los formularios, los mensajes y la navegación.
- Cuando la página generada no basta, los desarrolladores añaden extensiones en lugar de reescribir la página.
Por tanto, el trabajo principal del desarrollador está en el servicio y sus anotaciones, no en JavaScript. SAP Fiori elements convierte un servicio bien anotado en una aplicación que funciona, y uno mal anotado en una aplicación deficiente.
¿Qué floorplans ofrece SAP Fiori elements?
| Floorplan | Finalidad | OData V2 | OData V4 |
|---|---|---|---|
| List report | Buscar, filtrar y actuar sobre muchos objetos | Floorplan | Floorplan |
| Object page | Mostrar, editar y crear un objeto | Floorplan | Floorplan |
| Worklist | Procesar un conjunto conocido de elementos sin filtrado complejo | Floorplan propio | Configuración del list report |
| Analytical list page | Analizar con gráficos y actuar sobre los elementos | Floorplan propio | Configuración del list report |
| Overview page | Cards que resumen un dominio | Floorplan | Floorplan |
OData V4 añade building blocks y custom pages, de modo que los desarrolladores pueden combinar elementos estándar con su propio código SAPUI5 dentro de la misma aplicación. El list report combinado con la object page es la combinación clásica, a menudo abreviada como LROP. En SAP Fiori elements, elegir un floorplan significa elegir un patrón de interacción, no una plantilla visual.
¿OData V2 o V4: cuál conviene usar con SAP Fiori elements?
SAP recomienda SAP Fiori elements para OData V4 en las nuevas aplicaciones e indica que la variante para OData V2 sigue teniendo soporte completo. En la práctica, la elección depende de tres factores:
- Back-end: los service bindings de RAP pueden publicar un servicio de UI como OData V2 o V4, y CAP sirve OData V4 de forma predeterminada. Los servicios creados en SEGW suelen ser OData V2.
- Necesidades de extensión: los building blocks y el flexible programming model solo están disponibles con OData V4.
- Aplicaciones existentes: una aplicación que funciona en V2 no necesita migración para seguir funcionando; los ajustes de configuración difieren entre ambas, por ejemplo initialLoad en V4 frente a loadDataOnAppLaunch en V2.
Para una nueva aplicación personalizada sobre un back-end actual de SAP S/4HANA o SAP BTP, OData V4 es la opción predeterminada en SAP Fiori elements, y V2 es la opción pragmática cuando el servicio ya existe.
¿Cuándo conviene usar SAP Fiori elements en lugar de SAPUI5 freestyle?
SAP Fiori elements encaja cuando la tarea sigue un patrón estándar: buscar en una lista, abrir un objeto, editarlo, ejecutar acciones. El framework proporciona barras de filtros, gestión de variantes, tablas, drafts, mensajes, accesibilidad y soporte de traducción sin código personalizado, y SAP mantiene esas funciones actualizadas en las distintas releases de SAPUI5.
SAPUI5 freestyle encaja cuando la propia interacción es poco habitual: un tablero de planificación, un flujo guiado de escaneo, un diseño muy visual o datos de fuentes que no son OData. El código freestyle da control total y también la responsabilidad total del mantenimiento.
Las propias directrices de SAP tratan ambos enfoques como combinables y no excluyentes: empezar con SAP Fiori elements, usar building blocks y escribir código freestyle solo para las carencias. Una prueba útil para decidir es si las partes interesadas pueden aceptar el diseño del floorplan al menos para las pantallas principales. SAP Fiori elements es la mejor opción siempre que el requisito sea un business object y no una interacción a medida.
¿Cómo se extiende una aplicación SAP Fiori elements?
Las opciones de extensión dependen de quién es el propietario de la aplicación:
- Su propia aplicación: los puntos de extensión permiten a los desarrolladores añadir columnas, acciones, secciones, facets de cabecera y filtros personalizados; con OData V4, el flexible programming model añade building blocks y custom pages.
- Una aplicación entregada por SAP: los adaptation projects, creados con SAP Fiori tools, modifican o amplían la aplicación sin modificar el código de SAP; la adaptación key user permite a los key users reorganizar u ocultar campos en tiempo de ejecución.
- El lado de los datos: un campo nuevo suele empezar en el servicio y sus anotaciones, no en la UI.
La disponibilidad varía según la edición: en SAP S/4HANA Cloud Public Edition, compruebe cuáles de estas vías admite SAP para la aplicación en cuestión. Cada extensión de una aplicación SAP Fiori elements se convierte en código o configuración que alguien debe mantener a lo largo de las actualizaciones.
¿Cuáles son los errores más comunes con SAP Fiori elements?
- Luchar contra el floorplan. Grandes cantidades de código personalizado para forzar un diseño no estándar anulan la ventaja de mantenimiento; llegados a ese punto, SAPUI5 freestyle suele ser más honesto.
- Tratarlo como no-code. Las anotaciones son código en otra forma; necesitan revisión, control de versiones y pruebas.
- Ignorar la gestión de draft. Los escenarios de edición sin un servicio habilitado para draft pierden el comportamiento de reanudación, bloqueo y validación que los usuarios esperan.
- No revisar los valores predeterminados. La carga inicial, la edición masiva y los tipos de tabla tienen valores predeterminados que pueden cargar demasiados datos o demasiado pocos; defínalos de forma deliberada.
- Anotar en dos sitios. Las anotaciones pueden estar en el CDS del back-end y en archivos de anotaciones locales; los archivos locales prevalecen sobre los metadatos del servicio, y gana el último archivo listado en manifest.json, por lo que los duplicados hacen que el comportamiento sea difícil de rastrear.
La mayoría de los problemas de SAP Fiori elements son problemas de diseño del servicio y de las anotaciones que solo se hacen visibles en la UI.
¿En qué se diferencian SAP Fiori elements, SAPUI5 freestyle y SAPUI5?
| SAP Fiori elements | Aplicación SAPUI5 freestyle | SAPUI5 | |
|---|---|---|---|
| Qué es | Framework que genera páginas a partir de metadatos | Aplicación con vistas y controladores escritos a mano | El framework de UI sobre el que se construyen ambos |
| Qué escriben los desarrolladores | Anotaciones, ajustes del descriptor, extensiones | JavaScript o TypeScript, vistas XML | No aplica; es la biblioteca |
| Libertad de diseño | Limitada a los floorplans y las extensiones | Total | Total |
| Mantenimiento | Funciones del framework actualizadas por SAP | A cargo exclusivamente del equipo de la aplicación | Biblioteca versionada mantenida por SAP |
SAPUI5 es el toolkit; SAP Fiori elements y SAPUI5 freestyle son dos formas de construir aplicaciones con él.
Preguntas frecuentes
¿SAP Fiori elements es lo mismo que SAPUI5?
No. SAPUI5 es el framework de UI en JavaScript. SAP Fiori elements está construido sobre SAPUI5 y genera páginas completas a partir de los metadatos y las anotaciones OData, de modo que los desarrolladores configuran floorplans en lugar de escribir vistas y controladores. Ambos se ejecutan en el mismo runtime de SAPUI5.
¿SAP Fiori elements requiere OData?
Sí. SAP Fiori elements lee los metadatos del servicio y las anotaciones de un servicio OData V2 u OData V4 para construir sus páginas. Los datos de otros protocolos deben exponerse primero como OData, o la aplicación debe usar SAPUI5 freestyle para esa parte.
¿Qué eran las smart templates?
Smart templates es el nombre anterior de SAP Fiori elements. La documentación de SAP de releases anteriores todavía usa el término, y los profesionales también lo usan de vez en cuando, pero se refiere al mismo framework basado en anotaciones.
¿Puedo añadir código personalizado a una aplicación SAP Fiori elements?
Sí. Los puntos de extensión permiten columnas, acciones, secciones y filtros personalizados, y SAP Fiori elements para OData V4 añade building blocks y custom pages. Cuanto más código personalizado contiene una aplicación, más se comporta como una aplicación freestyle en cuanto a mantenimiento.
¿Qué herramientas se usan para crear aplicaciones SAP Fiori elements?
SAP Fiori tools, un conjunto de extensiones para SAP Business Application Studio y Visual Studio Code, genera aplicaciones SAP Fiori elements, edita las anotaciones y el descriptor, y visualiza la navegación entre páginas. El servicio de back-end suele construirse con RAP o CAP.
Fuentes
- SAPUI5 SDK: Developing Apps with SAP Fiori Elements
- SAPUI5 SDK: Standard Floorplans (SAP Fiori elements for OData V4)
- SAPUI5 SDK: Using SAP Fiori Elements Floorplans (OData V2)
- SAPUI5 SDK: Developing Apps with Modern Concepts — Guidance for Developers
- SAP Help Portal: Service Binding (ABAP RESTful Application Programming Model)
- Se aplica a
- SAP S/4HANA on-premise · SAP S/4HANA Cloud Private Edition · SAP S/4HANA Cloud Public Edition · SAP BTP
- Última revisión