Una de las principales utilidades que nos aporta las vistas ABAP CDS, es la posibilidad de construir aplicaciones SAP Fiori sin necesidad de implementar ninguna línea de código SAPUI5 en nuestro Front End para realizar nuestro informes analíticos. Para poder llevar esta idea a cabo, es fundamental que profundicemos en algunas anotaciones CDS, ya que estas serán las que proporcionen semántica y lógica a nuestros listados SAP Fiori.
Podemos consultar todas las anotaciones CDS existentes en la referencia de SAP, la cual hay que decir que está bastante bien explicada. No obstante, siempre es mejor aprender si te lo explican de manera detallada. Por ello, iremos desglosando por bloques las diferentes anotaciones CDS para agilizar su comprensión y poder utilizarlas en nuestras aplicaciones SAP Fiori.
En el primer artículo de anotaciones CDS, vimos las anotaciones básicas que se autogeneran cuando creamos una CDS en nuestro entorno Eclipse, las cuales se ubican en la cabecera de la vista. Estas anotaciones hacen referencia a la vista al completo, y suelen estar relacionadas con características de la vista CDS o con el modelado de datos que se va a utilizar. En este artículo vamos a ver algunas de las anotaciones esenciales para construir nuestras aplicaciones SAP Fiori.
Veremos los diferentes tipos de anotaciones basandonos en el código que generamos en la última entrada del blog:
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
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
{
key Flight.carrid as IdEmpresa,
key Flight.connid as CodVuelo,
key Flight.fldate as Fecha,
Flight.price as Precio,
Flight.currency as Moneda,
Schedule.cityfrom as CiudadOrigen,
Schedule.cityto as CiudadDestino,
Schedule.distance as Distancia,
Schedule.distid as UnidadDistancia
}
Anotaciones CDS semántica. Importe y moneda.
La primera anotación nos permite formatear los campos de tipo importe con su respectiva moneda. De la misma forma que cuando creamos una nueva tabla en nuestro diccionario ABAP, en la cual debemos indicar para los campos de tipo importe cual es la moneda y tabla donde se hace la conversión, en nuestra vista ABAP CDS deberemos indicar qué campo ejerce de tipo de moneda y sobre el campo del importe, indicar cual es el campo moneda al que debe referenciarse para hacer el formateo. Para ello, existen las siguientes anotaciones:
@Semantics.currencyCode: true
Con esta anotación, indicaremos sobre el campo Moneda que este actuará como moneda de un campo importe, en nuestro caso, el campo Precio.
@Semantics.amount.currencyCode: 'CurrencyCode'
Por otro lado, con esta anotación indicaremos sobre el campo importe, en nuestro caso, el campo Precio, que deberá formatearse en base a un campo moneda llamado “CurrencyCode”, que en la vista CDS ejemplo será el campo Moneda.
Si implementamos estas anotaciones en nuestro código quedaría de la siguiente forma:
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
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
{
key Flight.carrid as IdEmpresa,
key Flight.connid as CodVuelo,
key Flight.fldate as Fecha,
@Semantics.amount.currencyCode: 'Moneda'
Flight.price as Precio,
@Semantics.currencyCode: true
Flight.currency as Moneda,
Schedule.cityfrom as CiudadOrigen,
Schedule.cityto as CiudadDestino,
Schedule.distance as Distancia,
Schedule.distid as UnidadDistancia
}
Con estas anotaciones conseguimos que cuando construyamos nuestro informe Fiori, el campo Precio aparecerá automáticamente formateado con su moneda correspondiente en la misma columna.
Anotación CDS semántica. Cantidad y unidad de medida.
Muy parecida a la anotación anterior, vamos a ver las anotaciones que nos permiten formatear una unidad de medida con su respectivo campo de cantidad o distancia.
Semantics.unitOfMeasure: true
De la misma forma que la anterior, con esta anotación indicaremos que el campo UnidadDistancia es un campo tipo unidad de medida.
Semantics.quantity.unitOfMeasure: 'UnitofMeasure'
Por otro lado, con esta anotación indicaremos sobre el campo cantidad o distancia, en nuestro caso, el campo ‘Distancia’, cual es el campo unidad de medida que debe referenciarse para formatear el valor que se mostrará por pantalla.
El código resultado de implementar estas anotaciones es el siguiente:
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
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
{
key Flight.carrid as IdEmpresa,
key Flight.connid as CodVuelo,
key Flight.fldate as Fecha,
@Semantics.amount.currencyCode: 'Moneda'
Flight.price as Precio,
@Semantics.currencyCode: true
Flight.currency as Moneda,
Schedule.cityfrom as CiudadOrigen,
Schedule.cityto as CiudadDestino,
@Semantics.quantity.unitOfMeasure: 'UnidadDistancia'
Schedule.distance as Distancia,
@Semantics.unitOfMeasure: true
Schedule.distid as UnidadDistancia
}
Con estas anotaciones, podremos visualizar en nuestro informe SAP Fiori el campo Distancia correctamente formeatado, apareciendo tanto la distancia como su unidad de medida en una única columna.
Anotaciones de interfaz / lógica.
Con las siguientes anotaciones nos introducimos de lleno en lo que será nuestra aplicación SAP Fiori. Aunque veremos en próximos artículos en qué se traducen a nivel de aplicación, vamos a introducir 3 anotaciones fundamentales que nos permitirán construir nuestras aplicaciones Fiori de tipo List Report de una manera sencilla.
Columnas de nuestro informe
La primera anotación fundamental nos permite indicar que columnas queremos que se muestren inicialmente en nuestra aplicación. Y si, digo inicialmente, porque todos los campos expuestos de la vista CDS que expongamos como un servicio oData podrán ser añadidas de manera sencilla y manual desde la aplicación a nuestro informe. Con estas anotaciones, lo que indicamos a nuestra aplicación Fiori es qué campos se mostrarán inicialmente en la tabla del informe.
La anotación que permite representar un campo como una columna es la siguiente:
@UI.lineItem: [ { position: 10 } ]
La anotación @UI.lineItem mostrará dicho campo como una columna de la tabla. Esta anotación permite indicar diferentes propiedades. La básica es la posición, que representa el orden en el que queremos que aparezca en la tabla dicha columna. Existen otras propiedades como ‘label’, que permite indicar un texto para la columna, así como la propiedad ‘criticality’, la cual nos permite darle un ‘color’ que representa un estado del valor, para que aparezca el campo representado en color neutro, rojo o verde. Existen más propiedades que podemos consultar en la referencia, pero que iremos viendo en ejemplos más complejos en el blog.
Por último, nuestro ejemplo quedaría de la siguiente forma con esta anotación:
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
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 } ]
key Flight.carrid as IdEmpresa,
@UI.lineItem: [ { position: 20 } ]
key Flight.connid as CodVuelo,
@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
}
Representaremos todos los campos como columna de la tabla de nuestro informe, salvo los campos CiudadOrigen y CiudadDestino. Como podemos observar, no es necesario pintar como columna la Moneda o la Unidad ya que al utilizar las anotaciones correspondientes para indicar la relación entre valor e importe/unidad, se representará automáticamente junto con el importe y la distancia.
Anotaciones de filtro
Además de representar campos en nuestra tabla del informe de nuestra aplicación SAP Fiori, es importante que dicho informe pueda ser filtrado por algún campo. Para ello, también disponemos de una anotación que permitirá que esta lógica se realice de manera automática, sin implementar lógica de filtrado en SAPUI5 o Gateway. Para ello, haremos uso de la siguiente anotación:
@UI.selectionField: [{position: 10}]
La anotación @UI.selectionField mostrará el campo como un filtro de la tabla de nuestro informe. Al igual que la anotación anterior, se pueden añadir diferentes propiedades que podemos consultar en la referencia de SAP. No obstante, para empezar, nos quedaremos con la propiedad ‘position’ que indicará el orden en el que aparece el filtro en la barra superior de nuestro informe Fiori List Report.
Para nuestro ejemplo, vamos a añadir 3 filtros que serán los dos identificadores y la fecha de vuelo, para posteriormente podamos filtrar y probar su funcionalidad en futuros artículos.
@AbapCatalog.sqlViewName: 'ZVEJEMBLOG'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Vista cds ejemplo blog'
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}]
key Flight.carrid as IdEmpresa,
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
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
}
Búsqueda genérica
La última anotación que veremos en el artículo de hoy se corresponde con la búsqueda genérica. A diferencia de la anotación @UI.selectionField, la cual represente un filtro por cada campo sobre la cual se implementa, esta anotación representa un campo de búsqueda único donde escribimos un texto. Este campo de búsqueda filtrará lo que el usuario escriba entre los campos donde se haya indicado mediante la anotación que se debe de buscar.
Primero, para que este campo, y en general, nuestra vista CDS permite el filtrado, deberemos añadir en la cabecera de nuestra vista la siguiente anotación:
@Search.searchable: true
A continuación, indicamos en los campos que queremos que filtre este campo de búsqueda la siguiente anotación:
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
Con esta anotación indicamos que el campo será filtrable por el campo de búsqueda genérico. Con la propiedad ‘fuzzinessThreshold’ indicamos con qué precisión queremos que busque, siendo el valor 1 la máximo precisión, y pudiendo oscilar dicho valor entre 0 y 1.
Por lo tanto, nuestra vista CDS definitiva quedaría tal que así:
@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
}
De esta forma, el usuario podrá encontrar resultados mediante el campo de búsqueda escribiendo el código de empresa o de vuelo, tal y como se ha indicado en la vista con las anotaciones.
El objetivo de este artículo es comenzar a familiarizarse con las anotaciones fundamentales que utilizaremos en la construcción de nuestros aplicativos SAP Fiori List Report. Entenderemos mejor su funcionamiento cuando construyamos la aplicación y comprobemos visualmente en que se traducen. Tomate este artículo como una mera introducción para empezar a entenderlo y refrescaremos todos estos conceptos cuando tengamos nuestras aplicación Fiori creada.