Fiori List Report Page – Creación de puntos extensión con Flexible Programming Model

Resumen

Este webinar, presentado por Jorge Briseño de Logali Group, introduce el Flexible Programming Model (FPM) como una solución para extender las capacidades de las páginas Fiori List Report y otras plantillas estándar de Fiori Elements. Se aborda cómo FPM permite superar las limitaciones de las plantillas estándar mediante el uso de Puntos de Extensión, Bloques de Construcción y Extensiones de Controladores, requiriendo servicios OData V4. La sesión incluye una demostración práctica utilizando un proyecto Cloud Application Programming Model (CAP), donde se reemplaza una tabla de citas estándar por un control SAPUI5 personalizado (PlanningCalendar) dentro de una Custom Page. Adicionalmente, se presenta el Master en SAP Fiori Elements y Flexible Programming Model ofrecido por Logali Group, detallando su contenido, promociones y un sorteo. El objetivo es mostrar cómo combinar la eficiencia de Fiori Elements con la personalización avanzada de SAPUI5 mediante FPM.

Puedes ver la clase gratuita sobre este tema en nuestro canal de YouTube, donde podrás escuchar al docente hablar sobre este tema y las explicaciones que tiene para darte. Ver video aquí.

Índice

1. Introducción al Webinar y Flexible Programming Model
2. Fundamentos de Flexible Programming Model (FPM)
   2.1. Requisito Clave: Servicio OData V4
   2.2. Conceptos Fundamentales de FPM
   2.3. Contexto: Plantillas SAP Fiori Elements y sus Limitaciones
   2.4. El Objetivo: Combinar Fiori Elements y SAPUI5
3. Demostración Práctica con FPM y CAP
   3.1. Contexto del Servicio (Cloud Application Programming Model)
   3.2. Identificación del Requerimiento de Personalización
   3.3. La Solución: Integración de Controles SAPUI5 Personalizados
   3.4. Pasos de Implementación de la Extensión
   3.4.1. Creación de una Custom Page
   3.4.2. Estructura Base con DynamicPage
   3.4.3. Incorporación de Filtros y Tabla Estándar mediante Macros
   3.4.4. Configuración de Navegación a Object Page
   3.4.5. Uso de Puntos de Extensión: Añadir una Sección Personalizada (Custom Section)
   3.4.6. Integración del Control PlanningCalendar
   3.4.7. Ocultación del Elemento Estándar (Tabla)
   3.5. Resultado de la Demostración
4. Presentación del Master en SAP Fiori Elements y Flexible Programming Model
   4.1. Contenido Detallado del Master Course
   4.2. Detalles Logísticos y Promociones

Conceptos Clave

• Flexible Programming Model (FPM)
• SAP Fiori Elements
• Plantillas Fiori Elements (List Report Page, Object Page, Custom Page)
• Puntos de Extensión (Extension Points)
• Bloques de Construcción (Building Blocks)
• Extensiones de Controladores (Controller Extensions)
• Cloud Application Programming Model (CAP)
• ABAP RESTful Application Programming Model (RAP)
• OData V4
• Anotaciones (CDS Annotations, XML Annotations)
• SAPUI5
• Macros (sap.fe.macros)
• PlanningCalendar (Control SAPUI5)
• DynamicPage (Control SAPUI5)
• Custom Page
• Custom Section
• Desarrollo Frontend SAP
• Personalización de aplicaciones Fiori

saphan

saphana

1. Introducción al Webinar y Flexible Programming Model

Este webinar presentado por Jorge Briseño de Logali Group se centra en la creación de puntos de extensión en páginas Fiori List Report utilizando el Flexible Programming Model (FPM). El objetivo es demostrar cómo superar las limitaciones percibidas en las plantillas estándar de SAP Fiori Elements al trabajar con modelos de programación como Cloud Application Programming Model (CAP) o ABAP RESTful Application Programming Model (RAP). Se mostrará cómo incorporar controles personalizados y ampliar funcionalidades que antes parecían intocables dentro de las plantillas Fiori Elements, combinando el comportamiento estándar con el desarrollo personalizado de SAPUI5.

saphana

2. Fundamentos de Flexible Programming Model (FPM)

2.1. Requisito Clave: Servicio OData V4

Un requisito indispensable para trabajar con Flexible Programming Model es disponer de un servicio OData versión 4. Sin esta versión del protocolo, no es posible utilizar las capacidades de FPM.

2.2. Conceptos Fundamentales de FPM

FPM opera sobre tres conceptos principales:

• Puntos de Extensión (Extension Points): Permiten incorporar elementos personalizados (secciones, acciones, columnas, diálogos, páginas completas – Custom Page) dentro de las plantillas estándar de Fiori Elements. Por ejemplo, agregar una Custom Section a un Object Page.
• Bloques de Construcción (Building Blocks): Reutilizan las anotaciones definidas en el backend (provenientes de CAP o RAP) para renderizar componentes visuales estándar (campos, formularios, tablas, filtros, gráficos) dentro de las extensiones personalizadas, utilizando la librería de Macros (sap.fe.macros). Esto evita tener que codificar estos elementos desde cero en el frontend.
• Extensiones de Controladores (Controller Extensions): Permiten añadir lógica de controlador personalizada para manipular datos (estados temporales y persistentes), gestionar navegación a páginas personalizadas, realizar validaciones complejas, etc., yendo más allá de la lógica estándar proporcionada por Fiori Elements.

2.3. Contexto: Plantillas SAP Fiori Elements y sus Limitaciones

Se revisan brevemente las plantillas estándar de SAP Fiori Elements:

• List Report Page: Muestra listas de datos con filtros.
• Object Page: Muestra los detalles de un objeto de negocio, usualmente en conjunto con List Report Page.
• Worklist Page: Similar a List Report, pero orientada a mostrar objetos por estatus o tareas pendientes.
• Analytical List Page: Combina tablas, gráficos y filtros visuales para análisis de datos.
• Overview Page: Presenta información resumida a través de tarjetas (cards).

Si bien estas plantillas aceleran el desarrollo al ser impulsadas por anotaciones, su naturaleza estándar a veces limita la personalización requerida por requerimientos específicos que van más allá de lo que las anotaciones permiten.

2.4. El Objetivo: Combinar Fiori Elements y SAPUI5

Flexible Programming Model surge como la solución para estos escenarios, permitiendo combinar la estructura y eficiencia de las plantillas Fiori Elements con la flexibilidad y potencia de los desarrollos personalizados con SAPUI5.

saphana

3. Demostración Práctica con FPM y CAP

3.1. Contexto del Servicio (Cloud Application Programming Model)

Para la demostración, se utiliza un servicio OData V4 preexistente desarrollado con Cloud Application Programming Model (CAP). Este servicio modela un escenario de gestión de terapeutas, pacientes (menores de edad con representantes legales), citas y horarios. El servicio ya incluye anotaciones CDS que definen la estructura básica de una aplicación Fiori Elements (filtros, tablas, navegación entre List Report y Object Page).

3.2. Identificación del Requerimiento de Personalización

En la aplicación Fiori Elements estándar generada a partir del servicio CAP, la gestión de citas del terapeuta se visualiza en una tabla dentro del Object Page. El requerimiento es reemplazar esta tabla por una vista de calendario/planificador más intuitiva y funcional, algo que no es posible lograr únicamente con anotaciones estándar.

3.3. La Solución: Integración de Controles SAPUI5 Personalizados

Se identifica el control sap.m.PlanningCalendar de SAPUI5 como el componente ideal para visualizar las citas en formato de calendario. FPM permitirá integrar este control SAPUI5 dentro de la estructura de la aplicación Fiori Elements.

3.4. Pasos de Implementación de la Extensión

Se detallan los pasos seguidos para realizar la personalización usando FPM:

• 3.4.1. Creación de una Custom Page: Se genera una aplicación Fiori utilizando la plantilla Custom Page, que sirve como base para el desarrollo FPM. Esta página apunta a la entidad principal (Terapeutas) del servicio OData V4.
• 3.4.2. Estructura Base con DynamicPage: Se utiliza el control sap.f.DynamicPage de SAPUI5 como contenedor principal en la vista XML de la Custom Page para replicar la estructura visual típica de Fiori Elements (cabecera con título y filtros, área de contenido).
• 3.4.3. Incorporación de Filtros y Tabla Estándar mediante Macros: Se utilizan los Bloques de Construcción (Macros) FilterBar y Table para renderizar los filtros y la tabla principal de terapeutas, aprovechando las anotaciones (SelectionFields, LineItem) ya definidas en el servicio CAP. Se establece la relación entre el FilterBar y la Table.
• 3.4.4. Configuración de Navegación a Object Page: Usando las herramientas de desarrollo (Page Map), se configura la navegación desde la tabla de terapeutas (en la Custom Page) hacia un Object Page estándar, que mostrará los detalles del terapeuta seleccionado, interpretando automáticamente las anotaciones correspondientes del servicio.
• 3.4.5. Uso de Puntos de Extensión: Añadir una Sección Personalizada (Custom Section): Dentro del Object Page estándar, se utiliza un Punto de Extensión de tipo Custom Section. Esto crea un fragmento XML independiente donde se puede añadir contenido SAPUI5 personalizado.
• 3.4.6. Integración del Control PlanningCalendar: En el fragmento XML de la Custom Section, se instancia el control sap.m.PlanningCalendar. Se configuran sus propiedades (vistas de día, semana, mes) y se realiza el binding de datos (appointments) a la asociación correspondiente (to_Appointments) definida en el servicio OData, mapeando los campos del servicio (ID, título, descripción, fecha inicio, fecha fin) a las propiedades del control.
• 3.4.7. Ocultación del Elemento Estándar (Tabla): Finalmente, se oculta la tabla de citas original (que venía del Object Page estándar) para dejar únicamente visible el PlanningCalendar personalizado.

3.5. Resultado de la Demostración

El resultado es una aplicación que mantiene la apariencia y funcionalidades básicas de Fiori Elements (filtros, tabla principal, navegación a detalles) pero que, en la vista de detalle, presenta las citas en un control de calendario interactivo (PlanningCalendar) totalmente integrado gracias a FPM, satisfaciendo el requerimiento de personalización. Se menciona que el Master Course profundiza en funcionalidades adicionales como operaciones CRUD (Crear, Leer, Actualizar, Borrar) sobre este control personalizado.

saphana

4. Presentación del Máster en SAP Fiori Elements y Flexible Programming Model

Se promociona el Máster en SAP Fiori Elements y Flexible Programming Model de Logali Group.

4.1. Contenido Detallado del Máster

El curso cubre desde los fundamentos de Fiori Elements (uso de plantillas con XML Annotations) y FPM (conceptos, OData, anotaciones, entornos de desarrollo), hasta aspectos esenciales de tecnologías subyacentes como Git, Node.js, JavaScript y TypeScript (con énfasis en este último). Incluye un repaso de SAPUI5 avanzado (con OData V4) y una introducción comparativa a la creación de aplicaciones similares con CAP, XML Annotations, FPM y RAP básico para entender las diferencias entre CDS Annotations y XML Annotations. El núcleo del curso es un caso práctico empresarial (el de terapeutas/citas) desarrollado extensamente con FPM, cubriendo Bloques de Construcción, Extensiones de Controladores y Puntos de Extensión en detalle. Finalmente, se aborda el despliegue en BTP y la configuración del Launchpad Service, incluyendo aspectos de seguridad.

4.2. Detalles Logísticos y Promociones

• Inicio: 10 de mayo.
• Formato: 15 sesiones en vivo (sábados).
• Duración: 4 meses.
• Laboratorios: 30.
• Promociones: Descuento del 30% por inscripción temprana, 3 becas del 50% sorteadas al final del webinar, y un descuento adicional para todos los asistentes que descarguen su certificado.
• Requisitos: Conocimientos previos recomendados en SAPUI5 (nivel intermedio/avanzado), familiaridad con Git/GitHub, Node.js, JavaScript/TypeScript (aunque se cubren en el curso). No es indispensable ser experto en CAP o RAP, pero sí entender los conceptos básicos de anotaciones.

Conclusión

El Flexible Programming Model (FPM) representa una evolución significativa para el desarrollo de aplicaciones SAP Fiori, tendiendo un puente entre la eficiencia del desarrollo basado en anotaciones de Fiori Elements y la libertad de personalización que ofrece SAPUI5. Permite a los desarrolladores superar las limitaciones inherentes de las plantillas estándar, integrando componentes y lógica a medida de forma estructurada mediante Puntos de Extensión, Bloques de Construcción y Extensiones de Controladores. Dominar FPM es clave para crear interfaces de usuario modernas, adaptables y potentes sobre servicios OData V4 en el ecosistema SAP.

Recomendación de Curso

Basado en el contenido del texto, el curso más relevante de Logali Group es sin duda el Master en SAP Fiori Elements y Flexible Programming Model. Ver aquí

• Justificación: Este curso cubre directamente y en profundidad todos los temas centrales abordados en el webinar: las plantillas SAP Fiori Elements, las limitaciones del enfoque estándar, la introducción y aplicación detallada de Flexible Programming Model (con sus Puntos de Extensión, Bloques de Construcción y Extensiones de Controladores), el uso de SAPUI5 para personalizaciones avanzadas (como la integración del PlanningCalendar), y el contexto de servicios OData V4 provenientes de CAP o RAP. El curso está explícitamente diseñado para llevar a los desarrolladores al siguiente nivel en la creación de aplicaciones Fiori modernas y personalizadas.