SAP Fiori List Report paso a paso

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:

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.

Creando proyecto SAP Fiori

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.

Creando proyecto SAP Fiori

Indicamos un nombre a nuestro proyecto Fiori y un título para nuestra aplicación. Pulsamos en Next.

Creando proyecto SAP Fiori

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.

Creando proyecto SAP Fiori

Escogemos el fichero de anotación generado por el servicio y pulsamos en Next.

Creando proyecto SAP Fiori

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.

Creando proyecto SAP Fiori

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.

Ejecutando aplicación SAP Fiori

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.

Aplicación SAP Fiori List Report

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:

Campos de selección

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:

Adaptando nuevos filtros

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.

Adaptando nuevos filtros

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.

SAP Fiori List Report. Nuevo filtro.

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.

Creando variante Fiori

Pulsamos en el botón ‘Guardar como’.

Creando variante Fiori

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.

Ampliando campos de tabla List Report

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.

Nueva columna en nuestro Fiori List Report

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 🙂.

Deja un comentario