The Fiori List Report type applications are made up of two main sections: the initial list page where we can filter by the different selection fields that we have defined in our CDS and the detail page, where we observe the information associated with the list object about the one we clicked on.

All the CDS annotations seen so far referred to the listing and filtering window of the Fiori List Report application. In these first chapters, the objective is to learn the basic annotations to build an application with full functionality through annotations without the need to enter any line of code in the FrontEnd. For this reason, in this and in future chapters we will see the CDS annotations that allow us to build the detail page of our Fiori List Report and thus complete our application.

Object Page Header. Identifying our detail page.

There are different types of CDS annotations that allow us to represent information in the header of our Object Page or detail page. The header of the Object Page must present relevant information about the object that we are representing on the screen. For example, if we are building a product detail application, in the header we should show at least the product code and its description.

To do this, we are going to identify our object with a title, a description and an image. We can achieve this thanks to the @ UI.headerInfo annotation. This annotation allows us to give identity to our detail page, as shown below:

• imageUrl: allows to represent an image in the header of our detail page. ImageTest represents an exposed field of a CDS, which has as value a URL to a web image.
• title: title of our object on the detail page. It is displayed in a larger font size and in bold. Inside the title property, we have different types. The most common are #STANDARD (text) and #URL (if we want to navigate through a link).
• Description: subtitle of our object on the detail page. In this example, I have selected the material code as relevant information for this field.

In this simple way, through the fields exposed in our CDS (imageTest, Description and Material) we can identify our object on the detail page:

In the next article, we will see the following type of data that we can represent in the header through the @ui.Facet annotation. Specifically, we will see the FIELDGROUP type annotations, which allow us to add to our header those most relevant fields of the object that we are viewing.