Exercise 4: Define the UI layout of the SAP Fiori elements app

Introduction

In the previous exercise, you've created an UI service to expose the data from the Travel BO projection an OData-based UI service (Exercise 3).

In this exercise, you will enrich your projected Travel BO data model with UI-related metadata to enable a proper rendering of the SAP Fiori elements-based Managed Travels app. The app mainly consists of two main SAP Fiori page layouts: a List Report, which serves as entry point and displays the Travel records in a table, and an Object Page, which shows the details of the selected Travel records along with a table of the related Booking records. The details of a selected Booking record is displayed on a object page.

To do this, you'll create two CDS metadata extensions – ZAD164_C_Travel_### for the projected Travel entity and ZAD164_C_Booking_### for the projected Booking entity – to enrich the respective CDS projection views ZAD164_C_Travel_### and ZAD164_C_Booking_###, where ### is your personal suffix.

Exercise steps:

Exercise 4.1: Define the UI semantics for the Travel entity
Exercise 4.2: Define the UI semantics for the Booking entity
Exercise 4.3: Preview and test the enhanced app
Summary & Next exercise

Tip

Always replace all occurrences of the placeholder ### in the provided code snippets with your personal suffix.
Use the ADT function Find and Replace All (Ctrl+F) to quickly replace text in the source code.
Use the ADT function Quick Fix (Ctrl+1), aka Quick Assist, on an erroneous element to get help with resolving the issue.
Use the Show ABAP element info view (F2) to inspect an element in ADT editors.
Useful Keyboard Shortcuts for ABAP Development (ADT shortcuts)

Note

When building SAP Fiori elements-based apps with ABAP Cloud, you can provide the UI semantics either in the backend using ABAP CDS or using the SAP Fiori tools (Annotation Modeler) in SAP Build Code. In this workshop, we'll focus on the backend and use ABAP CDS to define the UI semantics.

Learn more: ABAP CDS Annotations | Framework-specific ABAP CDS Annotations, incl. UI | About SAP Fiori List Report and Object Page

Exercise 4.1: Define the UI semantics for the Travel entity

^Top of page

Create the CDS metadata extensions ZAD164_C_Travel_### for the Travel projection view ZAD164_C_Travel_###. Both artifacts have the same name.

🔵Click to expand!

Right-click the Travel projection view ZAD164_C_Travel_### in the Project Explorer, and choose New Metadata Extension from the context menu to start the creation wizard. The project, the package, and the extended entity are automatically prefilled in the creation wizard.

Maintain the required information and click Next > to continue.
- Name: ZAD164_C_Travel_###
- Description: MDE for Travel projection view
Assign a transport request if required, then click Next > – 🚫 do not click Finish yet. Select the metadata extension template annotateEntity under Annotate Entity (creation), and click Finish to confirm the creation.

The skeleton metadata extension is now displayed in the editor. The dummy element element_name is automatically inserted into the annotate list between the curly brakets ({ }). You can now go ahead and provide the UI semantics of the Fiori elements-based Manage Travels app

Define the UI semantics for the data of the Travel entity (root entity) that will be displayed on the SAP Fiori List Report which is the entry point of the Manage Travels app by enriching the Travel projection view with appropriate @UI annotations. The List Report will be used to display the data of the Travel root entity

The Travel data is displayed on the Travel List Report (the entry point) and Object Page in the following ways:

Click to expand!

Filter bar: A filter bar with selection criteria for following fields using the element annotation @UI.selectionField: TravelID, AgencyID, CustomerID, and OverallStatus.
Travel List report table: Following fields should be displayed on the list report table using the element annotation @UI.lineItem: TravelID, AgencyID, CustomerID, and OverallStatus.
Travel Object page: Following fields should be displayed on the object page using the element annotation @UI.identification: TravelID, AgencyID, CustomerID, BeginDate, EndDate, BookingFee, TotalPrice, Description, and OverallStatus.
Hidden data: Following fields should be removed from the field catalog on the UI using the element annotation @UI.hidden: true: TravelUUID, OverallStatusText, and LocalLastChangedAt.
Associated data: The currency code will be displayed automatically alongside the amount values of BookingFee and TotalPrice on the UI. This is enabled by the @Semantics.amount.currencyCode: CurrencyCode` annotation specified for these fields in the Travel base view.

Due to time constraints, delete the complete source code in the metadata extension ZAD164_C_Travel_###, insert the code snippet provided below (🟡📄), and replace all occurrences of ### with your personal suffix.

🟡📄Click to expand!

💡 Make use of the Copy Raw Content () function to copy the provided code snippet.

🔍 Review the source code and feel free to ask the instructors if anything is unclear. You can find explanations of the different UI annotations in the documentation.

@Metadata.layer: #CORE       
  
@UI: { headerInfo: { typeName: 'Travel',
                     typeNamePlural: 'Travels',
                     title: { type: #STANDARD, value: 'TravelID' } },
       presentationVariant: [{ sortOrder: [{ by: 'TravelID', direction: #DESC }], visualizations: [{type: #AS_LINEITEM}]  }] }

annotate entity ZAD164_C_Travel_### with
{
 @UI.facet: [{ id:            'Travel',
               purpose:       #STANDARD,
               type:          #IDENTIFICATION_REFERENCE,
               label:         'Travel',
               position:      10 },
             { id:            'Booking',
               purpose:       #STANDARD,
               type:          #LINEITEM_REFERENCE,
               label:         'Booking',
               position:      20,
               targetElement: '_Booking'}]
 @UI.hidden: true
 TravelUUID;

 @UI: { lineItem:       [{ position: 10, importance: #HIGH }],
 identification: [{ position: 10 } ],
 selectionField: [{ position: 10 }]}
 TravelID;

 @UI: { lineItem:       [{ position: 20, importance: #HIGH }],
        identification: [{ position: 20 }],
        selectionField: [{ position: 20 }]}
 AgencyID;

 @UI: { lineItem:       [{ position: 30 }],
        identification: [{ position: 30 }],
        selectionField: [{ position: 30 }]}
 CustomerID;

 @UI: { lineItem:       [{ position: 40 }],
        identification: [{ position: 40 }]}
 BeginDate;

 @UI: { lineItem:       [{ position: 50 }],
        identification: [{ position: 50 }]}
 EndDate;

 @UI: { lineItem:       [{ position: 60 }],
        identification: [{ position: 60 }]}
 BookingFee;

 @UI: { lineItem:       [{ position: 70 }],
        identification: [{ position: 70 }]}
 TotalPrice;

 @UI: { //lineItem:       [{ position: 80 }],
        identification: [{ position: 80 }]}
 Description;

 @UI: { lineItem:       [{ position: 90, importance: #HIGH }],
        identification: [{ position: 90 }],
        selectionField: [{ position: 40 }],
        textArrangement: #TEXT_ONLY }            
 OverallStatus;

 @UI.hidden: true
 OverallStatusText;

 @UI.hidden: true
 LocalLastChangedAt;        
}

Save and activate the changes.

Exercise 4.2: Define the UI semantics for the Booking entity

^Top of page

Create the CDS metadata extensions ZAD164_C_Booking_### for the Booking projection view ZAD164_C_Booking_###. Both artifacts have the same name.

🔵Click to expand!

Right-click the Booking projection view ZAD164_C_Booking_### in the Project Explorer, and choose New Metadata Extension from the context menu.

Maintain the required information and click Next >.
- Name: ZAD164_C_Booking_###
- Description: MDE for Booking projection view
Assign a transport request if required, then click Next > – 🚫 do not click Finish yet. Select the metadata extension template annotateEntity under Annotate Entity (creation), and click Finish now to confirm the creation.

The skeleton metadata extension is now displayed in the editor.

Now, define the UI semantics for displaying the data of the Booking entity on the Travel object page and the Booking object page.

The Booking data will be displayed in the following ways:

Click to expand!

Table of Bookings on the Travel Object pagee: Following fields of the Booking entity should be displayed on the table using the element annotation @UI.lineItem: BookingID, BookingDate, CustomerId, AirlineID, ConnectionID, FlightDate, FlightPrice, and BookingStatus.
Booking Object page: Following fields should be displayed on the Booking object page using the element annotation @UI.identification: BookingID, BookingDate, CustomerID, AirlineID, ConnectionID, FlightDate, FlightPrice, and BookingStatus.
Hidden data: Following fields should be removed from the field catalog on the UI using the element annotation @UI.hidden: true: BookingUUID, TravelUUID, BookingStatusText, and LocalLastChangedAt.
Associated data: The currency code will be displayed automatically alongside the amount values of FlightPrice on the UI. This is enabled by the @Semantics.amount.currencyCode: CurrencyCode` annotation specified this field in the Booking base view.

To speed up the implementation of these adjustments, simply delete the complete source code in the metadata extension ZAD164_C_Booking_###, insert the code snippet provided below (🟡📄), and replace all occurrences of ### with your personal suffix.

🟡📄Click to expand the source code!

💡 Make use of the Copy Raw Content () function to copy the provided code snippet.

🔍 Review the source code and feel free to ask the instructors if anything is unclear. You can find explanations of the different UI annotations in the documentation.

@Metadata.layer: #CORE      
  
@UI: { headerInfo: { typeName: 'Booking',
                      typeNamePlural: 'Bookings',
                      title: { type: #STANDARD, value: 'BookingID' } } }    
  
annotate entity ZAD164_C_Booking_### with
{
  @UI.facet: [{ id:       'Booking',
                purpose:  #STANDARD,
                type:     #IDENTIFICATION_REFERENCE,
                label:    'Booking',
                position: 10 }]
  @UI.hidden: true
  BookingUUID;

  @UI.hidden: true
  TravelUUID;

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

  @UI: { lineItem:       [{ position: 30 }],
         identification: [{ position: 30 }]}
  BookingDate;

  @UI: { lineItem:       [{ position: 40 }],
         identification: [{ position: 40 }]}
  CustomerID;

  @UI: { lineItem:       [{ position: 50 }],
         identification: [{ position: 50 }]}
  AirlineId;

  @UI: { lineItem:       [{ position: 60 }],
         identification: [{ position: 60 }]}
  ConnectionID;

  @UI: { lineItem:       [{ position: 70 }],
         identification: [{ position: 70 }]}
  FlightDate;
 
  @UI: { lineItem:       [{ position: 80 }],
         identification: [{ position: 80 }]}
  FlightPrice;

  @UI: { lineItem:       [{ position: 90, importance: #HIGH }],
         identification: [{ position: 90 }],
         textArrangement: #TEXT_ONLY }
  BookingStatus;

  @UI.hidden: true
  BookingStatusText;

  @UI.hidden: true
  LocalLastChangedAt;
 }

Save and activate the changes.

Exercise 4.3: Preview and test the enhanced app

^Top of page

You can now preview and play around with the enhanced Manage Travels app.

🔵Click to expand!

In the service binding ZAD164_UI_Travel_O4_###, select the leading entity (), Travel in the Entity Set and Association area, and click Preview... on the left-hand side, or simply double-click it to start the Fiori elements app preview in the browser.
Click to load the data and now check the result.

This time, the data is displayed properly, according to the layout defined in the CDS metadata extensions.

Summary & Next exercise

^Top of page

Now you've defined the UI semantics of the SAP Fiori elements-based List Manage Travels app in the backend using UI-specific ABAP CDS annotations provided in CDS metadata extensions (MDEs) for the Travel and Booking projection views.

you can continue with the next exercise - Exercise 5: Add read authorization checks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exercise 4: Define the UI layout of the SAP Fiori elements app

Introduction

Exercise 4.1: Define the UI semantics for the Travel entity

Exercise 4.2: Define the UI semantics for the Booking entity

Exercise 4.3: Preview and test the enhanced app

Summary & Next exercise

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Exercise 4: Define the UI layout of the SAP Fiori elements app

Introduction

Exercise 4.1: Define the UI semantics for the Travel entity

Exercise 4.2: Define the UI semantics for the Booking entity

Exercise 4.3: Preview and test the enhanced app

Summary & Next exercise