Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

CDS Annotations (3): Object Page Header. Identificando nuestra página de detalle

C

Las aplicaciones de tipo Fiori List Report se componen de dos secciones principales: la página de listado inicial donde podemos filtrar por los diferentes campos de selección que hayamos definido en nuestro CDS y la página de detalle, donde observamos la información asociada al objeto del listado sobre el que hemos pulsado.

Todas las anotaciones CDS vistas hasta ahora hacían referencia a la ventana del listado y filtrado de la aplicación Fiori List Report. En estos primeros capítulos, el objetivo es aprender las anotaciones básicas para construir una aplicación con una funcionalidad completa a través de anotaciones sin necesidad de introducir ninguna línea de código en el FrontEnd. Por ello, en este y en próximos capítulos veremos las anotaciones CDS que nos permiten construir la página de detalle de nuestro Fiori List Report y así completar nuestra aplicación.

Object Page Header. Identificando nuestra página de detalle.

Existen diferentes tipos de anotaciones CDS que nos permiten representar información en la cabecera de nuestro Object Page o página de detalle.  La cabecera del Object Page debe presentar información relevante del objeto que estemos representando en la pantalla. Por ejemplo, si estamos construyendo una aplicación de detalle de productos, en la cabecera deberíamos mostrar al menos el código del producto y su descripción.

Para ello, vamos a identificar nuestro objeto con un título, una descripción y una imagen. Esto lo podemos lograr gracias a la anotación @UI.headerInfo. Esta anotación permite dotar de identidad a nuestra página de detalle, de la manera que se muestra a continuación:

  • imageUrl: permite representar una imagen en la cabecera de nuestro página de detalle. ImageTest representa un campo expuesto de una CDS, el cual tiene como valor una URL a un imagen Web.
  • title: título de nuestro objeto en la página de detalle. Se muestra con un tamaño de fuente más grande y en negrita. Dentro de la propiedad title, tenemos diferentes tipos. Los más comunes son #STANDARD (texto) y #URL (si queremos navegar a través de un enlace).
  • Description: subtítulo de nuestro objeto en la página de detalle. En este ejemplo, he seleccionado el código de material como información relevante para este campo.

De esta forma tan sencilla, a través de los campos expuestos en nuestra CDS (imageTest, Descripción y Material) podemos identificar nuestro objeto en la página de detalle:

En el próximo artículo, veremos el siguiente tipo de datos que podemos representar en la cabecera a través de la anotación @ui.Facet. En concreto, veremos las anotaciones de tipo FIELDGROUP, las cuales nos permiten añadir a nuestra cabecera aquellos campos más relevantes del objeto que estemos visualizando.

Autor del artículo

Borja Garcia

Desarrollador Full Stack de aplicaciones móviles/web SAP desde allá por 2014. Compartir conocimiento es la mejor manera de aprender.

Agregar Comentario

Fiorízate: SAP Fiori, ABAP & CDS Aprendiendo SAP compartiendo conocimiento

Categorías

Últimos artículos