Creating a List Report

In this exercise, you will add an ABAP CDS metadata extension for the projection view of the Travel entity. You can put all the UI relevant annotations in it.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the OData service package that you generated previously opened in ADT.

2. Expand Core Data Services within ZFE_TRAVEL_######, where ZFE_TRAVEL_###### is the unique ID of your package.

3. Select and expand Data Definitions. You can see the three projection views for which you can create UI annotations.

4. Double-click ZC_FE_TRAVEL_###### from Data Definitions. The projection view for the Travel entity opens.

5. Create a metadata extension for the Travel entity.

   1. Select and right-click ZC_FE_TRAVEL_###### .

   2. Choose New Metadata Extension. The New Metadata Extension dialog opens.

   3. Ensure that the name of the metadata extension is entered as ZC_FE_TRAVEL_###### .

   4. Enter the description as UI annotations for the Travel entity.

   5. Select Next. The Select Transport Request opens.

   6. Select Next again. The Templates are displayed.

   7. Select Finish. You can see that a metadata extension has been generated. The annotation ZC_FE_TRAVEL_###### is your projection view. You can add all the UI relevant annotations for the Travel entity into this file.

6. Press CONTROL + SPACE. From the subsequent dropdown, select #CORE(annotation). You have selected #CORE as the value for the @Metadata.layer.

7. Expand Metadata Extensions. You can see the newly created metadata ZC_FE_TRAVEL_###### extension in the Metadata Extension folder.

In this exercise, you will learn how to add columns to the table displaying travels. To do so, you have to annotate the corresponding fields with the ABAP CDS @UI.lineItem annotation.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. Open the app preview in your browser. The table is not displaying any columns.

2. Open the Travel entity projection view in ADT.

   1. You have the OData service package that you generated in a previous exercise opened in ADT.

   2. Select and double-click ZC_FE_TRAVEL_###### that is available within the Data Definitions. The projection view for the Travel entity opens.

   3. Copy the following fields that you are going to use to add annotations:

      • TravelID
      • AgencyID
      • CustomerID
      • BeginDate
      • EndDate
      • BookingFee
      • TotalPrice
      • OverallStatus
      • LastChangedAt

3. Paste all the selected fields from the projection view to the metadata extension.

   1. Double-click ZC_FE_TRAVEL_###### from within the Metadata Extensions.

   2. As shown in the following sample code, paste all the fields from the projection view of the Travel entity for which you want to add the @UI.lineItem annotation.

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011
      {
      TravelID;
      AgencyID;
      CustomerID;
      BeginDate;
      EndDate;
      BookingFee;
      TotalPrice;
      OverallStatus;
      LastChangedAt;
      }

4. Add the ABAP CDS @UI.lineItem one line above the field.

   1. Start typing @UI.lineItem one line above the field.

   2. Press CTRL + SPACE on your keyboard to see annotation suggestions.

   3. Select and double-click @lineItem: [{}] (annotation).

5. Add the position property of the @UI.lineItem annotation.

   1. Press CTRL + SPACE on your keyboard.

   2. Select and double-click @position: (annotation).

   3. Enter 10 as the position value. The TravelID field will be displayed as the first column of the table.

   4. Follow these steps for each field. Ensure that you enter the position value in consecutive order for the rest of the fields. In this case, the position value for the second field is 20, for the third field it is 30, and so on.

6. Click Activate from the menu bar to save and activate your changes.

7. Open the app preview in your browser to see all the annotated fields.

   1. Expand the Business Services folder from the Project Explorer.

   2. Expand the option Service Bindings from within the Business Services.

   3. Double-click ZUI_FE_TRAVEL_######_O4.

   4. Select Travel from Entity Set and Association of the Service Version Details tab in the opened service binding.

   5. Select Preview. The app preview displays all the fields that were annotated with @UI.lineItem as table columns.

8. Select Go. The table data is displayed.

9. Select and click the first entry in the table. The object page of the selected table entry gets displayed. This object page is empty as the corresponding annotations have not been maintained yet.

In this exercise, you will add theTravelID, AgencyID, and CustomerID fields to the filter bar of the list report.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the metadata extension open for the Travel projection view in ADT.

2. Annotate TravelID with @UI.selectionField.

   1. Start typing @UI.selection before the TravelID field.

   2. Select and double-click @selectionField: [{}] (annotation) from the subsequent list.

3. Make TravelID the first filter field on the UI.

   1. Place the cursor within the curly brackets for @UI. selectionField: [{}].

   2. Select and double-click @position: (annotation) from the options.

   3. Enter 10 as the position property of the @UI.selectionField annotation. This way, TravelID becomes the first filter field on the UI.

4. Annotate the AgencyID and CustomerID with @UI.selectionField in the same way as described for TravelID. Ensure that you enter the position value in consecutive order for the rest of the fields. In this case, the position value for the second field is 20, for the third field it is 30, and so on.

5. Click Activate from the menu bar to save and activate your changes.

6. Open the app preview in your browser to see all the annotated filter fields.

   1. Double-click ZUI_FE_TRAVEL_######_O4.

   2. Select Travel from the Entity Set and Association of the Service Version Details tab in the opened service binding.

   3. Select Preview. The app preview displays the Travel ID, Agency ID, and Customer ID as filter bar fields now. The Search field and Editing Status are added to the filter bar by default.

7. Select Go. The table data is displayed.

8. Filter the table data from the Agency ID field.

   1. Select the value help option for Agency ID.

   2. Choose the first item from the generated list within the Search and Select tab.

   3. Select OK.

   4. Select Go from the list report. You can see that the table data is filtered according to the filter criteria you've selected before.

In this exercise, you will add criticality color to the Overall Status values. The Overall Status column displays the overall status of the travel, where O is open, A is accepted, and X is canceled. Based on the criticality colors, the accepted status is displayed in green, open status - in orange, and canceled status - in red. You will also add corresponding icons to these values.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. The Highlighting Line Items Based on Criticality document of SAP Fiori elements is opened. You can see the possible values for criticality.

2. You have the metadata extension open for the Travel projection view in ADT.

3. Double-click ZI_FE_TRAVEL_###### from within the Data Definitions. The ABAP CDS view for the Travel entity is opened. The OVERALL_STATUS field is available in the generated view.

4. As shown in the following sample code, add a virtual element called OverallStatusCriticality containing the mapped values of the OVERALL_STATUS.

   Code Snippet

   Copy codeSwitch to dark mode

   123456
   case OVERALL_STATUS
      when 'O' then 2
      when 'A' then 3
      when 'X' then 1
      else 0
   end   as OverallStatusCriticality,

5. Click Activate from the menu bar to save and activate your changes.

6. Add the newly created field to the draft table for the Travel entity.

   1. Expand Behavior Definitions from the Project Explorer.

   2. Double-click ZI_FE_TRAVEL_######. Click Activate from the menu bar.

   3. You can see an error icon for the draft table.

   4. Select the error icon. The error message is expanded.

   5. Double-click on the message. The overallstatuscriticality field is added to the draft table of the Travel entity.

7. Click Activate again from the menu bar to save and activate your changes.

8. Add the newly created field to the projection view.

   1. Double-click ZC_FE_TRAVEL_###### from the Project Explorer.

   2. Scroll down to OverallStatus and add the OverallStatusCriticality field to the projection view.

   3. Click Activate from the menu bar to save and activate your changes.

9. Add the criticality property as OverallStatusCriticality to the @UI.lineItem annotation for the OverallStatus field.

   1. Double-click ZC_FE_TRAVEL_###### from within the Metadata Extensions folder of Project Explorer. The metadata extension opens for the Travel entity.

   2. Add the criticality: 'OverallStatusCriticality' property of the @UI.lineItem annotation to OverallStatus. This property is to be added right after the position property. You can annotate it as shown in the following sample code:

      Code Snippet

      Copy codeSwitch to dark mode

      12
      @UI.lineItem: [{position: ##, criticality: 'OverallStatusCriticality'}]
      OverallStatus;

   3. Click Activate from the menu bar to save and activate your changes.

10. The changes in ADT are now complete. Switch to the app preview in your browser.

11. Select Go. The Overall Status column displays the criticality color and overall status values.

In this exercise, you will replace the codes in the Overall Status column of the list report with meaningful texts.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. In ADT, you have Data Definitions open in the Project Explorer.

2. Check the text provider view.

   1. Double-click ZI_FE_TRAVEL_###### from within Data Definitions.

   2. You can see that the association to the text provider view for TravelStatus is already defined.

   3. Scroll down. You can see that the association _TravelStatus is exposed in the Travel CDS view.

3. Add the text field from the text provider view to the projection view of the Travel entity.

   1. Ensure that the text provider view is open for travel status by double-clicking ZI_FE_STAT_######.

   2. Press the F8 function key to display the text value of the view.

   3. Double-click ZC_FE_TRAVEL_######. The projection view of the Travel entity opens.

   4. Add a new field _TravelStatus.TravelStatusText as TravelStatusText containing a travel status text to the projection view.

4. Annotate OverallStatus with @ObjectModel.text.element in the project view.

   1. You have the projection view of the Travel entity opened.

   2. Add the @ObjectModel.text.element: ['TravelStatusText'] annotation to the OverallStatus field. Note that the @ObjectModel annotation is required by the CDS runtime and is therefore added directly in the projection view and not in the metadata extension.

5. Click Activate from the menu bar to save and activate your changes.

6. Switch to the app preview in your browser. You can see the texts in addition to the codes for Overall Status column. You must now hide the codes so that only the required text is visible.

7. Add the @UI.textArrangement annotation to display just a text without the code.

   1. Expand the Metadata Extensions from the Project Explorer in ADT.

   2. Double-click ZC_FE_TRAVEL_######. The metadata extension opens for the Travel projection view.

   3. Focus on the OverallStatus line item.

   4. Add the @UI.textArrangement: #TEXT_ONLY annotation to the OverallStatus. This value ensures that only text is visible on the UI and the code appearing in brackets remains hidden.

8. Click Activate again from the menu bar to save and activate your changes.

9. Switch to the app preview in your browser. You can now see that the codes are hidden.