Ayudas de búsqueda en SAP Fiori

Las anotaciones CDS nos permiten implementar aplicaciones SAP Fiori de una manera muy sencilla. ¿Te suena?. Lo sé, pero nunca me cansaré de repetirlo. Gracias a las anotaciones CDS reducimos el tiempo de dedicación al desarrollo de informes Fiori gracias a su potencial.

Hoy le toca el turno a las ayudas de búsqueda en SAP Fiori. Hace unos años, cuando las anotaciones CDS no estaban todavía en el mapa, el desarrollo de las ayudas de búsqueda en aplicaciones SAP Fiori podía resultar un trabajo tedioso. Para ello, se tenía que desarrollar el componente de filtro en SAPUI5, en la parte del front-end, tanto a nivel de interfaz como a nivel de lógica, donde filtrabamos mediante peticiones oData implementadas a mano la entidad correspondiente. Además, debíamos implementar en la transacción SEGW la correspondiente identidad, así como el código en SAP Gateway correspondiente para que el filtrado pudiese llevarse a cabo. Hoy veremos como este trabajo, gracias a las anotaciones CDS, se ha simplificado muchisimo.

Creando la vista CDS para nuestra ayuda de búsqueda

Partiendo del ejemplo que hemos visto en artículos anteriores, vamos a añadir un par de ayudas de búsqueda para nuestro informe Fiori de Vuelos. Si recordamos la aplicación, se ve tal que así:

Disponemos de un listado de tipo Fiori List Report donde mostramos información básica de un vuelo. En este listado, disponemos de 3 campos de filtro: compañía aerea, número de conexión y fecha de vuelo. Si abrimos uno de los filtros, observamos lo siguiente:

Tenemos un filtro que permite añadir diferentes valores, pero que nos obliga a recordar los valores que tenemos filtrar ya que no tenemos posibilidad de listar las diferentes opciones que tenemos de filtrado, haciendo menos usable la aplicación y obligando al usuario a saber los valores exactos de filtrado.

Para mejorar la usabilidad de la aplicación, vamos a crear una ayuda de búsqueda que nos permita saber que compañias aereas podemos filtrar, y que el usuario pueda filtrar de manera mucho más ágil.

¿Cómo podemos crear una ayuda de búsqueda con anotaciones CDS?. Muy sencillo. Para ello, lo primero que haremos será crear una vista CDS que recupere los posibles datos de filtrado, en este caso, el listado de todas las posibles compañías aéreas. Para crear la vista CDS, seguimos los pasos que seguimos en los artículos iniciales, donde vimos como crear vistas ABAP CDS a través de la herramienta Eclipse.

@AbapCatalog.sqlViewName: 'ZVWCOMPAEREA'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Listado de compañías aereas'
define view ZCDS_COMPANYIA_AEREA 
as select from scarr{
    key carrid,
    carrname,
    currcode
}

Creamos una vista CDS que recupera los datos de las posibles compañias aéreas. Para ello, debemos hacer una búsqueda sobre la tabla SCARR. Si ejecutamos esta vista en Eclipse, comprobamos los datos que recupera. Para ello, pulsamos botón derecho → Open With → Data Preview.

Para nuestro ejemplos disponemos de datos 3 compañías aéreas diferentes. ¿Cual es el objetivo de esta vista CDS?. Enlazarla con nuestro campo de filtrado para que al abrir el componente en nuestra aplicación Fiori aparezcan dichos datos para su filtrado. ¿Cómo hacemos esto?. Con una anotación CDS.

Creando la anotación CDS para enlazar nuestra vista CDS

Una vez hemos completado el primer paso, y tenemos nuestra vista CDS creada que obtiene los datos disponibles para su filtrado, debemos enlazar nuestro campo Compañía Aérea con la vista CDS que acabamos de crear, para que el servicio oData pueda saber cual es la entidad que obtendrá los datos en nuestro campo de filtro.

Para ello, haremos uso de la siguiente anotación:

@Consumption.valueHelpDefinition: [ { entity:  { name:    'ZCDS_COMPANYIA_AEREA',
                                           element: 'carrid' } } ]

Esta anotación indica al campo sobre el cual actúa, que su ayuda de búsqueda esta asociado a la entidad ZCDS_COMPANYA_AEREA, y que el campo que se utilizará para el filtrado de nuestro informe Fiori será ‘carrid’. Se utiliza este campo ya que en nuestro informe SAP Fiori List Report hemos expuesto la identificador de empresa, por lo que para que el filtro funcione, deberemos utilizar el mismo campo de filtrado que el que se utiliza en la tabla.

Añadimos esta anotación a nuestra vista ABAP CDS que 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'
@Search.searchable: true
@OData.publish: 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 }
      @Consumption.valueHelpDefinition: [ { entity:  { name:    'ZCDS_COMPANYIA_AEREA',
                                           element: 'carrid' } } ]
  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
}

Activamos y, al tener el servicio autopublicado, se generará automáticamente una entidad para la ayuda de búsqueda en nuestro servicio oData. ¿Y ahora, como enlazamos esta entidad a nuestro campo de filtro?. No hay que hacer nada más, ya que el servicio indica a la aplicación automáticamente que dicho campo, IdEmpresa, tiene una entidad de tipo ayuda de búsqueda para su filtrado. Si ejecutamos nuestra aplicación y tratamos de filtrar, comprobaremos el resultado:

Y de esta forma tan sencilla, logramos disponer de una ayuda de búsqueda en nuestra aplicación Fiori mediante anotaciones CDS. Como observamos, podemos listar todos los posibles valores asociados al campo ‘Compañía aérea’. El número de campos que se muestran en la ayuda de búsqueda, dependerá de los campos que hayamos expuesto en nuestra vista CDS creada para ello. Si modificamos la vista CDS y quitamos el campo de Moneda Local, el resultado será el siguiente:

@AbapCatalog.sqlViewName: 'ZVWCOMPAEREA'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Listado de compañías aereas'
define view ZCDS_COMPANYIA_AEREA 
as select from scarr{
    key carrid,
    carrname
}

Transformando la ayuda de búsqueda en un desplegable

Siempre que desarrollamos una aplicación Fiori ( incluso aplicaciones fuera de SAP ) debemos ponernos en la piel del usuario final. Debemos permitir que el usuario pueda llevar a cabo su trabajo de la manera más sencilla y ágil posible. Y esto, en programación, se traduce en “número de clicks” que un usuario tiene que hacer para realizar la acción que desea.

El ejemplo que hemos visto, permite al usuario filtrar la compañía aérea a traves de un pop-up con su respectiva tabla, lo cual facilita mucho la vida al usuario. No obstante, tenemos que apreciar que estamos creando una tabla de filtrado para mostrar 3 valores, lo cual obliga al usuario a realizar hasta 3 clicks diferentes. Para estos casos, con datos muy acotados, será mucho más interesante realizar un desplegable antes que un pop-up de filtro.

Para convertir este pop-up de nuestro campo de filtro en un desplegable ( o Dropdown ) haremos uso de la siguiente anotación:

@ObjectModel.resultSet.sizeCategory: #XS

Esta anotación CDS se incluye en la cabecera de nuestra vista creada para la ayuda de búsqueda, e indica al servicio ( y a la aplicación Fiori) que el tamaño de datos de esta ayuda de búsqueda es muy reducido. Añadimos la anotación a nuestra vista CDS:

@AbapCatalog.sqlViewName: 'ZVWCOMPAEREA'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Listado de compañías aereas'
@ObjectModel.resultSet.sizeCategory: #XS
define view ZCDS_COMPANYIA_AEREA 
as select from scarr{
    key carrid,
    carrname
}

Activamos la vista y ejecutamos de nuevo nuestra aplicación Fiori:

Las anotaciones CDS nos permiten hacer maravillas con muy pocas líneas de código. Aprender a usarlas es esencial para sacar el máximo partido de las nuevas tecnologías SAP y para optimizar tiempos de desarrollos que antes eran mucho más laboriosos. Poco a poco vamos ampliando la lógica de nuestra aplicación descubriendo nuevas funcionalidades para ser capaces de hacer aplicaciones Fiori completas sin tocar ninguna línea de código SAPUI5.

En próximos artículos descubriremos más sobre las aplicaciones de tipo Fiori List Report y aprenderemos a implementar mediante anotaciones CDS el detalle de cada uno de los registros mostrados en nuestra tabla.