Continuamos explotando el potencial de las vistas CDS y sus respectivas anotaciones para construir aplicaciones de tipo SAP Fiori List Report. Hoy vamos a aprender a construir nuestra página de detalle, llamada Object Page en nuestro SAP Fiori List Report creado en artículos anteriores.
Hasta ahora hemos visto como crear una SAP Fiori List Report paso a paso, mostrando un listado principal con información relevante al usuario que permite ser filtrado de manera ágil. Con las anotaciones CDS que veremos en este artículo, vamos a ir un pasito más allá: vamos a permitir al usuario poder pinchar sobre uno de los registro de nuestra tabla y ver cierta información relevante de detalle del registro.
Object Page: Anotaciones CDS
Para construir nuestra Object Page vamos a hacer uso de nuevas anotaciones CDS, en concreto, de las anotaciones CDS llamadas UI.facets. Estas anotaciones nos permiten construir una página de detalle con una cabecera y con una estructura a nuestro gusto según la información que queramos representar. Se puede consultar en la referencia de SAP todos los tipos de contenedores y propiedades que se pueden utilizar a través de estas anotaciones.
@UI.facet: [ { id:'idGeneralInformation' ,
type: #COLLECTION ,
label: 'General Information' ,
position: 10 } ,
{ type: #IDENTIFICATION_REFERENCE ,
label : 'General Information',
parentId: 'idGeneralInformation' ,
id: 'idIdentification' }
]
Esta es la estructura de una anotación de tipo UI.facet. Esta anotación se ubicará siempre en la cabecera de nuestro Metadata Extension. Las propiedades de cada contenedor son las siguientes:
- id ⇒ Identificador del contenedor que estamos incluyendo.
- type ⇒ tipo de contenedor que estamos añadiendo a nuestra página de detalle (Object Page). Entre los diferentes tipos podemos encontrar el tipo #LINEITEM_REFERENCE ( si queremos añadir una tabla), #FIELDGROUP_REFERENCE ( un contenedor con campos adicionales de detalle), etc. Veremos diferentes tipos en los artículos.
- label ⇒ Texto que aparece en la cabecera de contenedor e identifica la información que se muestra.
- position ⇒ Numero de posición/orden en el que aparece el contenedor en la página de detalle.
- parentId ⇒ Identificador del contenedor padre si tuviera. En el código de ejemplo mostrado, hay un contenedor de tipo #COLLECTION. Este tipo de contenedores no son visibles, simplemente actúan como padre de otros contenedores y usualmente se utilizan para agrupar contenedor de tipo #FIELDGROUP_REFERENCE para que aparezcan los campos en diferentes columnas y secciones distintas.
Para empezar, vamos a añadir una cabecera y un contenedor de tipo FIELDGROUP_REFERENCE a nuestra página de detalle, para que podamos ver cual es el resultado de este tipo de anotaciones CDS. Para ello, partimos del Metadata Extension desarrollado en artículo anteriores.
@Metadata.layer: #CUSTOMER
@Search.searchable: true
annotate view ZCDS_EJEMPLO_BLOG with
{
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
IdEmpresa;
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
CodVuelo;
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
Fecha;
@UI.lineItem: [ { position: 40 } ]
Precio;
@UI.lineItem: [ { position: 50 } ]
Distancia;
}
Incluimos el código relativo a las anotaciones CDS para añadir información de cabecera en la página de detalle:
@Metadata.layer: #CUSTOMER
@Search.searchable: true
@UI.headerInfo: { typeName: 'Vuelo' ,
typeNamePlural: 'Vuelos' ,
imageUrl: 'URL',
title: { type: #STANDARD , value: 'CodVuelo'} ,
description: { type: #STANDARD, value: 'Fecha' } }
annotate view ZCDS_EJEMPLO_BLOG with
{
@UI.facet: [
{ id: 'idCabecera' ,
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdCab'}
]
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 10, qualifier: 'hdCab' }]
IdEmpresa;
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdCab' }]
CodVuelo;
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
Fecha;
@UI.lineItem: [ { position: 40 } ]
Precio;
@UI.lineItem: [ { position: 50 } ]
Distancia;
}
Observamos en la imagen que en nuestra página de detalle aparece una cabecera con un identificador/descripción y un par de campos identificativos del objeto en la propia cabecera.
UI.headerInfo: { typeName: 'Vuelo' ,
typeNamePlural: 'Vuelos' ,
imageUrl: 'URL',
title: { type: #STANDARD , value: 'CodVuelo'} ,
description: { type: #STANDARD, value: 'Fecha' } }
Con la anotación UI.headerInfo dotamos a nuestra página detalle de un identificador de la información que estamos consultando. Añadimos un título, que en este caso es el código del vuelo (17) y una descripción (Fecha del vuelo). Además, nos permite añadir una imagen que represente al objeto que se consulta, lo cual aporta diseño e información identificativa de cara al usuario.
@UI.facet: [
{ id: 'idCabecera' ,
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdCab'}
]
Con la anotación UI.facet añadimos información a nuestra página de detalle. En este caso, solo hemos añadido un contenedor, de tipo FIELDGROUP_REFERENCE. Este tipo de contenedor muestra de manera secuencial un listado de campos que hayamos indicado en nuestro campo. Para poder representar diferentes campos en nuestra FIELDGROUP_REFERENCE, debemos indicar el targetQualifier, que, en este caso, es ‘hdCab’, e indicar mediante una anotación qué campos queremos asociar a este identificador. Por último, sabemos que es un contenedor que se incluirá en la cabecera ya que hemos indicado en la propiedad ‘purpose’ el valor #HEADER.
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdCab' }]
CodVuelo;
Con esta anotación indicamos que el campo CodVuelo debe aparecer representado en el FIELDGROUP_REFERENCE con identificador ‘hdCab’.
Una vez construida nuestra cabecera, vamos a añadir información al contenedor principal de nuestra página de detalle (Object Page). Para ello, vamos a añadir un nuevo contenedor de tipo FIELDGROUP_REFERENCE ampliando la anotación UI.facet, añadiendo un nuevo elemento que construya dicho contenedor.
@UI.facet: [
{ id: 'idCabecera' ,
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdCab'},
{ id: 'idDetalle' ,
type: #FIELDGROUP_REFERENCE,
label: 'Datos Adicionales',
targetQualifier: 'hdDetalle'}
]
Incluimos el nuevo elemento de tipo FIELDGROUP_REFERENCE. En este caso, no incluiremos la propiedad ‘purpose’ ya que no queremos indicar que se corresponde con una cabecera (#HEADER). Además, indicamos un label para representar al contenedor que estamos añadiendo.
De la misma forma que hemos hecho anteriormente, incluimos la anotación CDS para indicar qué campos queremos añadir en este nuevo contenedor.
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdDetalle' }]
Fecha;
@UI.lineItem: [ { position: 40 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 30, qualifier: 'hdDetalle' }]
Precio;
@UI.lineItem: [ { position: 50 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 40, qualifier: 'hdDetalle' }]
Distancia;
Añadiremos los campos Fecha, Precio y Distancia como datos adicionales en nuestra página de detalle. Activamos y refrescamos nuestra aplicación para ver el resultado:
El código definitivo de nuestro MetadataExtension es el siguiente:
@Metadata.layer: #CUSTOMER
@Search.searchable: true
@UI.headerInfo: { typeName: 'Vuelo' ,
typeNamePlural: 'Vuelos' ,
imageUrl: 'URL',
title: { type: #STANDARD , value: 'CodVuelo'} ,
description: { type: #STANDARD, value: 'Fecha' } }
annotate view ZCDS_EJEMPLO_BLOG with
{
@UI.facet: [
{ id: 'idCabecera' ,
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdCab'},
{ id: 'idDetalle' ,
label: 'Datos Adicionales',
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdDetalle'}
]
@UI.lineItem: [ { position: 10 } ]
@UI.selectionField: [{position: 10}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 10, qualifier: 'hdCab' }]
IdEmpresa;
@UI.lineItem: [ { position: 20 } ]
@UI.selectionField: [{position: 20}]
@Search: { defaultSearchElement: true, fuzzinessThreshold: 1 }
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdCab' }]
CodVuelo;
@UI.selectionField: [{position: 30}]
@UI.lineItem: [ { position: 30 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 20, qualifier: 'hdDetalle' }]
Fecha;
@UI.lineItem: [ { position: 40 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 30, qualifier: 'hdDetalle' }]
Precio;
@UI.lineItem: [ { position: 50 } ]
@UI.fieldGroup: [{ type: #STANDARD, position: 40, qualifier: 'hdDetalle' }]
Distancia;
}
Y con este tipo de anotación CDS y de esta forma tan sencilla, podemos añadir información al Object Page de nuestro SAP Fiori List Report. Con el artículo de hoy hemos aprendido a incluir una cabecera, donde añadimos información que identifica al objecto y datos relevantes del objeto que se consulta, y datos en el cuerpo de nuestra página de detalle, mostrando un contenedor de datos adicionales que amplian la información de nuestro objeto.
En próximos artículos seguiremos ampliando nuestra página de detalle, incluyendo nuevos tipos de contenedores, así como de elementos de otro tipo en nuestra cabecera, lo cual nos permitirá seguir ampliando la aplicación y conocer nuevas anotaciones CDS para ampliar nuestro conocimiento.