El desarrollo en SAP Fiori a través de anotaciones CDS permite la construcción de aplicaciones complejas con muy poco desarrollo en la parte de FrontEnd. Siguiendo la línea del blog, donde vamos aumentando poco a poco la dificultad y la funcionalidad de una aplicación de tipo SAP Fiori List Report, hoy vamos a aprender a añadir tablas de datos asociadas a nuestra vista CDS principal que representaremos en nuestra página de detalle (Object Page).
En el último artículo, aprendimos a construir el Object Page de una aplicación SAP Fiori List Report a través de anotaciones CDS. En particular, aprendimos a construir un detalle con una cabecera y un contenedor llamado FIELDGROUP, que permite visualizar campos asociados al objeto que estamos representando en nuestra aplicación. Hoy iremos un paso más allá y aprenderemos a representar una tabla vinculada al objeto que se está consultando.
Exponiendo nuestra tabla en la vista CDS
Para poder representar una tabla en nuestra página de detalle a través de anotaciones CDS, es imprescindible que expongamos una asociación que vincule la CDS principal, es decir, aquella que se ha utilizado para crear el servicio oData, con la CDS que tendrá los datos que queremos representar en esta tabla.
Partimos de una vista CDS que obtiene un listado de vuelos con sus datos de código de vuelo, compañía aérea, origen, destino, etc.
Partimos de una vista CDS que obtiene un listado de vuelos con sus datos de código de vuelo, compañía aérea, origen, destino, etc.
define view ZCDS_C_VUELO
as select from ZCDS_I_VUELO
{
key IdCompany,
key IdFlight,
CityFrom,
CityTo,
AirportFrom,
AirportTo
}
La vista de interface donde se recuperan los datos de los vuelos es la siguiente:
@AbapCatalog.sqlViewName: 'ZCFLIGHT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Ejemplo de vista CDS de vuelo'
define view ZCDS_I_VUELO
as select from spfli a
{
key carrid as IdCompany,
key connid as IdFlight,
cityfrom as CityFrom,
cityto as CityTo,
airpfrom as AirportFrom,
airpto as AirportTo
}
La vista expuesta como servicio oData es la ZCDS_C_VUELO. Esta es la vista CDS sobre la cual definiremos la asociación para exponer el listado y, posteriormente, anotarlo para poder visualizarlo en la aplicación Fiori.
El siguiente paso es crear la vista CDS que recupera los datos que queremos representar en la tabla del Object Page. En este ejemplo, recuperamos los datos de todas las compañías aéreas. De este modo, se busca vincular el listado de compañías que ofrecen un vuelo. La vista CDS es la siguiente:
@AbapCatalog.sqlViewName: 'ZCDSCOMPANY'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Flight Company'
define view ZCDS_C_COMPANY
as select from scarr
{
key carrid as IdCompany,
carrname as CompanyName,
currcode as CompanyCurrency
}
Si revisamos la claves de ambas vistas CDS, veremos que en la vista de Vuelos los campos claves son código de Vuelo y código de compañía. Por otro lado, en el listado de Compañías, el campo clave es el código de Compañía. Sabiendo esto, está claro que debemos vincular el vuelo a través del campo clave Compañía.
Para ello, definiremos una asociación de 1 a muchos vinculando el campo IdCompany. Esta asociación, lo que quiere decir es que un vuelo puede estar vinculado a diferentes compañías y, por lo tanto, en el detalle del Vuelo buscamos representar la información de las compañías que lo ofrecen.
define view ZCDS_C_VUELO
as select from ZCDS_I_VUELO
association [0..*] to ZCDS_C_COMPANY as _Companies on _Companies.IdCompany = $projection.IdCompany
{
key IdCompany,
key IdFlight,
CityFrom,
CityTo,
AirportFrom,
AirportTo,
_Companies
}
El modo de exponer una tabla en una vista CDS es, como visualizamos en el código de ejemplo, exponer la asociación completa como si se tratase de un campo más. Aquí estamos exponiendo la asociación directamente, lo que representa la vista CDS ZCDS_C_COMPANY filtrando por el campo IdCompany.
Facets: Anotación CDS para representar la tabla
Tal y como vimos en el anterior artículo, utilizamos la anotación @Facet para representar el diseño de la página de detalle (Object Page) del SAP Fiori List Report. Del mismo modo, vamos a construir un Metadata Extension con las anotaciones necesarias para representar la tabla en nuestra aplicación.
El Metadata Extension es el código que utilizamos para anotar las vistas CDS. En este archivo, implementamos todas las anotaciones Facets, así como los filtros, columnas, etc. Mantendremos en la vista de consumo aquellas anotaciones relacionadas con la semántica de los datos, como las anotaciones para determinar las unidades de una cantidad o la moneda de un importe. Recordad que para poder anotar una vista CDS con un Metadata Extension es necesario incluir en la vista de consumo la anotación @Metadata.allowExtensions: true.
En el artículo anterior utilizamos algunos tipos de Facets para representar información en la cabecera de la página de detalle, y mostrar una sección con una serie de campos. En este ejemplo, vamos a construir las anotaciones para representar una cabecera y una sección para representar la tabla de Compañías.
@Metadata.layer: #CUSTOMER
@UI.headerInfo: { typeName: 'Vuelo' ,
typeNamePlural: 'Vuelos' ,
title: { type: #STANDARD , value: 'IdFlight'} ,
description: { type: #STANDARD, value: 'IdCompany' } }
annotate view ZCDS_C_VUELO with
{
@UI.facet: [
{ id: 'idCabecera' ,
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdCab'},
{ id: 'idDetalle' ,
label: 'Datos Adicionales',
position: 10,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdDetalle'},
{ id: 'idLineItemCompany' ,
type : #LINEITEM_REFERENCE ,
label : 'Companies' ,
position: 20 ,
targetElement: '_Companies'}
]
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 10, qualifier: 'hdCab' }]
IdCompany;
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 10, qualifier: 'hdCab' }]
IdFlight;
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 10, qualifier: 'hdDetalle' }]
CityFrom;
@UI.selectionField: [{position: 40}]
@UI.lineItem: [ { position: 40 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdDetalle' }]
CityTo;
@UI.fieldGroup: [{ type: #STANDARD, position: 30, qualifier: 'hdDetalle' }]
AirportFrom;
@UI.fieldGroup: [{ type: #STANDARD, position: 40, qualifier: 'hdDetalle' }]
AirportTo;
}
Como se puede observar, se ha anotado la CDS para representar la información de la siguiente forma:
- Se representan datos de cabecera a través de la anotación @Facet de tipo FIELDGROUP_REFERENCE y purpose #HEADER, a través de la cual se indican los dos campos más representativos del objeto que se visualiza. Esto, al igual que en el artículo anterior, representa la información desglosada en nombre de campo : valor para cada uno de los campos anotados.
- Se representan datos adicionales en una sección de tipo FIELDGROUP_REFERENCE que tiene como targetQualifier “hdDetalle”. Todos los campos anotados con @UI.fieldGroup y qualifier “hdDetalle”, se representarán en una sección que mostrará la información organizada igual que en la cabecera, nombre de campo: valor.
- Por último, representamos la tabla de Compañías, para el cual hemos escrito este artículo. Para ello, se utiliza un nuevo tipo de Facet llamado LINEITEM_REFERENCE. En la propiedad targetElement deberemos indicar el nombre tal cual que se ha indicado a la asociación de la tabla en nuestra vista de Consumo. De esta forma, la aplicación será capaz de enlazarlo y representar la tabla en una nueva sección que tendrá “Companies” como título.
El potencial de las anotaciones Facets ha quedado reflejado con estos artículos. Simplemente con algunas anotaciones podemos construir una aplicación completa sin meter ninguna línea de código en la parte de Fiori. No siempre nos servirá simplemente anotar vistas CDS para construir aplicaciones de negocio, pero lo que está claro es que para desarrollar informes, los cuales son muy utilizados y demandados por los clientes, se ha avanzado muchísimo respecto al tiempo de desarrollo y la facilidad de programación para los desarrolladores.