Resumen

Este artículo detalla los pasos necesarios para construir una aplicación de tipo catálogo utilizando el Modelo de Programación Flexible (FPM). Asimismo, se describe cómo FPM combina los Floorplans de SAP Fiori Elements con la programación de estilo libre (SAPUI5) para lograr una mayor personalización de las plantillas estándar. Finalmente, se explican los principios básicos para trabajar con CSS, herramienta que resulta fundamental para cambiar la vista @UI.LineItem por un catálogo de productos y habilitar muchas otras funcionalidades, como por ejemplo, arrastrar y soltar (Drag and Drop).

Palabras clave

• SAP Fiori
• Flexible Programming Model (FPM)
• SAP Business Application Studio
• SAP Business Technology Platform (BTP)
• OData V4
• Catálogo de Productos

Introducción

En la búsqueda constante por mejorar la experiencia de usuario, los desarrolladores de SAP se enfrentan al desafío de crear aplicaciones que sean, a la vez, robustas, estándar y altamente personalizables. Precisamente por esta razón, el Modelo de Programación Flexible (FPM) surge como una respuesta a esta necesidad actual de muchas empresas, ya que permite una fusión sin precedentes entre el desarrollo rápido basado en plantillas y la libertad de la programación freestyle.

Arquitectura y componentes

• Flexible Programming Model: se basa en utilizar componentes de alto nivel para la estructura principal de la aplicación, mientras que, de forma paralela, se inyecta código personalizado para lograr una experiencia de usuario única.
• SAP Business Application Studio: es el entorno de desarrollo (IDE) donde se estructura y construye todo el proyecto.
• Servicios OData: actúan como el puente de comunicación que expone las entidades y metadatos del backend, con el fin de que la aplicación Fiori los consuma.
• Annotations (Anotaciones): se utilizan para complementar el metadatos en la interfaz, controlando la visualización y el comportamiento de campos y tablas de manera declarativa.
• Componentes de la Interfaz (UI): la aplicación se construye combinando contenedores de Fiori, tales como la DynamicPage, con elementos personalizados para mostrar los productos.

Construcción del Catálogo de Productos (Paso a Paso)

El corazón de la aplicación es la visualización de los productos. Esto se logra mediante una combinación de controles de UI5 y estilos CSS personalizados.

Creación de la Cuadrícula de Productos

Se utiliza un sap.f.GridContainer para organizar las tarjetas de productos dentro de un diseño de cuadrícula responsivo. Posteriormente, este contenedor se enlaza a la colección de productos expuesta por el servicio OData.

Diseño de la Tarjeta de Producto (Product Card)

Cada producto se renderiza como un CustomListItem para hacerlo interactivo. Dentro, una estructura de VBox con clases CSS personalizadas define la apariencia visual, dividida en imagen, contenido (título, descripción) y pie de página (precio).

Implementación del Filtrado

Se inserta una sap.fe.macros.FilterBar en la cabecera de la página. Este componente genera los campos de filtro automáticamente y su evento search se conecta a una función en el controlador para aplicar la lógica de filtrado sobre la cuadrícula de productos.

Navegación y Funcionalidad Avanzada

Se maneja el evento press de cada tarjeta para navegar a una página de detalles del producto mediante el enrutador de la aplicación. Adicionalmente, se puede implementar funcionalidad avanzada como arrastrar y soltar (Drag and Drop) para que los usuarios reordenen los productos visualmente, configurando DragInfo y GridDropInfo en el GridContainer.

Conclusión

En definitiva, el Modelo de Programación Flexible es un nuevo paradigma de programación que combina las plantillas estándar de SAP Fiori Elements con los componentes de SAPUI5. Todo esto con la finalidad de poder personalizar y construir aplicaciones empresariales que no solo sean funcionales y robustas, sino también visualmente atractivas y altamente interactivas, sirviendo, por lo tanto, como un modelo de referencia para la modernización de aplicaciones SAP.
Fuentes y Recursos Adicionales

Fuente Principal del Contenido:

Webinar de Logali Group: la información específica, la estructura y el código de este ejemplo provienen del webinar “Construye un catálogo de productos con Flexible Programming Model – SAP FIORI”, organizado por la consultora Logali Group.

Video tomado de la grabación del webinar, disponible en YouTube: https://youtube.com/live/yenVMcDEKtM.

Documentación técnica y oficial de SAP: SAP Community Network (SCN): es el blog oficial de la comunidad SAP, ideal para encontrar tutoriales y ejemplos de otros desarrolladores sobre FPM y Fiori.

SAP Help Portal: contiene la documentación técnica oficial de SAP sobre el Flexible Programming Model, Fiori Elements y SAP BTP.

Documentación de SAPUI5: el sitio web ui5.sap.com ofrece la documentación detallada y ejemplos interactivos de cada control de la interfaz de usuario, como sap.f.GridContainer o sap.f.DynamicPage.