How to find errors in metadata extensions – No item data shown in object page

When preparing an exercise for the ABAP RESTful Application programming model (RAP) I ran into an issue that no items (bookings) of the child entity were shown on the object page.

It took me a while to find the root cause of the error. A colleague finally gave me the hint to search for error messages in the communication between the SAP Fiori Elements preview UI and my backend service.

Here is how I found it using the developer trace in Chrome.

1. Press F12 and select the Network tab
2. Search for the string $ to find the $metadata requests
3. Select the second request from which you only see ?sap-language=EN&sap-client=100 (which is the request for the annotation file)
4. Click on the preview tab and then on the text. Pressed Ctrl+F to search here (if you not select the entry a global search would be performed instead)

In the following window search for the string “err”.

Here I found the root cause namely

Property ‘Bookingld’ of annotation ‘UI.HEADERINFO.TITLE’ in proj./view ‘Booking’ not found

@Metadata.layer: #CUSTOMER
@UI: {
  headerInfo: {
    typeName: 'Booking',
    typeNamePlural: 'Bookings',
    title: {
      type: #STANDARD,
      label: 'Booking',
      value: 'BookingId'
    }
  }
}
annotate view ZC_RAP_Booking_U_1111
    with 
{
  @UI.facet: [ { id:            'Booking',
                   purpose:       #STANDARD,
                   type:          #IDENTIFICATION_REFERENCE,
                   label:         'Booking',
                   position:      10 } ]

  @UI.lineItem: [ {
    position: 10 ,
    importance: #HIGH,
    label: 'TravelId'
  } ]
  @UI.identification: [ {
    position: 10 ,
    label: 'TravelId'
  } ]
  TravelID;

  @UI.lineItem: [ {
    position: 20 ,
    importance: #HIGH,
    label: 'BookingId'
  } ]
  @UI.identification: [ {
    position: 20 ,
    label: 'BookingId'
  } ]
  BookingID;

So as you can see I made a typo in the header section.

Here I entered for value BookingId

headerInfo: {
    typeName: 'Booking',
    typeNamePlural: 'Bookings',
    title: {
      type: #STANDARD,
      label: 'Booking',
      value: 'BookingId'
    }
  }

instead of the correct value of the field BookingID

headerInfo: {
    typeName: 'Booking',
    typeNamePlural: 'Bookings',
    title: {
      type: #STANDARD,
      label: 'Booking',
      value: 'BookingID'
    }
  }

So you can see that small typos can cause some headaches.

And SAPUI5 was right that

Property ‘Bookingld’ of annotation ‘UI.HEADERINFO.TITLE’ in proj./view ‘Booking’ not found

I raised an internal ticket for this since code completion in the meta data extension editor would have suggested to enter the correct field name BookingID.

But it does not show an error when you enter an incorrect value as I did since I copied and pasted the code from another implementation.