Skip to Content

Refine the List Report with Additional Annotations

test
0 %
Refine the List Report with Additional Annotations
Details

Refine the List Report with Additional Annotations

November 27, 2020
Created by
November 27, 2020
Add more annotations to the list report to show additional columns and selection fields.

You will learn

  • How to add additional filter fields in the filter bar
  • How to add an additional column in the list report table
QR code

Prerequisites

In SAP Fiori elements applications, UI annotations are used to refine the user interface. All annotations are documented in the OData 4.0 Vocabularies - SAP UI Wiki page.

Step 1: Add filter field Category to the filter bar

Open the annotations.cds file located in the app folder of your service.

Annotation Cursor

There´s a second annotations.cds file below folder app/incidents. This file was created during the generation of the application and is not meant to be modified within this tutorial.

The annotation SelectionFields defines the filter fields offered in the filter bar.

Search for the SelectionFields annotation and add an additional field category_code to the existing list of fields, as shown in the coding example below. When editing the file, code completion helps to select the field.

SelectionFields : [
    incidentStatus_code,
    priority_code,
    //insert your selection fields enhancement here
    category_code
],

After saving the file, the server will be restarted and when refreshing the application, the new field is added to the filter bar.

Annotation Cursor
What is the name of the annotation to define fields in the Filter Bar?
×
Step 2: Add column Title to the list report table

To add an additional column to the list report table, you will use the annotation LineItem. Again, ensure that the annotations.cds file of the service is opened (see step 1).

Now search for the annotation LineItem of the Incidents entity and add the new column representing the field title as shown in the coding below.

LineItem : [
    {
        $Type : 'UI.DataField',
        Value : identifier,
    },
    {
        $Type                     : 'UI.DataField',
        Value                     : priority_code,
        Criticality               : priority.criticality,
        CriticalityRepresentation : #WithoutIcon,

    },
    {
        $Type : 'UI.DataField',
        Value : incidentStatus_code
    },
    {
        $Type : 'UI.DataField',
        Value : category_code
    },
    //insert your line item enhancement here
    {
        $Type : 'UI.DataField',
        Value : title
    }
],

After saving and refreshing the application, you will see the column added to the table.

Annotation Cursor

At this point, you have added a new field to the filter bar and one more column within the list report table.

In the next tutorial, you will refine the object page by adding new fields and extend it with a new section leveraging the Flexible Programming Model.

Log on to answer question
Step 3: Test yourself
What is the type property for a simple field to be shown on a table?
×

Next Steps

Back to top