We are back at it, after some downtime, with a new chapter in the SAP CDS Annotations series. In the last article,We start with our annotations on the detail page of our Fiori List Report. Specifically, we explain how to represent relevant information on our application detail page.

If we refresh our memory, SAP Fiori List Report type applications are divided into two sections: the main list that shows the results of our search filters and the detail page where we view the detailed information of the object we are consulting.

In this article, we will continue to complete our header of our detail page. We have already seen how to add a title and a description to our page through the @ UI.headerInfo annotation. Today we will see how to complete our header with secondary information through the UI.facet annotation, which allows us to generate the content that is represented on the detail page of our Fiori List Report application to our liking.

What are UI.facets?

UI.facets are a type of interface annotations that allow us to display information organized by sections on our detail page. There are different types of these annotations that allow the information to be displayed in different ways: fieldgroups, to display containers with different relevant fields; collection, to show data lists in any of our sections; or charts, to represent the information obtained in our CDS view through graphics, among others. In our case, we will implement the UI.facets of type ‘FIELDGROUP’ to represent in our header a series of relevant information for a material.

Completing our header

In the previous article of this series, we represented through the following annotation, the most relevant data of the material by adding a title and a description in our header.

@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
}

Through the @ UI.headerInfo annotation, we can indicate which fields of our CDS will be represented as title and description, as well as what will be the image that our object will represent on the detail page.

Now, we will add the following code to create a Facet of type FIELDGROUP, which will group in our header the fields that we indicate in our CDS view.

@UI.facet: [
  // Header Facet (Object Page):
 
             { id:              'HeaderFacet',
               purpose:         #HEADER,
               type:            #FIELDGROUP_REFERENCE,
               targetQualifier: 'Fieldgroup:HeaderItemsGen',
               position:         10 }]

We define our Facet indicating the following properties:

• ID: identifier of our section
• Purpose: it is used to indicate that we want to represent the information in our header through the #HEADER value.
• Type: what type of section we want to represent. In our case, a FIELDGROUP type section.
• TargetQualifier: the data source of our section. For FIELDGROUP type sections, a fieldgroup identifier is indicated, which, as we will see below, acts as a field grouper in our CDS view.
• Position: position in which we want our Facet to be represented.

In order to represent the information in our header through the facet, we must indicate in our CDS view which fields will be included in our FIELDGROUP type section. To do this, we will use the following annotation to indicate which fields will be included in our container:

@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

Through the annotation @UI: {fieldGroup: [{qualifier: ‘Fieldgroup: HeaderItemsGen’}]}, we indicate in our CDS view those fields that will be included in our section. As we saw earlier, when we defined the Facet, the identifier “Fieldgroup: HeaderItemsGen” was indicated in the targetQualifier property. This means that all those fields annotated with said identifier will be automatically included in the section of our header of the detail page of our List Report application.

The complete code of our CDS view would look like this:

@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
}

Finally, we get a detail page with a header that shows the relevant information of a material: