SAP Learning Journey

Explaining Basic Annotations for List Report

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Explain the basic annotations for creating a list report
  • Describe options for adjusting the display of columns

List Report

List Report Overview

The list report is a full screen floorplan. It can also be used in flexible column layout, where it is usually displayed in the first column.

The list report page is based on the dynamic page, and is divided into a header area and a content area, as defined by the dynamic page layout.

Note
The footer toolbar: If needed, use a footer toolbar to display the messaging button and finalizing actions.

Basic Annotations for Creating a List Report

Mandatory Annotations

In the figure below you can see how mandatory CDS annotations are generated at runtime in OData annotations and therefore affect UI in a list report.

The following are typical mandatory annotations:

@OData.publish:true

Auto exposures the CDS view as OData Service.

@UI.headerInfo.typeNamePlural

Determines the text displayed on the upper left corner of the list report.

Annotations for Adding Columns to Report

Annotation @UI.lineItem is used to set default columns for list report.

The Data types for @UI.lineItem are a collection of Data Fields, but in most cases only one @UI.lineItem exists for a field.

The mandatory property is position, which determines the sequence of columns. The label for each field comes from field label of data element for a fields.

You can also add a calculated field to a list report. Since the fields do not reference a data element, you need to either assign it a label by using @UI.lineItem.lable, or convert the data type to a data element by using function cast.

Lets' check your understanding of the concept.

Add Columns with Guided Development

This guide helps you add new columns to a table by configuring the annotation term UI.LineItem, which represents an ordered collection of records representing data fields in a table. You can also rearrange and delete new and existing columns.

Annotations for Semantic Information

The following items should be noted when adding semantic Information for amount/quantity fields:

  • For amount and quantity fields, you should point out where to find its currency/unit fields.
  • Fields selecting from DDIC or other CDS entities may already have this information. If it is defined correctly, the currency/unit displays with the amount/quantity fields.

Let's compare two code snippet.

Options for Adjusting the Display of Columns

The controls used in a list report are designed for all clients.

Different clients have different screen widths. The fields displayed in a Smart Phone should be smaller than a desktop browser.

Use @UI.lineitem.importance to determine in which clients the field should display:

  • #HIGH: Default value, display in all clients

  • #MEDIUM: Only display in desktop browser or tablet

  • #LOW: Only display in desktop browser

The figure shows that the UI Importance of the SalesOrderID column is set to Low in the Guided Development. This means that the column will only display in desktop browser. 

Hiding Fields

Some fields are not suitable for displaying on the report. You can use @UI.hidden to hide them in the table settings dialog.

Create a Basic List Report

ExerciseStart Exercise

Business Example

In this exercise, you will use basic annotations to create a basic list report. Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Log in to the S4D SAP System using ABAP Development Tools for Eclipse (ADT)

Steps

  1. If your Eclipse is not open, open it.

  2. Navigate to the package ZTRAIN_## in the favorite packages of your ABAP project.

    1. Choose the small triangle on the left side of your ABAP project, enter your password to the SAP system when prompted, and then choose OK.

    2. Expand the Favorite Packages folder by selecting the small triangle. Find your package ZTRAIN_##.

Task 2: Create and Activate a CDS View

Steps

  1. Create a blank CDS view using following information:

    CDS View Information

    FieldValue
    NameZCDS_UX403_LIST_##
    DescriptionUX403 Basic List Report

    1. Right-click your package and from the context menu, choose New → Other ABAP Repository Object.

    2. In the ABAP Repository Object step, enter data in the search field, choose Data Definition under the Core Data Services folder, and choose Next.

    3. In the Data Definition step, complete the Name and Description fields according to the task description, and choose Next.

    4. In the Selection of Transport Request step, select the Choose from requests in which I am involved button. Select an available transport request from the table with the owner TRAIN-## and choose Next.

    5. In the Templates step, deselect Use the selected template option, and choose Finish.

    6. A blank CDS view has been created.

  2. Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise07_Template.txt" into the code editor of the CDS view.

    Note
    You must replace all instances of ## in the source code before you activate it. There are two ## in the source code. The first is after @AbapCatalog.sqlViewName and the second is after define view.

    1. Open the File Explorer from the taskbar.

    2. Double-click Application (N:).

    3. Double-click UX403.

    4. Double-click Templates.

    5. To open the template file, double-click the file mentioned in the task description.

    6. Select all the content in the text file, and on your keyboard, press Ctrl + C to copy the content to the clipboard.

    7. Switch back to the ADT. In your blank CDS view, press Ctrl + V on your keyboard to paste the content.

    8. Replace all instances of ## in the CDS view to your group number.

  3. Save your changes and activate your CDS view.

Task 3: Add Basic Annotation to your List Report

Steps

  1. Add an annotation to set the header of your report Sales Orders.

    1. In the source code of your CDS view, add @UI.headerInfo.typeNamePlural: 'Sales Orders' after the line @EndUserText.label: 'UX403 Basic List Report'.

  2. Add the following fields with @UI.lineItem.position annotations to the table of your list report:

    Fields to Add to the Table of the List Report

    OrderField Name
    10SalesOrderID
    20CustomerID
    30CustomerName
    40GrossAmount
    50NetAmount
    60TaxAmount

    1. In the source code of your CDS view, add @UI.lineItem.position annotations before the corresponding fields by using the information in the task description. For example, add the annotation @UI.lineItem.position: 10 in the line before key SalesOrder as SalesOrderID.

    2. Your implementation should look like the following figure:

  3. Save your changes and activate your CDS view.

Task 4: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_LIST_## and reactivate it.

    1. Add the annotation @OData.publish: true after @UI.headerInfo.typeNamePlural: 'Sales Orders'.

    2. Your implementation should look like the following figure:

    3. Save your changes and activate your CDS view.

    4. A warning appears on the left of @OData.publish: true to tell you that the OData service is generated but not activated. You can see it by hovering your mouse over the warning icon.

  2. Publish your new OData service on the S4D SAP system.

    1. Open the SAP Logon over the taskbar.

    2. Log on to the SAP system S4D with your user credentials.

    3. Enter /N/IWFND/MAINT_SERVICE in the input field on the top left of the window, then press Enter.

    4. Choose the Add Service icon in the application toolbar.

    5. In the Add Selected Service window, select LOCAL for the System Alias, enter your CDS view name ZCDS_UX403_LIST_##_CDS for Technical Service Name, and choose Get Services.

    6. Choose the line of service in the search result table, and choose the Add Selected Services icon.

    7. In the Add Service popup window, enter your package ZTRAIN_## in the Package Assignment field, and choose Continue (green checkmark).

    8. In the popup windows that follow, make sure that your workbench request is selected and choose Continue (green checkmark).

    9. A popup window with successful information appears. Choose Continue (green checkmark) to finish the publish process.

Task 5: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Open the SAP Business Application Studio.

  2. Create an SAP Fiori elements project using the following information:

    SAP Fiori Elements Project Information

    FieldValue
    TemplateList Report Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_LIST_##_CDS
    Main entityZCDS_UX403_LIST_##
    Module namebasiclist.student##
    Application titleBasic List Report
    DescriptionBasic List Report.

    1. Choose File → New Project from Template in the SAP Business Application Studio.

    2. Choose SAP Fiori application and choose Start.

    3. Choose SAP Fiori as Template Type and List Report Page as Floorplan. Then choose Next.

    4. Choose Connect to an SAP System for Data source.

    5. Choose S4D_100 for System.

    6. Enter LIST_##_CDS into the input field for Service and select your service ZCDS_UX403_LIST_##_CDS. Choose Next.

    7. In the Entity Selection screen, select ZCDS_UX403_LIST_## for Main entity. Choose Next.

    8. In the Project Attributes screen, enter basiclist.student## as Module name, Basic List Report as Application title and Basic List Report. as Description. Make sure that your previous folder is not selected in the Project Folder Path. Select the Project folder. It should look like this /home/user/projects/. Choose Finish.

    9. The dependencies will be installed. Wait until you can see the notification saying that the project has been generated.

    10. Open the Workspace with your new Project. Choose File, select Open Folder, and choose your new Project.

Task 6: Identify and Analyze Problems in your List Report

Steps

  1. Run your list report and leave it open.

    1. Right-click on the webapp folder in your Project and select Preview Application.

    2. If you have your popups allowed, a new window with the running application will open.

    3. In the opened application, choose the Go button to display the sales orders in the list report.

    4. Leave the application open.

  2. Identify and explain problems encountered with the TaxAmount field.

    1. Switch back to ADT and open the tab of your CDS view ZCDS_UX403_LIST_##.

    2. Navigate to and examine the SEPM_I_SalesOrder CDS view. Do so by putting your cursor on SEPM_I_SalesOrder in your source code and, on your keyboard, pressing F3.

  3. Open the settings page of the table of your list report, and notice that the Currency Code column can be selected into the output list. Since it is not suitable to display as a standalone column just choose Cancel.

    1. Switch back to Google Chrome and choose the Settings button on the top-right corner of the table of the list report.

    2. Note that the Currency Code column, which is not suitable to display as a standalone column, is available to add to the table.

    3. Choose Cancel.

  4. Switch the screen size to 800*600 over the device mode in Chrome DevTools, and explain what happens. Notice how the TaxAmountfield is displayed. To open Chrome DevTools, on your keyboard, press Ctrl + Shift + I or right-click somewhere in your SAP Fiori elements app and choose Inspect. To toggle the device toolbar, on your keyboard, press Ctrl + Shift + M or click on the Toogle device toolbar icon on the left side of Elementswithin Chrome DevTools.

    1. Open Chrome DevTools by pressing Ctrl + Shift + I on your keyboard or by right-clicking somewhere in your SAP Fiori elements app and choosing Inspect.

    2. Toggle the device toolbar, by pressing Ctrl + Shift + M on your keyboard or by clicking on the Toogle device toolbar icon on the left side of Elements.

    3. Enter 800 as width and 600 as height in the input fields on the right side of Responsive.

    4. Notice how the TaxAmount field is displayed.

    5. Close Chrome DevTools by pressing Ctrl + Shift + I on your keyboard, or closing the window.

Task 7: Solve the Problems by Adding Additional Annotations

Steps

  1. Create and activate a data element over ADT within your package using the following information:

    Data Element Information

    FieldValue
    NameZUX403_TAX_AMOUNT_##
    DescriptionUX403 Tax amount
    CategoryPredefined Types
    Data TypeCURR
    Length15
    Decimals2
    Field Label (Medium)Tax Amount

    1. Switch back to ADT. Right-click your package, and from the context menu, choose New → Other ABAP Repository Object.

    2. In the ABAP Repository Object step, enter Data Element into the search field. Choose Data Element under the Dictionary folder, and then choose Next.

    3. In the Data Element step, complete the Name and Description fields according to the task description, and choose Next.

    4. In the Selection of Transport Request step, select the Choose from requests in which I am involved button. Select an available transport request from the table with the owner TRAIN-## and choose Finish.

    5. In the Category field, from the dropdown list, select Predefined Types. Then, in the Data Type field, enter CURR.

    6. Enter 15 into the Length field and 2 into the Decimals field.

    7. In the Field Labels panel on the right side of your screen, enter Tax Amount into the Medium field.

    8. Save and activate the data element.

    9. Close the tab for the data element.

  2. Open your CDS view ZCDS_UX403_LIST_##.

  3. Convert the TaxAmount field to the data element that you have created.

    1. Define the TaxAmount field as follows: cast( GrossAmountInTransacCurrency - NetAmountInTransactionCurrency as zux403_tax_amount_## ) as TaxAmount.

  4. Solve the currency code issue by adding the respective @Semantic annotations.

    1. Add the annotation @Semantics.amount.currencyCode: 'Currency' for the TaxAmount field.

    2. Add the annotation @Semantics.currencyCode: true for the Currency field.

  5. Hide the Currency field from the Settings menu.

    1. Add the annotation @UI.hidden: true under the line of @Semantics.currencyCode: true.

  6. Set the importance of the field TaxAmount to #Low to hide it from screens with medium size.

    1. Add the annotation @UI.lineItem.importance: #LOW under the line of @Semantics.amount.currencyCode: 'Currency'.

    2. Now your implementation should look like the following figure:

  7. Save your changes and activate your CDS view.

Task 8: Reopen your List Report to Ensure all Problems are Solved

Steps

  1. In order to see the changes of the Tax Amount column, clear the cache of Google Chrome by pressing Ctrl + Shift + Del on your keyboard. In the opened window, select All time for Time range and choose Clear data.

  2. Log in to your SAP BTP trial account and open the SAP Business Application Studio.

  3. Run your list report without Chrome DevTools.

  4. Notice the Tax Amount column now has a suitable title and the currency code displays after the number.

  5. Open the settings page of the table and notice that the Currency Code field has disappeared from the available field list.

    1. Choose the Settings button on the top right corner of the table.

    2. Note that the Currency Code, which is not suitable to display as a standalone column, is now not available to add to the table.

    3. Choose Cancel.

  6. Switch the screen size to 800*600 over the device mode in Chrome DevTools, and notice that the Tax Amount column is automatically hidden.

    1. Open Chrome DevTools by pressing Ctrl + Shift + I on your keyboard or by right-clicking somewhere in your SAP Fiori elements app and choosing Inspect.

    2. Toggle the device toolbar, by pressing Ctrl + Shift + M on your keyboard or by choosing the Toogle device toolbar icon on the left side of Elements.

    3. The screen size should be already set to 800*600 from a previous step. Otherwise enter 800 as width and 600 as height in the input fields on the right side of Responsive.

    4. Choose Goto display data.

    5. The Tax Amount column is now gone:

    6. Close all the browser and SAP GUI windows you have opened.

Log in to track your progress & complete quizzes