Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

fiori list report con fiori elements y anotaciones cds

f

Si en 2021 todavía no conoces que son las anotaciones CDS o los Fiori Elements, déjame decirte que no estás actualizado en SAP. No te culpo, si trabajas en una consultora, es posible que sigas trabajando con algunos clientes que todavía no disponen de SAP S4/HANA. En este artículo, te ayudaré a comprender que implicaciones tiene esta nueva forma de trabajo y veremos un ejemplo práctico.

¿Qué son los Fiori Elements?

Los Fiori Elements no son más que un conjunto de plantillas que SAP ha creado con el objetivo de reducir al máximo el coste de desarrollo de las aplicaciones Fiori en Front-End. Estas plantillas, se basan en un servicio oData y en una serie de metadatos (anotaciones) para crear toda la interfaz de usuario y representar la información que procede de nuestro sistema SAP de manera automática.

En resumen, deberemos focalizar nuestro trabajo de desarrollo en Back-End (con CDS y anotaciones) para no tener que desarrollar ninguna o casi ninguna linea de código en SAPUI5. ¿Fácil, verdad?. Bueno, lo será pero no siempre. Como he mencionado antes, los Fiori Elements son plantillas autogeneradas por SAP WebIDE y están pensadas para representar información, dentro de unos límites de diseño que nos rigen estas plantillas. En caso de tener que ampliar la interfaz fuera de estos limites de diseño o de tener que realizar operaciones contra nuestro sistema SAP, no quedará otra que desarrollar a mano estas ampliaciones. Pero, no te preocupes! En este blog iremos viendo ejemplos de ampliaciones y verás que no es tan complicado 🙂 .

El conjunto de plantillas que nos proporciona SAP se dividen en 4 tipos: Analytical list page, List report, Object Page y Overview page. Cada una de ellas esta pensada para un tipo de aplicación diferente y, en concreto, en este artículo veremos un ejemplo de cómo crear una aplicación Fiori de tipo List Report. Si queréis saber más, podéis consultar este artículo de Antonio de Ancos donde explica perfectamente cada uno de los tipos de plantillas con Fiori Elements.

Prerequisitos

Antes de empezar, necesitamos cumplir los siguientes prerequisitos para poder llevar a cabo el desarrollo del ejemplo que vamos a ver a continuación:

Creación de vista CDS en Eclipse

El primer paso es la creación de la vista CDS en Eclipse. Para este artículo, vamos a implementar un ejemplo sencillo que recupere un listado de materiales con su descriptivos y algún campo más. El objetivo es aprender el proceso de creación de una aplicación Fiori de manera automática a partir de un servicio oData definido en base a una vista CDS. En futuros artículos, veremos ejemplos más complejos de lógica en Back-End.

Para crear la vista CDS, abrimos Eclipse y en nuestra carpeta Local Objects dentro de la entrada a nuestro sistema, pulsamos Botón Derecho -> New -> Other ABAP Repository Object.

1. Creación de vista CDS

Desplegamos la carpeta Core Data Services y seleccionamos Data Definition

1. Creación de Vista CDS

Introducimos el nombre de la vista CDS, elegimos el paquete donde queremos almacenar la vista (en nuestro ejemplo, usaremos $TMP, el cual es un paquete local que no esta asociado a ninguna ruta de transporte) y añadimos una breve descripción:

1. Creación de Vista CDS

Por último, el asistente nos permite elegir una plantilla de tipo de CDS para agilizar el desarrollo. En nuestro caso, seleccionamos la plantilla estándar “Define View” y pulsamos Finish

1. Creación de Vista CDS

Una vez creada nuestra vista CDS, insertamos el código que recupera el listado de materiales que se mostrará en la aplicación. En nuestro ejemplo, recuperamos el código de material, descripción de material, tipo de artículo y grupo de artículo. Para recuperar la descripción, hacemos un join con la tabla MAKT y filtramos en la cláusula WHERE por el idioma español.

Anotaciones CDS

Como se ha comentado anteriormente, el objetivo de este artículo es aprender a generar una aplicación Fiori de tipo List Report de manera automática, sin necesidad de implementar ninguna linea de código SAPUI5 en SAP Web IDE. Y para lograr este objetivo, necesitamos implementar las potentes anotaciones en nuestra vista CDS.

Las anotaciones no son más que una extensión de los metadatos de nuestra aplicación. Son lineas de código en nuestra vista CDS que le dicen al interprete cómo debe mostrarse la interfaz de usuario, como está definido un servicio oData, cómo va a filtrarse o buscar dentro de nuestro aplicación, etc. Para conocer todos los tipos de anotaciones, podéis acceder a este enlace donde SAP nos explica de manera detallada cada uno de los tipos de anotaciones con ejemplos.

En nuestro caso, vamos a ver dos tipos de anotaciones: UI Annotations y oData Annotations.

Las UI Annotations son aquellas anotaciones encargadas de indicar a nuestra aplicación cómo debe representarse la información en la interfaz de usuario. Dentro de este tipo de anotaciones, disponemos de infinidad de opciones para representar la información a nuestro gusto (dentro de ciertas limitaciones, claro) las cuales están disponibles en el enlace de referencia de SAP indicado anteriormente.

En nuestro caso, hemos utilizado tres tipos de UI Annotations distintas:


Por otro lado, hemos utilizado un oData Annotation para publicar la vista CDS como un servicio. La anotación @OData.publish: true permite que la vista CDS se cree como un servicio en nuestro sistema SAP S4/HANA. Este servicio se crea con el nombre “znombrevista”+_”CDS” una vez activemos la vista CDS. En nuestro caso, el servicio creado en SAP se llamará ZCDS_TEST_MATERIAL_CDS.

Para finalizar el proceso de creación de nuestra vista CDS, activamos la vista con el botón que se muestra en la siguiente imagen:

Registrando el servicio en nuestro sistema SAP

Una vez hemos activado nuestra sistema CDS, nuestro servicio ZCDS_TEST_MATERIAL_CDS ya está creado en nuestro sistema SAP. No obstante, necesitamos añadir dicho servicio al listado de servicios activos de nuestro sistema.

Para ello, accedemos a la transacción “/n/IWFND/MAINT_SERVICE” y pulsamos en añadir servicio.

Insertamos nuestro alias (LOCAL) de nuestro sistema y añadimos el nombre de nuestro servicio ( nombredevista + “_CDS”) en el campo Nombre Ser. Técnico. Pulsamos en el botón Obtener Servicios.

Pulsamos el botón “Añadir servicios seleccionados” e indicamos un paquete donde registrar el servicio. En nuestro ejemplo, lo registraremos como objeto local ($TMP):

Pulsamos Aceptar y, si todo ha ido bien, nos aparecerá el siguiente mensaje:

Una vez el servicio ya ha sido registrado, volvemos a la ventana anterior y buscamos el servicio. Comprobamos que el nodo ICF está activo para verificar finalmente que el servicio se ha registrado correctamente.

Y con esto, ya tenemos nuestra vista CDS que será la encargada de recuperar la información y el servicio registrado de nuestra CDS que nos permitirá recuperar dicha información desde la aplicación. Ahora ya solo nos queda crear nuestra aplicación Fiori List Report.

Creando la aplicación Fiori List Report

Accedemos a nuestra cuenta de SAP Web IDE y creamos un nuevo proyecto a partir de una plantilla. Para ellos, botón derecho en nuestro Workspace, New -> Project from Template.

Seleccionamos la plantilla de tipo List report Application.

A continuación, indicamos un nombre a nuestro proyecto de SAP Web IDE y un título a nuestra aplicación. También podemos añadir un namespace y una descripción como valores opcionales.

Seleccionamos de nuestro Service Catalog el servicio que hemos registrado a partir de nuestra vista CDS. Para ello, seleccionamos la conexión a nuestro sistema ( tenéis que tenerla configurada en vuestra SAP Cloud Platform Cockpit) y buscamos nuestro servicio. Seleccionamos el servicio y pulsamos Next.

El asistente nos indica de dónde tiene que coger las anotaciones. En nuestro caso, seleccionamos nuestro servicio, aunque existe la opción también de añadir un fichero local con las distintas anotaciones. Pulsamos Next de nuevo

Por último, indicamos nuestro oData Collection (nuestra vista CDS) y dejamos las opciones que vienen por defecto. Pulsamos Finish para terminar de crear nuestro proyecto.

Lanzamos la aplicación desde nuestro SAP Web IDE.

Como podemos observar, ya tenemos nuestra aplicación Fiori List Report. En la imagen, podemos ver el listado de materiales filtrando por un código de material. De esta forma, hemos conseguido una aplicación de tipo List Report capaz de filtrar por los campos que nosotros indiquemos en nuestras anotaciones en la vista CDS sin introducir ninguna linea de código SAPUI5.

En próximos artículos, veremos cómo ampliar este ejemplo con nuevas anotaciones CDS. Además, veremos como poder introducir nuevas funcionalidades que no son posibles con las plantillas autogeneradas a través de extensiones de Vistas y Controladores en SAP Web IDE.

Autor del artículo

Borja Garcia

Desarrollador Full Stack de aplicaciones móviles/web SAP desde allá por 2014. Compartir conocimiento es la mejor manera de aprender.

Agregar Comentario

Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

Categorías

Últimos artículos