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

CDS ANNOTATIONS (4): object page header. añadiendo información secundaria a nuestra cabecera.

C

Volvemos a la carga, después de un tiempo de inactividad, con un nuevo capítulo de la serie SAP CDS Anotaciones. En el último artículo, empezamos con nuestras anotaciones en la página de detalle de nuestro Fiori List Report. En concreto, explicamos cómo representar la información relevante en nuestra página de detalle de nuestra aplicación.

Si refrescamos la memoria, las aplicaciones de tipo SAP Fiori List Report se dividen en dos secciones: el listado principal que muestra los resultados de nuestros filtros de búsqueda y la página de detalle donde visualizamos la información detallada del objeto que estamos consultando.

En este artículo, vamos a continuar completando nuestra cabecera de nuestra página de detalle. Ya vimos como añadir un título y una descripción a nuestra página a través de la anotación @UI.headerInfo. Hoy veremos como completar con información secundaria nuestra cabecera a través de la anotación UI.facet, la cual nos permite generar a nuestro gusto el contenido que se representa en la página de detalle de nuestra aplicación Fiori List Report.

¿Que son los UI.facets?

Los UI.facets son un tipo de anotaciones de interfaz que permiten mostrar información organizada por secciones en nuestra página de detalle. Existen diferentes tipos de estas anotaciones que permiten mostrar la información de distinta forma: fieldgroups, para mostrar contenedores con diferentes campos relevantes; collection, para mostrar listados de datos en alguna de nuestra secciones; o charts, para representar la información obtenida en nuestra vista CDS a través de gráficos, entre otros. En nuestro caso, implementaremos los UI.facets de tipo ‘FIELDGROUP’ para representar en nuestra cabecera una serie de información relevante para un material.

Completando nuestra cabecera

En el artículo anterior de esta serie, representamos a través de la siguiente anotación, los datos más relevantes del material añadiendo un título y una descripción en nuestra cabecera.

@UI.headerInfo: { typeName: 'Producto' ,
                  typeNamePlural: 'Productos' ,
                  imageUrl: 'URL',
                  title: { type: #STANDARD , value: 'Descripcion'} ,
                  description: { type: #STANDARD, value: 'Material' } }


define view ZCDS_EJEMPLO
  as select from mara as a
    inner join   makt as b on  a.matnr = b.matnr
                           and b.spras = $session.system_language
    inner join   eina as c on a.matnr = c.matnr
    inner join   lfa1 as d on d.lifnr = c.lifnr
    inner join   mean as e on a.matnr = e.matnr
{

  key a.matnr as Material,
      b.maktx as Descripcion,
      c.idnlf as RefProveedor,
      d.lifnr as Proveedor,
      e.ean11 as EAN
}

A través de la anotación @UI.headerInfo, podemos indicar que campos de nuestra CDS se representarán como título y descripción, así como cual será la imagen que representará nuestro objeto en la página de detalle.

Ahora, añadiremos el siguiente código para crear un Facet de tipo FIELDGROUP, que agrupará en nuestra cabecera los campos que indiquemos en nuestra vista CDS.

      @UI.facet: [
        // Header Facet (Object Page):

                   { id:              'HeaderFacet',
                     purpose:         #HEADER,
                     type:            #FIELDGROUP_REFERENCE,
                     targetQualifier: 'Fieldgroup:HeaderItemsGen',
                     position:         10 }]

Definimos nuestro Facet indicando las siguientes propiedades:

  • ID: identificador de nuestra sección
  • Purpose: se utiliza para indicar que queremos representar la información en nuestra cabecera a través del valor #HEADER.
  • Type: qué tipo de sección queremos representar. En nuestro caso, una sección de tipo FIELDGROUP.
  • TargetQualifier: la fuente de datos de nuestra sección. Para las secciones de tipo FIELDGROUP, se indica un identificador de fieldgroup, que como veremos a continuación, actúa de agrupador de campos de nuestra vista CDS.
  • Position: posición en la que queremos que se represente nuestro Facet.

Para poder representar la información en nuestra cabecera a través del facet, debemos indicar en nuestra vista CDS cuales serán los campos que se incluirán en nuestra sección de tipo FIELDGROUP. Para ello, haremos uso de la siguiente anotación para indicar qué campos se incluirán en nuestro contenedor:

      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      c.idnlf as RefProveedor,
      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      d.lifnr as Proveedor,
      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      e.ean11 as EAN

A través de la anotación @UI: {fieldGroup : [ { qualifier: ‘Fieldgroup:HeaderItemsGen’} ] }, indicamos en nuestra vista CDS aquellos campos que se incluirán en nuestra sección. Como vimos anteriormente, cuando definimos el Facet, se indicó en la propiedad targetQualifier el identificador ”Fieldgroup:HeaderItemsGen”. Esto significa que, todos aquellos campos anotados con dicho identificador se inclurián automáticamente en la sección de nuestra cabecera de la página de detalle de nuestro aplicación List Report.

El código completo de nuestra vista CDS quedaría así:

@AbapCatalog.sqlViewName: 'ZVW_EJEMPLO'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@OData.publish: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Ejemplo'

@UI.headerInfo: { typeName: 'Producto' ,
                  typeNamePlural: 'Productos' ,
                  imageUrl: 'URL',
                  title: { type: #STANDARD , value: 'Descripcion'} ,
                  description: { type: #STANDARD, value: 'Material' } }


define view ZCDS_EJEMPLO
  as select from mara as a
    inner join   makt as b on  a.matnr = b.matnr
                           and b.spras = $session.system_language
    inner join   eina as c on a.matnr = c.matnr
    inner join   lfa1 as d on d.lifnr = c.lifnr
    inner join   mean as e on a.matnr = e.matnr
{
      @UI.facet: [
        // Header Facet (Object Page):

                   { id:              'HeaderFacet',
                     purpose:         #HEADER,
                     type:            #FIELDGROUP_REFERENCE,
                     targetQualifier: 'Fieldgroup:HeaderItemsGen', // Refers to lineItems with @UI.fieldGroup: [{qualifier: 'Fieldgroup:HeaderItems'}]
                     position:         10 }]

  key a.matnr as Material,
      b.maktx as Descripcion,
      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      c.idnlf as RefProveedor,
      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      d.lifnr as Proveedor,
      @UI: { fieldGroup:     [ { qualifier: 'Fieldgroup:HeaderItemsGen'} ] }
      e.ean11 as EAN
}

Finalmente, obtenemos una página de detalle con una cabecera que muestra la información relevante de un material :

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