Task 1: Log in to the S4D SAP System using ABAP Development Tools for Eclipse (ADT)
Steps
If your Eclipse is not open, open it.
Navigate to the package ZTRAIN_## in the favorite packages of your ABAP project.
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.
Expand the Favorite Packages folder by selecting the small triangle. Find your package ZTRAIN_##.
Task 2: Create and Activate a CDS View
Steps
Create a blank CDS view using following information:
CDS View Information
Field | Value |
---|
Name | ZCDS_UX403_LIST_## |
Description | UX403 Basic List Report |
Right-click your package and from the context menu, choose New → Other ABAP Repository Object.
In the ABAP Repository Object step, enter data in the search field, choose Data Definition under the Core Data Services folder, and choose Next.
In the Data Definition step, complete the Name and Description fields according to the task description, and choose Next.
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.
In the Templates step, deselect Use the selected template option, and choose Finish.
A blank CDS view has been created.
Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise07_Template.txt"
into the code editor of the CDS view.
NoteYou 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
.
Open the File Explorer from the taskbar.
Double-click Application (N:).
Double-click UX403.
Double-click Templates.
To open the template file, double-click the file mentioned in the task description.
Select all the content in the text file, and on your keyboard, press Ctrl + C to copy the content to the clipboard.
Switch back to the ADT. In your blank CDS view, press Ctrl + V on your keyboard to paste the content.
Replace all instances of ## in the CDS view to your group number.
Save your changes and activate your CDS view.
Task 3: Add Basic Annotation to your List Report
Steps
Add an annotation to set the header of your report Sales Orders.
In the source code of your CDS view, add @UI.headerInfo.typeNamePlural: 'Sales Orders'
after the line @EndUserText.label: 'UX403 Basic List Report'
.
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
Order | Field Name |
---|
10 | SalesOrderID |
20 | CustomerID |
30 | CustomerName |
40 | GrossAmount |
50 | NetAmount |
60 | TaxAmount |
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
.
Your implementation should look like the following figure:
Save your changes and activate your CDS view.
Task 4: Expose your CDS View as an OData Service
Steps
Add an @OData.publish: true
annotation to your CDS view ZCDS_UX403_LIST_## and reactivate it.
Add the annotation @OData.publish: true
after @UI.headerInfo.typeNamePlural: 'Sales Orders'
.
Your implementation should look like the following figure:
Save your changes and activate your CDS view.
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.
Publish your new OData service on the S4D SAP system.
Open the SAP Logon over the taskbar.
Log on to the SAP system S4D with your user credentials.
Enter /N/IWFND/MAINT_SERVICE in the input field on the top left of the window, then press Enter.
Choose the Add Service icon in the application toolbar.
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.
Choose the line of service in the search result table, and choose the Add Selected Services icon.
In the Add Service popup window, enter your package ZTRAIN_## in the Package Assignment field, and choose Continue (green checkmark).
In the popup windows that follow, make sure that your workbench request is selected and choose Continue (green checkmark).
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
Open the SAP Business Application Studio.
Create an SAP Fiori elements project using the following information:
SAP Fiori Elements Project Information
Field | Value |
---|
Template | List Report Page |
SAP System | S4D_100 |
OData service | ZCDS_UX403_LIST_##_CDS |
Main entity | ZCDS_UX403_LIST_## |
Module name | basiclist.student## |
Application title | Basic List Report |
Description | Basic List Report. |
Choose File → New Project from Template in the SAP Business Application Studio.
Choose SAP Fiori application and choose Start.
Choose SAP Fiori as Template Type and List Report Page as Floorplan. Then choose Next.
Choose Connect to an SAP System for Data source.
Choose S4D_100 for System.
Enter LIST_##_CDS into the input field for Service and select your service ZCDS_UX403_LIST_##_CDS. Choose Next.
In the Entity Selection screen, select ZCDS_UX403_LIST_## for Main entity. Choose Next.
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.
The dependencies will be installed. Wait until you can see the notification saying that the project has been generated.
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
Run your list report and leave it open.
Right-click on the webapp folder in your Project and select Preview Application.
If you have your popups allowed, a new window with the running application will open.
In the opened application, choose the Go button to display the sales orders in the list report.
Leave the application open.
Identify and explain problems encountered with the TaxAmount field.
Switch back to ADT and open the tab of your CDS view ZCDS_UX403_LIST_##.
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.
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.
Switch back to Google Chrome and choose the Settings button on the top-right corner of the table of the list report.
Note that the Currency Code column, which is not suitable to display as a standalone column, is available to add to the table.
Choose Cancel.
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.
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.
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.
Enter 800 as width and 600 as height in the input fields on the right side of Responsive.
Notice how the TaxAmount field is displayed.
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
Create and activate a data element over ADT within your package using the following information:
Data Element Information
Field | Value |
---|
Name | ZUX403_TAX_AMOUNT_## |
Description | UX403 Tax amount |
Category | Predefined Types |
Data Type | CURR |
Length | 15 |
Decimals | 2 |
Field Label (Medium) | Tax Amount |
Switch back to ADT. Right-click your package, and from the context menu, choose New → Other ABAP Repository Object.
In the ABAP Repository Object step, enter Data Element into the search field. Choose Data Element under the Dictionary folder, and then choose Next.
In the Data Element step, complete the Name and Description fields according to the task description, and choose Next.
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.
In the Category field, from the dropdown list, select Predefined Types. Then, in the Data Type field, enter CURR.
Enter 15 into the Length field and 2 into the Decimals field.
In the Field Labels panel on the right side of your screen, enter Tax Amount into the Medium field.
Save and activate the data element.
Close the tab for the data element.
Open your CDS view ZCDS_UX403_LIST_##.
Convert the TaxAmount field to the data element that you have created.
Define the TaxAmount field as follows: cast( GrossAmountInTransacCurrency - NetAmountInTransactionCurrency as zux403_tax_amount_## ) as TaxAmount
.
Solve the currency code issue by adding the respective @Semantic
annotations.
Add the annotation @Semantics.amount.currencyCode: 'Currency'
for the TaxAmount field.
Add the annotation @Semantics.currencyCode: true
for the Currency
field.
Hide the Currency field from the Settings menu.
Add the annotation @UI.hidden: true
under the line of @Semantics.currencyCode: true
.
Set the importance of the field TaxAmount to #Low
to hide it from screens with medium size.
Add the annotation @UI.lineItem.importance: #LOW
under the line of @Semantics.amount.currencyCode: 'Currency'
.
Now your implementation should look like the following figure:
Save your changes and activate your CDS view.
Task 8: Reopen your List Report to Ensure all Problems are Solved
Steps
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.
Log in to your SAP BTP trial account and open the SAP Business Application Studio.
Run your list report without Chrome DevTools.
Notice the Tax Amount column now has a suitable title and the currency code displays after the number.
Open the settings page of the table and notice that the Currency Code field has disappeared from the available field list.
Choose the Settings button on the top right corner of the table.
Note that the Currency Code, which is not suitable to display as a standalone column, is now not available to add to the table.
Choose Cancel.
Switch the screen size to 800*600 over the device mode in Chrome DevTools, and notice that the Tax Amount column is automatically hidden.
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.
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.
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.
Choose Goto display data.
The Tax Amount column is now gone:
Close all the browser and SAP GUI windows you have opened.