Crear una aplicación SAP Fiori List Report nunca había sido tan sencillo como hasta ahora. Eso sí, no cualquier tipo de aplicación. Las aplicaciones Fiori “complejas”, es decir, que impliquen creaciones, modificaciones o borrados en SAP, van a requerir de lógica adicional para poder llevar a cabo estos procesos, ya sea mediante ABAP o mediante BOPF, pero para todas aquellas aplicaciones de tipo informe, donde queremos visualizar información que podamos filtrar y ajustar según el tipo de usuario, SAP ha facilitado mucho la labor de desarrollo para esta casuística.
Como vimos en artículos anteriores, para la creación de una aplicación SAP Fiori a partir de una vista ABAP CDS, los pasos a seguir son los siguientes:
- Creación de vista ABAP CDS con sus respectivas anotaciones CDS.
- Creación del servicio oData a través de una anotación CDS.
- Creación de aplicación SAP Fiori
Ya hemos creado nuestra vista ABAP CDS y hemos expuesto un servicio oData a partir de la anotación CDS @oData.publish: true. Por lo tanto, a continuación debemos crear nuestra aplicación SAP Fiori.
IMPORTANTE. Para poder crear nuestro proyecto de aplicación Fiori en SAP Web IDE deberemos tener configurado nuestro SAP Cloud Connector. Podéis consultar en este enlace , del compañero de gremio Javier Martinez Solera, como configurarlo en vuestro equipo para que podáis conectar desde SAP Web IDE a vuestro sistema SAP.
Accedemos a nuestro SAP Web IDE y pulsamos en File → New → Project From Template.
Seleccionamos la plantilla SAP Fiori List Report. Este tipo de plantilla creará una aplicación de tipo informe, la cual contiene una cabecera con unos filtros y una tabla donde se visualiza la información filtrada que recupera nuestra vista ABAP CDS. Además, y muy importante, deberemos escoger la versión SAP Fiori de nuestro sistema SAP. Es importante elegir una versión igual o inferior a la instalada en nuestro, ya que si elegimos una superior, podremos tener problemas a la hora de ejecutarla porque se podría hacer uso de componentes que no existen en la versión de nuestro sistema.
Indicamos un nombre a nuestro proyecto Fiori y un título para nuestra aplicación. Pulsamos en Next.
A continuación, elegimos la conexión a nuestro sistema. Esta conexión, si habéis visto el vídeo que os enlacé anteriormente, se crea dentro de nuestro SAP BTP, en el apartado Destinations. Aqui se define la conexión a nuestro Cloud Connector, y desde el SAP Cloud Connector que tengamos configurado en local o en el servidor, se establece la conexión contra nuestro sistema, haciendo posible que desde el SAP Web IDE podamos acceder a los servicios publicados en el SAP Gateway de nuestro sistema.
Una vez se ha cargado el catálogo, buscamos nuestro servicio. En nuestro caso, buscamos por el ejemplo del servicio que generamos a partir de la ABAP CDS ZCDS_EJEMPLO_BLOG.
Escogemos el fichero de anotación generado por el servicio y pulsamos en Next.
Por último, indicamos cual es nuestro ‘oData Collection’, es decir, cual es la entidad de la cual vamos a recuperar los datos. Esta entidad se corresponde con la generada automáticamente por la anotación CDS. Pulsamos → Finish para terminar el proceso.
Con estos sencillos pasos, ya tenemos creada nuestra aplicación SAP Fiori List Report. Y quizás ahora te preguntes, pero Borja ¿tendremos que programar la aplicación Fiori, no?. Pues no, en este caso, una aplicación de tipo informe generada a través de un servicio oData creado a partir de anotaciones CDS, no necesita de ninguna línea de código SAPUI5. Y esto, es tan sencillo de comprobar como ejecutando el proyecto.
Seleccionamos el proyecto y pulsamos → Botón “Ejecutar’ marcado en la imagen. Al pulsar el botón se abrirá una nueva pestaña en el navegador con nuestra aplicación Fiori.
Sorpresa!. Si pulsas en el botón Ir/Go (dependiendo de tu idioma) se recuperarán todos los datos de nuestra vista ABAP CDS. No te engañaba, era muy sencillo crear un informe de tipo SAP Fiori List Report.
SAP Fiori List Report. Campos de selección.
Disponemos de una cabecera de campos de selección para poder filtrar por aquellos valores que hemos marcado en nuestra vista ABAP CDS con la anotación @UI. selectionField. Si recordamos nuestra vista ABAP CDS:
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
@Search.searchable: true
define view ZCDS_EJEMPLO_BLOG
as select from sflight as Flight
association [0..1] to spfli as Schedule on Flight.carrid = Schedule.carrid
and Flight.connid = Schedule.connid
{
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
key Flight.carrid as IdEmpresa,
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
key Flight.connid as CodVuelo,
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
key Flight.fldate as Fecha,
@Semantics.amount.currencyCode: 'Moneda'
@UI.lineItem: [ { position: 40 } ]
Flight.price as Precio,
@Semantics.currencyCode: true
Flight.currency as Moneda,
Schedule.cityfrom as CiudadOrigen,
Schedule.cityto as CiudadDestino,
@Semantics.quantity.unitOfMeasure: 'UnidadDistancia'
@UI.lineItem: [ { position: 50 } ]
Schedule.distance as Distancia,
@Semantics.unitOfMeasure: true
Schedule.distid as UnidadDistancia
}
Los campos IdEmpresa, CodVuelo, Fecha está anotados para ser un campo de filtro. Además, recordar que añadimos la anotación @Search.searchable: true para incluir un campo de búsqueda, el cual siempre aparece el primero el barra de campos de selección.
Si filtramos por el IdEmpresa ‘AA’ obtenemos el siguiente resultado:
Cabe destacar que, aunque hayamos seleccionado 3 campos de filtro a partir de nuestra vista CDS, es posible añadir el campo que queramos mediante la opción ‘Adaptar Filtros’. Cuando anotamos mediante la vista ABAP CDS, estamos indicando a nuestra aplicación que queremos que ese sea nuestro estado inicial, pero esto no imposibilita la opción de poder ajustar la aplicación a la necesidad del usuario. Si pulsamos en el botón Adaptar Filtros, observamos lo siguiente:
La aplicación nos muestra el listado de filtros que tenemos actualmente por pantalla. Mediante los ‘check box’ de la derecha, podemos habilitar o deshabilitar los filtros actuales. Además, si pulsamos en el botón ‘Otros filtros’ podremos añadir filtros adicionales a nuestra aplicación.
Los filtros adicionales que podemos añadir son el resto de campos expuestos en nuestra vista ABAP CDS. De esta forma, si diferentes tipos de usuario van a utilizar el mismo informe, cada uno se podrá adaptar la aplicación a su gusto o necesidad. En este ejemplo, pinchamos en el campo ‘Ciudad de llegada’ y pulsamos OK. Finalmente pulsamos en el botón → Ir/Go y podremos comprobar como el filtro ha sido añadido a nuestra aplicación.
Si un usuario quisiera que siempre se muestre esta disposición de filtros al utilizar la aplicación, el entorno permite guardar las variantes que se necesiten. Para ello, pulsamos en la flecha de al lado del texto ‘Estandar’ ( parte superior izquierda ) para abrir la gestión de variantes.
Pulsamos en el botón ‘Guardar como’.
Indicamos el nombre de nuestra variante y si queremos que se muestre como predeterminada. De esta forma, siempre que accedamos con nuestro usuario, aparecerá la disposición guardada en la variante. Ademas, podemos indicar si queremos que sea pública para otros usuarios o no, y si queremos que aplique los filtros automáticamente.
De este modo, el usuario siempre tendrá la última palabra en cuanto a la disposición de los campos en la aplicación. Como desarrolladores, seguiremos las indicaciones funcionales para realizar los informes que se nos soliciten, aunque el usuario podrá configurar la pantalla a su gusto posteriormente.
Sap Fiori List Report. Tabla de datos.
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
@Search.searchable: true
define view ZCDS_EJEMPLO_BLOG
as select from sflight as Flight
association [0..1] to spfli as Schedule on Flight.carrid = Schedule.carrid
and Flight.connid = Schedule.connid
{
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
key Flight.carrid as IdEmpresa,
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
key Flight.connid as CodVuelo,
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
key Flight.fldate as Fecha,
@Semantics.amount.currencyCode: 'Moneda'
@UI.lineItem: [ { position: 40 } ]
Flight.price as Precio,
@Semantics.currencyCode: true
Flight.currency as Moneda,
Schedule.cityfrom as CiudadOrigen,
Schedule.cityto as CiudadDestino,
@Semantics.quantity.unitOfMeasure: 'UnidadDistancia'
@UI.lineItem: [ { position: 50 } ]
Schedule.distance as Distancia,
@Semantics.unitOfMeasure: true
Schedule.distid as UnidadDistancia
}
Los campos que se representan en la tabla de la aplicación SAP Fiori son aquellos que tienen la anotación @UI.lineItem, los cuales son IdEmpresa, CodVuelo, Fecha, Precio y Distancia. Recordar que para los campos de Precio y Distancia tenemos una anotación especial para indicar su moneda y su unidad, que como observamos en nuestra aplicación, aparecerán representados junto al valor de los campos Precio y Distancia.
De la misma forma que podemos adaptar nuestra barra de campos de selección, también podemos incluir o modificar los campos que aparecen representados en la tabla. Para ello, pulsamos en el botón ‘engranaje’ situado en la barra superior derecha de nuestra tabla.
Muy similar a la opción de configuración de filtrado, la aplicación nos muestra marcados aquellos campos anotados en nuestra vista ABAP CDS por defecto. No obstante, el usuario podrá añadir o quitar las columnas de la tabla según su gusto o necesidad. Hay que tener cuenta, que añadir más campos puede implicar que se ejecuten asociaciones de nuestra vista ABAP CDS adicionales para ello. Por lo tanto, será importante mostrar solo aquella información que se necesita para no comprometer el rendimiento de nuestra aplicación.
En nuestro ejemplo, marcamos el campo Ciudad de llegada y pulsamos el botón OK.
Ahora ya podemos visualizar el campo ‘Ciudad de llegada’ en nuestra tabla. Del mismo modo, podríamos guardar una variante que muestre siempre por defecto este campo representado en nuestra aplicación SAP Fiori List Report.
¿Magia o tecnología?
A estas alturas quizás tengas muchas preguntas todavía. Preguntas del tipo: ¿Cómo puede ejecutar toda esta funcionalidad si no he introducido ninguna linea de código javascript para representar los campos?. Bueno, aunque parezca magia, es tecnología. En concreto, esta ‘magia’ sucede gracias a las anotaciones en nuestras vistas ABAP CDS y a los Fiori Elements de nuestra aplicación Fiori.
Quiero que entendáis bien qué son los Fiori Elements, porque es la parte más abstracta del desarrollo de aplicaciones Fiori y creo que merecen un artículo exclusivo para que entendamos bien su comportamiento.
No obstante, sin saber en que consiste el truco, podemos construir aplicaciones SAP Fiori de una manera muy sencilla y rápida. Esta aplicación la iremos ampliando y trabajando, incluyendo ayudas de búsqueda personalizadas para nuestros campos de filtrado, añadiendo un detalle a cada registro al cual navegaremos, y representando campos en un color especial con nuevas anotaciones de tipo ‘estado’. Todo esto lo veremos en próximos artículos 🙂.