Extend the Object Page by Adding More Functionality

1. Open the object page of your application by clicking one of the incidents within the list report table. You´ll see the field group Incident Details on the Incident Overview section.

   

2. To add another field to the field group Incident Details, proceed as follows:

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

   

   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.

   Data fields shown on the object page are collected within field groups. The annotation to be used is called FieldGroup.

   Search for the field group with the qualifier #IncidentDetails and add the data field description to the field group:

   FieldGroup #IncidentDetails : {
       $Type : 'UI.FieldGroupType',
       Data : [
           {
               $Type : 'UI.DataField',
               Value : identifier
           },
           {
               $Type : 'UI.DataField',
               Value : title
           },
           //insert your field group enhancement here
           {
               $Type : 'UI.DataField',
               Value : description
           }
       ]
   },
   

3. After saving the file and refreshing the application, you´ll see the additional field Incident Description within the field group Incident Details.

   

In the previous step, you added a new field to an existing field group. Now you will add a new field group to the section Incident Overview. Code completion will support you to easily enter the correct syntax.

1. In the opened annotations file annotations.cds, place the cursor just behind the existing group #IncidentDetails and trigger the code completion support by pressing CTRL + Space.

   Type in Field to filter the list of options and choose FieldGroup.

   

   The annotation is added along with its basic structural elements. The cursor is placed between Fieldgroup and the colon.

   //insert your new field group here
   FieldGroup  : {
       $Type : 'UI.FieldGroupType',
   
   },
   

2. Type #GeneralInformation to add a qualifier and press the Tab key to move the cursor inside the curly brackets.

   Again press CTRL + Space and select the property Data. The property is added and the cursor is moved inside the collection represented by the square brackets.

   //insert your new field group here
   FieldGroup #GeneralInformation : {
       $Type : 'UI.FieldGroupType',
       Data : [
   
       ],
   },
   

3. Again press CTRL + Space and select Record "DataField" from the dropdown.

   A data field record is added along with its required value. The cursor is placed inside the record’s curly brackets. Enter the property priority_code.

   //insert your new field group here
   FieldGroup #GeneralInformation : {
       $Type : 'UI.FieldGroupType',
       Data : [
           {
               $Type : 'UI.DataField',
               Value : priority_code,
           },
       ],
   },
   

4. Apply the same process to add the fields category_code and incidentStatus_code.

   //insert your new field group here
   FieldGroup #GeneralInformation : {
       $Type : 'UI.FieldGroupType',
       Data : [
           {
               $Type : 'UI.DataField',
               Value : priority_code,
           },
           {
               $Type : 'UI.DataField',
               Value : category_code,
           },
           {
               $Type : 'UI.DataField',
               Value : incidentStatus_code,
           },
       ],
   },
   

   The content of sections and field groups is defined within the facets annotation. To see your new field group in the section Incident Overview, you need to reference it in the facets definition.

5. In the annotations file, place the cursor below the comment

   //insert your reference facet enhancement here

   and press CTRL + Space. Choose Record (full) "ReferenceFacet".

   You can filter the list of values by simply typing a few characters, for example ref.

   The inserted structure that you see has the property-value pair $Type : 'UI.ReferenceFacet' and three other properties that you have to fill with content:

   //insert your reference facet enhancement here
   {
       $Type : 'UI.ReferenceFacet',
       Target : '@UI.FieldGroup#GeneralInformation',
       Label : '{i18n>GeneralInformation}',
       ID : 'GeneralInformationFacet',
   },
   

   The content of property Label adds a language-dependent label to the field group.

6. After saving the file and refreshing the application, you´ll see the additional field group General Information within the section Incident Overview.

   

Now you are going to add a new column to the object page table Incidents Process Flow showing the criticality of the listed items.

As already explained in the previous tutorial Refine the List Report with Additional Annotations, the content of tables is defined by the LineItem annotation.

1. In the annotations.cds file, navigate to the LineItem annotation of the IncidentFlow entity and insert the Record "DataField" for the new column.

   Select property Value and choose stepStatus.

   

2. Add the property Criticality and select criticality as content of the property.

   annotate service.IncidentFlow with @(UI : {
       LineItem : [
         //insert your column enhancement here
         {
             $Type : 'UI.DataField',
             Value : stepStatus,
             Criticality : criticality,
         },
   

3. Save the annotations file, refresh the application and you will see the new column added to the object page table.

   

At this point, your list report object page application is complete.