Skip to content

Latest commit

 

History

History
172 lines (117 loc) · 9.62 KB

README.md

File metadata and controls

172 lines (117 loc) · 9.62 KB

Home - RAP110

Exercise 5: Adjust the UI Semantics in the Metadata Extensions

Introduction

In the previous exercise, you've implemented the late numbering for the late numbering for drawing the primary keys of the travel and the booking BO entities at a later time, during the first storing of the data (see Exercise 4).

In this exercise, you will adjust the layout of the list reports and object pages of your Travel App by enhancing the metadata extension metadataextension of the travel and the booking BO entities with UI semantics in form of UI-specific annotations (@UI).

Exercises:

Reminder: Do not forget to replace the suffix placeholder ### with your assigned suffix in the exercise steps below.

About UI Semantics in RAP

Click to expand!

Develop UI Semantics

UI-specific CDS annotations can be used to solve the most common UI layout tasks in SAP Fiori elements apps built with RAP.

Read more: Develop UI Specifics

UI Annotations

UI annotations represent semantic views on business data through the use of specific patterns that are independent of UI technologies. They can be defined either in the ABAP system using UI-specific ABAP CDS annotations or in the SAP Fiori tools.

Read more: All CDS Annotations | UI Annotations

About the SAP Fiori elements Feature Showcase App for RAP and ABAP CDS

The SAP Fiori Elements Feature Showcase App for RAP provides a reference technical app that showcases the SAP Fiori Elements UI features which can be implemented using ABAP CDS annotations. The feature showcase app is developed using the ABAP RESTful Application Programming Model (RAP) for oData V4 and is transactional- and draft-enabled.

Read more: SAP Fiori elements Showcase App@SAP Blogs | SAP Fiori elements Showcase App@GitHub

Exercise 5.1: Adjust the UI Semantics in the Travel Metadata Extension 💡

^Top of page

Adjust the appearence of the generated Fiori elements based Travel App by adding the action acceptTravel, rejectTravel, and createTravel, and specifying a colored-based indication of the overall travel status OverallStatus for the travel BO entity.

💡 There are two (2) ways to complete exercise 5.1:

  • Option 1️⃣: This is the recommended option. Replace the complete source code of the metadata extension ddlx iconZRAP110_C_TRAVELTP_### with the source code provided in the source code document linked below and replace the placeholder ### with your assigned suffix. The changes are marked with an appropriate comment in the source code document. Then proceed directly with Exercise 5.2.

    📄 Source code document: ddlx icon CDS Metadata extension ZRAP110_C_TravelTP_###

  • Option 2️⃣: Carry out the steps described below in sequence.

🔵 Click to expand!

  1. Open the CDS metadata extension of the projected travel entity ddlx iconZRAP110_C_TRAVELTP_###.

  2. Specify the appearance of both instance actions acceptTravel and rejectTravel on the list report and the object page of the travel entity.

    For that, replace the annotation block placed before the element TravelID with the code snippet provided below as shown on the screenshot.

      @UI.lineItem: [
    { position: 10 , importance: #HIGH }
   ,{ type: #FOR_ACTION, dataAction: 'acceptTravel', label: 'Accept Travel' }     
   ,{ type: #FOR_ACTION, dataAction: 'rejectTravel', label: 'Reject Travel' } 
  ]
  @UI.identification: [
    { position: 10 , importance: #HIGH }
   ,{ type: #FOR_ACTION, dataAction: 'acceptTravel', label: 'Accept Travel' }  //added line
   ,{ type: #FOR_ACTION, dataAction: 'rejectTravel', label: 'Reject Travel' }  //added line   
  ]
  @UI.selectionField: [ {
    position: 10
  } ]
    Travel MDE

  3. Specify a color-based indicator for the overall status OverallStatus on the list report and the object page of the travel entity instance. The criticality will be determined by the virtual element OverallStatusIndicator.

    For that, add the attribute criticality to the annotations @UI.lineItem and @UI.identification for the element OverallStatus as shown on the screenshot.

    , criticality: 'OverallStatusIndicator'
    Travel MDE

  4. Save save icon (Ctrl+S) and activate activate icon (Ctrl+F3) the changes.

Exercise 5.2: Adjust the UI Semantics in the Booking Metadata Extension 💡

^Top of page

Enhance the booking metadata extensionmetadataextensionZRAP110_C_BOOKINGTP_### to change the appearence of the generated Fiori elements based Travel App. You will define the criticality for the booking status (BookingStatus) and display the virtual element RemainingDaysToFlight as progress bar on the UI.

💡 There are two (2) ways to complete exercise 5.2:

  • Option 1️⃣: This is the recommended option. Replace the complete source code of the metadata extension ddlx iconZRAP110_C_BOOKINGTP_### with the source code provided in the source code document linked below and replace the placeholder ### with your assigned suffix. The changes are marked with an appropriate comment in the source code document. Then proceed directly with Exercise 5.3.

    📄 Source code document: ddlx icon CDS Metadata extension ZRAP110_C_BookingTP_###

  • Option 2️⃣: Carry out the steps described below in sequence.

🔵 Click to expand!

  1. Open the CDS metadata extension ddlx iconZRAP110_C_BOOKINGTP_###.

  2. Specify the virtual element BookingStatusIndicator as criticality for the booking status by adding the attribute criticality to the element annotations @UI.lineItem and @UI.identification for the element BookingStatus as shown on the screenshot.

    ,criticality: 'BookingStatusIndicator'
    Booking MDE

  3. Add the virtual element RemainingDaysToFlight to the list report and the object page, and specify its visualization as progress bar using the annotation @UI.dataPoint. The virtual elements DaysToFlightIndicator and InitialDaysToFlight are respectively specified as its criticality and targetValue.

    Insert the code snippet below to the metadata extension after the element BookingStatus as shown on the screenshot.

    @UI: {
 dataPoint: { title: 'Days to Flight Indicator',
              criticality: 'DaysToFlightIndicator',
              targetValue: #(InitialDaysToFlight),
              visualization: #PROGRESS  },
lineItem:       [{ type: #AS_DATAPOINT, position: 110, importance: #HIGH}],
identification: [{ type: #AS_DATAPOINT, position: 110 }]  }
RemainingDaysToFlight;
    Booking MDE

  4. Save save icon (Ctrl+S) and activate activate icon (Ctrl+F3) the changes.

Exercise 5.3: Preview and Test the Enhanced Travel App

^Top of page

You can now preview and test the changes by creating a new travel BO instance in the Travel app.

⚠Please note⚠ that clicking on the Accept Travel and Reject Travel buttons at this stage will lead to errors on the UI, because they are not yet implemented.

🔵 Click to expand!

  1. Refresh your application in the browser using F5 if the browser is still open -
    or go to your service binding srvb iconZRAP110_UI_TRAVEL_O4_### and start the Fiori elements App preview for the Travel entity set.

    Booking MDE

Summary

^Top of page

Now that you've ...

  • adjusted the UI semantics in the metadata extensions by with criticality and datapoint,
  • previewed the enhanced app,

you can continue with the next exercise – Exercise 6: Implement the Base BO Behavior - Validations