BUILDING AN END-TO-END APP FROM SAP HANA TO

SAP FIORI VIA ABAP

DEV265

Exercises && Solutions

Jens Weiler / SAP SE
DEV265

TABLE of Contents

A. INTRODUCTION ........................................................................................................................................................ 3
YOUR SAP FIORI APP ....................................................................................................................................................... 4
B. ABAP DEVELOPMENT TOOLS ............................................................................................................................... 5
INTRODUCTION ................................................................................................................................................................. 5
SUMMARY EXERCISE B ................................................................................................................................................... 16
C. CORE DATA SERVICES (CDS).............................................................................................................................. 17
INTRODUCTION ............................................................................................................................................................... 17
SUMMARY EXERCISE C ................................................................................................................................................... 25
D. OPEN SQL ............................................................................................................................................................... 26
INTRODUCTION ............................................................................................................................................................... 26
SUMMARY EXERCISE D ................................................................................................................................................... 31
E. ABAP MANAGED DATABASE PROCEDURES (AMDP) ...................................................................................... 32
INTRODUCTION ............................................................................................................................................................... 32
SUMMARY EXERCISE E ................................................................................................................................................... 37
F. SAP GATEWAY....................................................................................................................................................... 38
INTRODUCTION ............................................................................................................................................................... 38
SUMMARY EXERCISE F.................................................................................................................................................... 50
G. SAP FIORI APPLICATION ...................................................................................................................................... 51
INTRODUCTION ............................................................................................................................................................... 51
SUMMARY EXERCISE G ................................................................................................................................................... 66
H. ADDITIONAL INFORMATION................................................................................................................................. 67
INTERFACE CDS VIEWS OF THE ENTERPRISE PROCUREMENT MODEL (EPM) .................................................................... 67
USEFUL ADT SHORTCUTS............................................................................................................................................... 68

2
DEV265

A. INTRODUCTION
Welcome to the exercises of the SAP TechEd Session DEV265. In this document you will find exercises on:

B. ABAP Development Tools in Eclipse

C. Core Data Services (CDS) View Definition
D. Open SQL Enhancements
E. ABAP Managed Database Procedures (AMDP)
F. SAP Gateway OData Service
G. SAP Fiori Application

Before you start, here is some technical information on the system, usernames, passwords, etc. that you will need
during the exercise:

Session Name DEV265

Integrated Development Accessible via the Windows Start Menu
Environment (IDE) (“ABAP in Eclipse – DEV265”)
ABAP System M36 (already configured in the SAP Logon)
ABAP Client 001
ABAP Username DEV265-# (where # is your group number)
ABAP Password Welcome15
ABAP Exercise Package ZDEV265EX_# (where # is your group number)

The screenshots for this exercise have been prepared using ABAP application user DEV265-300. The explanation
in this exercise will remind you to use your group number (indicated by #), e.g. ABAP program
ZR_DEV265_HELLO_WORLD_#. Moreover, you‟ll be creating ABAP artifacts in package ZDEV265EX_#, while all
screenshots show package ZDEV265EX_300 for illustration purposes.

You can find suggested solutions to the exercises in package ZDEV265_SOLUTIONS. As this is a hands-on exercise,
some of the exercises require a certain amount of coding ;-). If you like typing a lot, feel free to do so, if not, just run
transaction ZDEV265_CODING (guiding you to our Fiori application, referred to as the “CodingApp” in the following,
http://lt5088:51080/sap/bc/ui5_ui5/sap/zdev265_coding/index.html?sap-client=001).

3
DEV265

Your SAP Fiori app

Final aim of our end-to-end development example is to create an SAP Fiori application:

Figure 1: Your SAP Fiori App

The customer list on the left-hand side categorizes business partners according to their number of open (yet-unpaid)
sales orders. Selecting one of the customers from this list, more information is retrieved and displayed on the right-
hand side of the application. This further information includes some more detailed information about the customer
including the currency-converted total gross amount of all open (yet-unpaid) sales order invoices and a distribution of
the best-selling products.

From the technical point of view, you‟ll use latest features of Open SQL, Core Data Services (CDS) views, and ABAP
Managed Database Procedures (AMDP). All these ABAP artefacts are used as input for a SAP Gateway OData
service, providing information for the SAP Fiori application.

Now, enjoy the exercises!

4
DEV265

B. ABAP DEVELOPMENT TOOLS

Introduction
This exercise introduces the ABAP Development Tools (ADT) for SAP NetWeaver also known as "ABAP in
Eclipse". It is the recommended integrated development environment (IDE) for developing ABAP applications
for SAP HANA.

The ABAP Development Tools provide a set of powerful tools for developing ABAP applications. The tools
(Eclipse editors and Eclipse views) are ideally positioned in the IDE to facilitate your tasks. The diagram below
shows the default layout of the ABAP perspective:

 Project Explorer View:

Provides a hierarchical view of your ABAP Projects. From here you can browse the ABAP Development
Objects in the ABAP system (similar to the Repository Browser in the Object Navigator (SE80)) and open
your ABAP Development Objects in the corresponding editor.
 Editor Area:
The editors for the ABAP Development Objects are opened in the area reserved in the centre of the IDE.
 Outline View:
This view displays a structured overview of the ABAP Development Object that is currently open in the
editor area. The contents of the outline view are editor-specific.
 Feature Explorer View:
This view provides you with an interactive tutorial to help you get familiar with the basic features in ABAP in
Eclipse.
 Other Views:
Several other useful views are stacked underneath the editor area in a tabbed container. Two of the most
commonly used views are the•
o Problems View: This view displays the syntax errors, warnings or other information associated with an
ABAP Development Object (typically opened in the editor area)
o Properties View: This view displays the basic properties of the ABAP Development object that is
currently open in the editor area, e.g.: "Last changed by", "Created on", etc.

5
DEV265

In this exercise you will get familiar with ADT, learning the basic concepts and interaction patterns so that you
can develop an end-to-end application from SAP HANA to SAP Fiori via ABAP.

In this exercise, you‟ll

 create an ABAP Project
 create, implement, and execute an ABAP program
 [optional] delete the ABAP program
 get helpful information as you move along

Explanation Screenshot

1. Start Eclipse, your Integrated

Development Environment
(IDE). Open the Start menu,
search for “dev265”, and
launch “ABAP in Eclipse –
DEV265”.

2. After launching, you‟re in the

ABAP perspective and you‟re
welcomed by the ABAP
Feature Explorer.

The layout is as described in

the introduction of this
exercise, so you know
already, why there are so
many views in this
perspective.

6
DEV265

3. Okay, let‟s start with the first

step – create an ABAP
Project, the central interface
between the IDE and the
ABAP backend system.

4. In the New ABAP Project

dialog, insert connection M36.
This either triggers the search
for the available connections,
just select M36 [PUBILC].

5. The connection properties are

inserted, just continue with
Next.

7
DEV265

6. You are asked to provide the

logon information for system
M36:

 Client: 001
 User: DEV265-#
(# is your group number)
 Password: Welcome15

In principle, you‟re project is

ready to use and you could
finalize the project creation.
Yet, it‟s quite helpful to define
favorite package, therefore,
please continue with Next.

7. Add favorite packages to for

your project via the Add
button.

8. Add the ABAP packages

 ZDEV265EX_#
(# is your group number)
 ZDEV265_SOLUTIONS
(containing the suggested
solutions for all exercises)

The screenshot on the right

hand side shows how to
add package
ZDEV265EX_# (for group
number 300). Package
ZDEV265_SOLUTIONS,
can be added accordingly.

8
DEV265

9. You see a list of packages

that will be added as
favorites.

You may of course add any

further package.

Hint: You can of course add

favorite packages to the ABAP
project at a later point in time. To
do so, you just right-click on the
Favorite Packages in the Project
Explorer view and select Add a
Package from the context menu.

10. The ABAP Project is created

and you can see it as a new
(well, the only) entry in the
Project Explorer view.

11. Let‟s customize a bit the

ABAP perspective, e.g. close
the Feature Explorer.

Hint: There‟s almost no limit in

changing the layout, i.e. you can
change the view sizes, re-arrange
the layout, close views, open new
ones, move the views, etc. This
might lead to the situation, where
you feel like you messed up
everything, in this case, just use
Windows > Reset Perspective
from the menu bar to reset the
ABAP perspective to the default
layout.

12.

9
DEV265

13. Now, let‟s expand the ABAP

project in the Project Explorer
view, using the + indicators.

Besides the manually added

packages, your $TMP
package is added by default
to the list of Favorite
Packages. And you can see
that there‟s already some
ABAP content in your
ZDEV265EX_# package.

14. Ready to create you first

ABAP program?

Just right-click on your

exercise package
ZDEV265EX_# to open the
context menu and select
New > ABAP Program.

15. A creation wizard opens. The

project and package are
automatically included. So,
you only have to provide
name and description for the
ABAP program:
 Name:
ZR_DEV265_HELLO_WORLD_#
(with group number #)
 Description:
Valid description like
“DEV265: Hello World”

Continue with Next

10
DEV265

16. As the content in package

ZDEV265EX_# is subject to
transports, you are asked to
provide a Transport Request.
Later on, you‟ll be able to
choose from existing
requests, but as this is the
first ABAP program/object you
are creating, also a new
transport request has to be
created.

Please provide valid request

description, e.g. “DEV265:
Exercises for group #” as
shown in the screenshot, and
finalize with Finish.

17. The ABAP program is created

and opened in the editor area,
ready for you to implement.

18. Now a very useful hint, in

case you don‟t want to do all
the typing and as copy & past
the coding from a screenshot
does not work, you can just
use the shortcut ALT+F8 and
execute transaction
ZDEV265_CODING.

11
DEV265

19. The CodingApp is called, i.e.

a Browser windows open,
logon credentials are already
provided, just in case you
need them anyways:
 User: DEV265-# (group #)
 Password: Welcome15

20. Implement the ABAP “Hello

World” program.

You can find the coding in the

ABAP Development Tools
Exercise.

21. Save (Ctrl+S) and activate

(Ctrl+F3) the ABAP
program.

22. Ready to execute the

program?

Use the well-known ABAP

shortcut F8.

An embedded SAPGui
windows opens and displays
the result as depicted in the
screenshot.

23. Let‟s enhance the ABAP

program with an Open SQL
call. Navigate back to the
program source code tab and
add the coding given in the
“Step 2” tab of the
CodingApp.

24. Don‟t forget to save (Ctrl+S)

and activate (Ctrl+F3) the
program.

12
DEV265

25. Trigger the ABAP Pretty

Printer (shortcut Shift+F1)

If not done yet, you have to

configure the source code
formatter (aka Pretty Printer).

26. In the following popup

window, activate the
Checkbox and select your
favorite Code style. Continue
with the OK button

27. Remark: If you want to

change the ABAP Pretty
Printer settings, go in the
menu bar to Windows >
Preferences. Select ABAP
Development > Editors >
Source Code Editors and
select the Formatter.

28. Back in your ABAP program,

you can inspect the elements
of a structure or an ABAP
class using the element info
functionality. For this click on
the structure type T100 and
press F2.

The element info on the

structure T100,
documentation, components,
etc. are displayed in the
resulting popup window.

13
DEV265

29. You can further enhance the

WRITE statement to include
the message number (very
useful if you do not use copy
& paste from the CodingApp).
Insert ls_t100- and trigger
the code-completion via the
shortcut Ctrl+Space.

You can select the entry

msgnr via the cursor keys;
the completion is then
triggered via the return key.

30. Let‟s finally save (Ctrl+S),

activate (Ctrl+F3), and
execute the program again
(F8).

31. To delete the ABAP program

(optional) or other ABAP
repository objects, use the
Delete functionality from the
context menu of the
corresponding object.

14
DEV265

32. A dialog window opens,

where you can specify which
objects you would like to
delete, just click on Finish.

33. The deletion is of course also

transported, but you won‟t
have to choose a new
transport request, just use the
existing one.

34. In case you removed the

ABAP program, everything
looks as before – like nothing
has happened .

35. Two more hints:

 If you would like to reset

the layout of your ABAP
perspective, just use
Windows > Reset
Perspective.

15
DEV265

 More help can be found in

Help > Help Contents

Summary Exercise B
Congratulations, you finished the ABAP Development Tools exercise. You launched the “ABAP in Eclipse”
and created an ABAP Project. You even created an ABAP program, which is gone by now if you did the
optional exercise for deleting it .

This first exercise seems very tool-driven and you might ask: Is it mandatory in the context of ABAP
Development for SAP HANA? The answer is yes! You might have heard before (or will learn as we move
along), the ABAP Development Tools are mandatory for creating and maintaining ABAP artefacts like Core
Data Services (CDS) Views or ABAP Managed Database Procedures (AMDP) as you will see in the
following exercises.

16
DEV265

C. CORE DATA SERVICES (CDS)

Introduction
The SAP Fiori application you‟re going to build shows the list of customers including their category on the left-hand
side. As indicated by the screenshot on page 4, this customer classification list is provided by means of a Core Data
Services (CDS) view.

This exercise introduces the CDS view definition capabilities of the AS ABAP 7.4. In particular, you will learn about
the features provided by ABAP CDS like aggregation functions and conditional expressions in the SELECT list,
Associations, the view-on-view capabilities, etc. The exercise is not designed to give you a complete list, but only a
peek into the long list of available features in ABAP CDS. Learn more about ABAP Core Data Services in the ABAP
language documentation.

As you will see in the following, the ABAP Development Tools will be used. CDS views, or more precisely Data
Definition Language sources (DDLS), can only be created and maintained using ADT, which is one of the reason
why we introduced the tools in detail in the previous exercise. Throughout the exercise, you‟ll see several useful tips
and tricks when working with the CDS editor.

In this exercise, you‟ll

 enhance an existing CDS view with (aggregated) sales order information
 create a CDS view
o as “view-on-view” on an existing CDS view
o that provides a customer classification based on sales order information
 use the Data Preview on CDS views

Explanation Screenshot

1. First step is to open an ABAP

Development Object
(shortcut Ctrl+Shift+A).

2. Enter the search string

“ZDEV265*_#“ (# is your
group number) to open the
DDL source
ZDEV265_P_SALESORDER_C
OUNT_#.

17
DEV265

3. The CDS view is opened in

the CDS Editor.

You see the ABAP catalog

annotation for the SQL View
name and the view definition
based on a select from the
sales order view
SEPM_I_SalesOrder.
Please note that the client
field is not included in the
projection list; this is
automatically added by the
framework depending on the
value of the annotation
@ClientDependent and the
client dependency of the
underyling table or view. The
key field Customer and the
field CustomerName are
given in the projection list.

4. Let‟s enhance the view with

the number of sales orders
per customer. This
information is provided via the
count function. But instead
of just typing this, make use
of the code-completion
functionality. Start typing “co”
and trigger the code
completion (Ctrl+Space)
and select count( from the
list of proposals.

18
DEV265

5. Continue to type “d”, trigger

the code completion, and
select the keyword
distinct.

6. To get the number of sales

orders, a unique invoice
information has to be used,
e.g. the SalesOrder. Use
the code completion to select
the field.

7. Alias the result of the count

function with
SalesOrderCount.

8. Repeat the procedure (or use

Step 1 of the “CDS Exercise”
in the CodingApp) to
additionally add the field
AddressUUID (retrieved via
a path expression based on
the association _CUSTOMER).

9. Finally, check the syntax of

your view (Ctrl+F2).

An error is shown in the

Problems view and the Quick
Fix indicator appears on the
ruler (just left of your SELECT
statement), both informing
you that you are lacking a
GROUP BY clause.

19
DEV265

10. Use the Quick Fix

functionality, i.e. position the
cursor on the SELECT
statement, use the shortcut
Ctrl+1, and select the Add
Group By clause option.

Hint: Alternatively, you can

select Quick Fix from the
context menu of the error in
the Problems view.

11. The Group By clause is

added as shown in the
screenshot.

12. Finally, filter the result set on

open
(SalesOrderBillingStat
us <> 'P') sales orders.

13. Save (Ctrl+S) and activate

(Ctrl+F3) your CDS view.

14. You have to provide a

transport request for the DDLS
object, just choose the
existing transport request and
continue with OK.

20
DEV265

15. Now it‟s time to query the

CDS view, but not by means
of an Open SQL query, we‟ll
use the Data Preview feature
provided within the ABAP
Development Tools.
And it‟s completely easy, just
use the shortcut F8.

Alternatively, you can right-

click somewhere (ideally not
on the statement) in the editor
and select Open with > Data
Preview from the context
menu.

16. The Data Preview opens and

you can have a look at the
result set of your CDS view.

17. Now that you learned how to

enhance an existing view,
let‟s create another one from
scratch.

Select your development

package and choose New >
Other ABAP Repository
Object from the context menu.

21
DEV265

18. As mentioned before, CDS

views are implemented in
DDL source files, so search
for “ddl” and select DDLS
Source from the list of
available repository objects.

19. Provide the name

ZDEV265_C_CUST_CLASSIF
Y_# (# your group number)
and a valid description.

20. Again, a transport request is

required, just use your
existing one and finalize the
creation dialog with Finish.

22
DEV265

21. A CDS view editor window

opens, which already holds
some proposed annotations
and view syntax based on an
existing ADT template. Let‟s
start to change the predefined
template values (you can step
through the template fields via
the tab key).

22. Provide (for your group

number #):
 zv265_ccstcls# as
sqlViewName
 ZDEV265_C_Cust_Class
ify_# (just use capital
DEV instead of Dev) as
CDS view name
 ZDEV265_P_SalesOrder
_Count_# as data source.

23. Alias the source as

SalesOrderCount and add
the columns Customer and
CustomerName to the
projection list.

Not a typing fan? Remember

the suggested solutions in the
CodingApp; you can find the
suggested solutions for the
view in Step 2 of Exercise C.

24. Now, let‟s add a field

Category to the projection
list, which is based on a CASE
construct. Depending on the
value of SalesOrderCount,
the Category is evaluated
either as „C‟, „D‟, „S‟, or „?‟.

23
DEV265

25. In addition to the provided

information, some address
data is required. This cannot
directly been retrieved from
the underlying view, so we‟ll
define an association to the
CDS view SEPM_I_Address
using the AddressUUID in
the ON condition.

26. Finally, include the

StreetName, PostalCode,
CityName, and
Country field retrieved via
path expressions to the
projection list as shown on the
screenshot.

27. Save (Ctrl+S), validate

(Ctrl+F2), and activate
(Ctrl+F3) the view.

28. Have a look at the result set

of the CDS view using the
Data Preview functionality
(F8).

You can see a list of 38

customers, classified as „C‟,
„D‟, or „S‟ customers including
their Customer ID, name, and
address information.

24
DEV265

Summary Exercise C
Well done! You enhanced an existing CDS view with an aggregation function and you further created a CDS
view from scratch. Using the view-on-view capabilities, a CASE expression and an associations available in
ABAP CDS. You provide the customer classification, which will later be used in the Fiori application. You
have not experienced how to consume a CDS view by means of Open SQL, you rather queried the CDS
views with the Data Preview provided in the ABAP Development Tools.

25
DEV265

D. OPEN SQL
Introduction
In the SAP Fiori application you‟re going to build, a customer can be selected from the customer classification list to
retrieve further information about the distribution of favorite/most ordered products. As indicated by the screenshot
on page 4, this product information is provided by means of Open SQL.

This exercise shows some of the features, that Open SQL recently learned. Introduction of these new features, e.g.
arithmetical functions, conditional expressions, literals, etc. in the SELECT list necessitated the introduction of a new
syntax – the most prominent change among these syntax enhancements is certainly the escaping of host variables
using the @ symbol. As was the case in the CDS exercise, we can only provide a peek into the long list of available
features, so you might want to have a look at the release-specific changes in the ABAP language documentation.

In this exercise, you‟ll

 use Open SQL to query CDS views
 use the COALESCE function in an Open SQL query
 check support of DB features by the underlying database system
 query a CDS view with input parameters

Explanation Screenshot

1. You are certainly used to it by

now, first step is to open an
ABAP Development Object
(Ctrl+Shift+A).

2. Open the ABAP Class

ZCL_DEV265_Product_INFO_#
(# is your group number).

26
DEV265

3. In the Outline view, navigate

to the method GET_PRODUCT
_INVOICE_INFO and scroll
down to the comment
depicted in the screenshot
(line 45).

4. The provided Open SQL

query retrieves customer and
product information from CDS
views
ZDEV265_I_Prod_Count_S
OL, SEPM_I_Product, and
SEPM_I_ShortText. The
language used to retrieve the
product names depends on
your logon language (English
in your case, right?), yet
something happened and
some texts are missing in the
system.

5. Execute the class method, i.e.

press F8 and execute the
method.

27
DEV265

6. Provide a value for the import

parameter IV_CUSTOMER,
e.g. 0100000000 and
execute the method (F8).

7. Once you navigate to the

result, you can see that some
texts are missing .

28
DEV265

8. Let‟s solve that issue.

Navigate back to the tab
holding the source code of the
class and improve the Open
SQL statement as mentioned
in the comment, i.e. provide
another LEFT OUTER JOIN
to query the view
SEPM_I_ShortText using a
fallback language and retrieve
the productname depending
on a COALESCE function.

Again, the CodingApp (Step 1

of Exercise D) might be very
helpful if you don‟t like typing.

9. Activate (Ctrl+F3) the class,

a process which triggers
again the transport request
wizard – of course you can
use your existing one again.

10. Execute (F8) the class

method again. You observe
that the previously missing
product names are retrieved
in the fallback language –
hope you know how to
translate them from Spanish
to English .

11. The Open SQL statement

does the job, but it‟s a rather
complex statement, e.g. there
are several JOINs involved.
Alternatively, you could use
the CDS view

29
DEV265

ZDEV265_I_Prod_Info_Sol
to retrieve the same
information.

But this CDS view uses yet

another new feature – it‟s a
CDS view with an input
parameter, a feature not yet
available on all database
systems, therefore, we‟ll have
to check whether the
underlying DB supports that
feature.

12. Check if the feature is

supported via the
corresponding utility method
in class
CL_ABAP_DBFEATURES.

13. Since SAP HANA supports

CDS views with input
parameters, the value of
lv_dbfeature_supported
at runtime is evaluated as
abap_true. So, let‟s
implement the Open SQL
query on
ZDEV265_I_Prod_Info_Sol
and provide values for the
input parameters langu and
fallback_langu.

14. You see a warning indicator

and the corresponding syntax
warning in the Problems view.

Have a look at the long text of

the syntax warning.

30
DEV265

15. Since you already validated

that the database supports
the views with parameter
feature, you can use the
corresponding pragma to
suppress the syntax warning.

16. Save (Ctrl+S) and activate

(Ctrl+F3) the class. You
may execute the class
method again, yielding the
same result as observed in
step 10.

Summary Exercise D
Congratulations, you finished Exercise D. You successfully used the new Open SQL syntax to query CDS
views with and without input parameters and you used new features like the COALESCE function.

Now let‟s continue to learn about ABAP Managed Database Procedures (Exercise E), OData Services
(Exercise F) and Fiori applications in Exercise G.

31
DEV265

E. ABAP MANAGED DATABASE PROCEDURES (AMDP)

Introduction
Last but not least, the SAP Fiori application shown on the screenshot on page 4 shows additional information about
the selected customer. In particular, the currency-converted total amount of open sales order invoices is shown.
Technically, the information is provided by an ABAP Managed Database Procedure (AMDP).

SAP HANA features procedural coding in form of Database Procedures. With the introduction of ABAP Managed
Database Procedures (AMDP), you can define and consume such database procedures directly within the ABAP
environment. Technically, the AMDP is a container for the database-specific coding – SQLScript in our example –
and the call of the database procedure looks identical to an ABAP class method call. Same holds for the lifecycle,
you merely transport the ABAP class method; the database procedure in the target system is then created by the
AMDP runtime.

One word of precaution, like native SQL, the coding within an AMDP is database specific, so you have to ensure that
you only call HANA-specific AMDPs when running on SAP HANA. Read more about AMDPs in the ABAP language
documentation.
Please note that the focus of this exercise is not to show you how to write SQLScript in the most performant way, but
rather to show you the concept of ABAP Managed Database Procedures from the ABAP developers perspective. For
more information about SQLScript, please have a look at the SAP HANA SQLScript Reference.

In this exercise, you‟ll

 Prepare an ABAP method to be implemented as AMDP
 Implement the AMDP using SQLScript
o call an existing AMDP
o query data of ABAP Dictionary tables

Explanation Screenshot

1. It‟s time again for our well

beloved shortcut
Ctrl+Shift+A to open an
ABAP Development Object
(or use the variant shown in
the screenshot).

2. For this exercise, the

implementation is done in
class
ZCL_DEV265_CUSTOMER_IN
FO_# (# you group number).
Search and open the class.

32
DEV265

3. Ready to implement you first

AMDP? Let‟s go. Navigate
(e.g. via the Outline view) to
the implementation of method
get_customer_info, add
“by da”, and press TAB once
the suggestion by the code
completion appears.

4. The statement up to
“LANGUAGE” is inserted; let‟s
continue to define the
implementation language.
Start typing “s” and use the
code completion to insert
language SQLScript.

5. You‟ll see two things:

 Background color changes
to the color you selected in
the configuration above.
 You see an error indicator
and the error description in
the Problems view.

6. Background coloring is nice

but the error certainly not, so
let‟s see what to do.

You‟re informed that a marker

interface is missing, so let‟s
add it.

7. Navigate to the Class

Definition and add the marker
interface
if_amdp_marker_hdb.

8. Back to the method

implementation; there‟s still
an error. SAP HANA
complains that you have not
assigned the output
parameter
et_customer_info.

33
DEV265

9. Okay, so let‟s start the

implementation. First of all,
you need the relevant sales
order invoice items. This
information is provided by
another ABAP Managed
Database Procedure, i.e.
ZCL_DEV265_CUSTOMER_IN
FO_SOL=>GET_CURR_CONV_
RELEVANT_ITEMS. Add the
call of this AMDP in your
method implementation.
Once implemented, the error
description changes once
again and you‟re informed
that the called object is
unknown.

Hint: You might want to use

the CodingApp (Exercise E).

10. All ABAP and DDIC object

used in an AMDP need to be
explicitly mentioned in the
using clause of the AMDP, so
let‟s add a USING clause for
this object.

The syntax check is still not

happy, as the output
parameter
et_customer_info is still
missing – think it‟s time to
provide the info.

11. The tabular output parameter

et_customer_info is
retrieved from a select on the
temporary table
lt_converted_items
(retrieved via the procedure
call and escaped with the “:”
in the select statement) joined
with the business partner
table SNWD_BPA.

Select the customer, the

customer_name the
currency_code and the
aggregated gross_amount,
which necessitates the usage
of the appropriate GROUP BY
clause.

34
DEV265

Please note the explicit join

on the client fields for the two
tables (which is necessary as
this is native SQL, in contrast
to the client handling in Open
SQL).

Last but not least, you receive

the issue, that SNWD_BPA is
unknown, an issue that has
been mentioned before when
implementing the AMDP call.
Remember how you solved
that?

12. For sure you do. You have to

provide the ABAP DDIC
object in the USING clause.

Once you provided that

information, the problems
view should be empty and
we‟re ready to save (Ctrl+S)
and activate (Ctrl+F3) the
ABAP class.

35
DEV265

13. The well-known transport

request dialog opens, just use
the existing transport request
and finalize the exercise with
the OK button.

14. Let‟s finally execute the class

(F8) and test the class
method
GET_CUSTOMER_INFO in the
embedded SAPGui.

15. Provide the parameter values:

 iv_client = 001
 iv_customer =
0100000000
 iv_target_curr = USD

and continue with F8.

36
DEV265

16. You can see that one entry is

retrieved.

17. When you click on the details,

you see the customer
information retrieved for
customer SAP.

18. Congratulations, everything Result of calling the class method with an invalid currency :
worked fine! You might want
to repeat the test of your class
method for an invalid currency
like „USX‟ to investigate error
handling – something that will
be interesting for the Fiori App
in Exercise G as well.

Summary Exercise E
Perfect – another exercise done successfully! You implemented and ABAP Managed Database Procedure
and even learned how an AMDP can be called within another AMDP.

You have now finished all necessary preparation steps: you created CDS views, you used Open SQL to
provide data in a class method, and you implemented you first ABAP Managed Database Procedure –
great! For this end-to-end development example, this means you‟re ready to start with the implementation of
an SAP Gateway OData service which will provide the necessary data for your Fiori application!

37
DEV265

F. SAP GATEWAY
Introduction
The SAP Gateway (GW) is used as OData Service provider in our end-to-end development example. The OData
service is based on the entity relation model shown in the diagram below and the service implementations are based
on the ABAP class methods implemented in the previous exercises.

The entity CustomerClassification contains the fields Customer, CustomerName, Category, and information
about the address (StreetName, PostalCode, CityName, and Country). Moreover, CustomerClassification
contains the navigation properties ToCustomerInfo and ToProductInfo, which correspond to associations.
Following the associations, more detailed information about the customer like the currency-converted total gross
amount of all open (yet-unpaid) sales order invoices and a distribution of the best-selling products can be retrieved.
The process of following the association in the app corresponds to the action of selecting a customer from the
CustomerClassification list.

In the exercise you‟ll

 Create an OData Service
 Consume a CDS view in a modelled way
 Implement OData Service Methods based on Open SQL and AMDPs
 Expose and Test your OData Service

Explanation Screenshot

1. This time we start a bit

differently, instead of opening
an ABAP Development
object, let‟s run an ABAP
transaction (shortcut Alt+F8)
or via the icon shown in the
screenshot.

38
DEV265

2. In the Run ABAP Application

dialog, search for transaction
SEGW, select the matching
item, and continue with OK.

3. You don‟t have any Gateway

service projects open, so let‟s
open an existing one using
the corresponding icon.

4. Search for the template

project ZDEV265_GW_TPL
and open it.

5. You will not be able to modify

the template (as this is not the
purpose of a template
object ) but you can use it
as a copy template.

Use the Copy Project option

from the context menu.

39
DEV265

6. Provide ZDEV265_GW_# (#
your group number) as project
name and ZDEV265EX_# as
package name and continue.

7. You can now see two

projects:
 your new project (with the
change mode indicator)
and
 the template project (in
display only mode)

To prevent mixing up the two,

just close the template project.

40
DEV265

8. Now, you can unfold the Data

Model folder to familiarize
yourself with the data model
and the navigation properties
described in the introduction
section of this exercise (page
38). You see the entity types
and the corresponding entity
sets for
CustomerClassification,
CustomerInfo, and
ProductInfo.

These entities will be used for

the Fiori application,
respectively the OData
services will depend on these
three entities / entity sets and
the corresponding navigation
properties.

9. Let‟s start with the data

provider for the
CustomerClassification
Set. In exercise C you
created a CDS view providing
the necessary information.
You‟ll now see how easy it is
to provide the information if a
CDS view is your data source.

In the Service Implementation

section of your GW project,
select Map to Data Source
from the context menu of the
CustomerClassification
Set.

10. Use the drop down menu to

select Business Entity.

41
DEV265

11. You may directly insert the

name, but let‟s use the
provided value help by
clicking on the icon (or using
the well-known shortcut F4).

12. Use the drop down menu to

select CDS.

13. Insert an appropriate search

pattern before you trigger the
value help, e.g. “Z*#” (# is
your group number).

14. Select your CDS view for

customer classification, e.g.
ZDEV265V_C_CUST_CLASSI
FY_# (# your group number).

Hint: Feel free to use the CDS

View from the suggested
solutions
ZDEV265V_C_CUST_CLASSIFY_
SOL

15. Okay, almost ready, back in

the Select Business Entity
dialog, you see the selected
CDS view. Continue with the
checkmark button.

42
DEV265

16. Back to the Map to Data

Source dialog, you see how
you could have directly
provided the name of the
Business Entity.

17. Finally, map the elements of

the CDS view to the
properties of the OData entity
using the Generate Mapping
icon (or using Drag&Drop).

18. Save the Gateway Service

project (Ctrl+S).

19. Saving the project triggers the

transport request dialog.
Choose your existing
transport requests, e.g. using
the Own Requests button or
via the value help.

43
DEV265

20. Continue with the checkmark

icon.

21. Now it‟s going to become

interesting.

Let‟s generate the runtime

artefacts. Once you triggered
the generation, you see a
summary of objects that are
going to be generated, just
confirm the dialog.

22. You‟re asked to provide a

package for the object
creation, just use your
development package
ZDEV265EX_# (# your group
number) and save the
changes.

44
DEV265

23. A transport request dialog

window appears, asking for
transport requests for the
generated artefacts, just use
the existing one and confirm
the dialog.

24. Once completed, you‟ll see

success messages for the
generation of the runtime
objects.

And that is all! Cool, right?

A couple of clicks but no line
of coding to provide data from
the SAP HANA database via
a CDS view to the OData
service.

In principle, we could now

register and test the OData
service, but let‟s complete our
service implementations for
the other entities, i.e. the
CustomerInfo and the
ProductInfo.

25. Second in line is the

CustomerInfoSet. So,
unfold the Service
Implementation of
CustomerInfoSet and
select Go to ABAP
Workbench from the context
menu of the GetEntity
method.

26. You‟re informed that this has

not yet been implemented.
Well, that‟s no surprise as we
just wanted to do that!

45
DEV265

27. A new ABAP editor window

opens and you see the
skeleton of the generated
class
ZCL_ZDEV265_GW_#_DPC_E
XT, the place to be for
implementations of our data
provider methods.

28. The class inherits methods

from the corresponding DPC
class (the one without the
extension _EXT). Therefore,
go to the protected section
and redefine the method
customerinfoset_get_en
tity.

29. Navigate to the class

implementation and
implement the method. For
the typing fans among you…
enjoy, for all the others, go
back to the CodingApp.

Some explanations:
The information is only provided
for a given customer, thus an
exception is raised if the request
uses a direct access instead of
following the navigation property.
The information of the Customer
(input parameter for
get_customer_info of class
zcl_dev265_customer_info_
#) is provided via the
io_tech_reuqest_context-
>get_converted_source_keys
method. The local variable
lv_target_curr is set to USD
(you might want to change this
later to simulate an error in the
currency conversion).
The customer information for the
given Customer is retrieved from
the class method via the internal

46
DEV265

table lt_entityset. To provide

the information to the result
structure er_entity, the first
(and only) line of lt_entityset
is moved to the result parameter
er_entity.

30. Yet missing in the previous

implementation step is the
handling of an exception
raised during AMDP
execution, let‟s do that as well
(see Step 2 in the
CodingApp).
Using an utility method, the
AMDP exception is used to
raise a exception of type
/iwbep/cx_mgw_busi_exc
eption, which can later be
used in the Fiori app.

31. And our last entity set is the

product information. For this
entity set, do a redefinition of
the
invoiceinfoset_get_ent
ityset method.

32. Now, let‟s use the quick fix

(shortcut Ctrl+1) to add the
implementation of the method
in the class implementation
section.

33. Navigate to the method

implementation (using the
Outline view or just scroll
down) and implement the
method (Step 3 in the
CodingApp).

The implementation is very

similar to the implementation
of
customerinfoset_get_en
tity, except for the used
provider class method. For
this OData service provider,
the ABAP managed database
procedure
get_product_info of class
zcl_dev265_product_inf
o_# is called and the move-
corresponding of course uses
the whole table, not just the
first line.

47
DEV265

Question: Do you see the

difference between a
standard ABAP method call
and an AMDP call? No? Of
course not, because they look
identical… you cannot digest
any differences!

Don‟t forget to save (Ctrl+S)

and activate (Ctrl+F3) the
class.

34. Back to the Gateway Service

Builder (transaction SEGW, but
you certainly have the editor
tab open somewhere ), the
final task for the OData
service is to register it in the
system. For that, open the
Service Maintenance and
click on the Register button.

35. Insert your development

package ZDEV265EX_# and
continue via the checkmark
icon.

48
DEV265

36. A couple of transport request

dialog windows appear – just
use your existing transport
request.

37. The success of the

registration procedure can be
seen in the registration status
traffic light. Green is the
status you‟d like to see .

38. Already curious? Let‟s test the

OData service.

Open the browser of your

choice (I prefer the Google
Chrome but Mozilla Firefox is
perfectly fine as well) from the
Windows start menu.

Hint: You might alternatively

use the SAP Gateway Client
(see corresponding icon in the
screenshot of the previous
step) to test the OData
Service response.

39. Provide the service URL (as http://lt5088.wdf.sap.corp:51080/sap/opu/odata/sap/zdev265_gw_#_srv/?sap

given above the screenshot) -client=001&sap-ds-debug=true (for your group number #)
or provided in the CodingApp
(Exercise F, Step 4).

49
DEV265

40. The result of the OData

request should look like
shown in the screenshot.
Using the parameter sap-
ds-debug=true, you can
even navigate to the
CustomerClassification
Set and further follow the
navigation paths:
 ToCustomerInfoSet and
 ToProductInfoSet

Summary Exercise F
Congrats, you successfully created an OData Service, providing data from the SAP HANA database via
CDS views, Open SQL, and ABAP managed Database Procedures to the OData service. You used “Map to
Data Source” to bind the CDS View to the OData Service and you did the service implementations for the
ABAP class method calls, which in turn provide data via Open SQL or SQLScript (in the AMDP).

Now it‟s time to create a nice user interface and to provide the data via the OData service to this user
interface.

50
DEV265

G. SAP FIORI APPLICATION

Introduction
This final exercise shows how to build an SAP Fiori application displaying a list of customer including classification
information. By selecting one customer from this list, navigation to detailed customer information and product
information is possible. The necessary data for the user interface is retrieved using the SAP Gateway OData Service,
which has been developed in the previous exercise.

Technically, the Fiori application is a split application constructed from a master and a detail part. On the master view,
the list of customer classifications is shown, while the detail view holds the customer information, total gross amount
information, and the product information.

In the exercise you‟ll

 create an SAP Fiori application in the SAP Web IDE
 complete/modify the implementation of the Fiori app
o add information and texts to the UI
o add a bar chart diagram to the UI (the product information)
o add a (rudimentary) messaging for OData Service errors
 test your Fiori application in the SAP Web IDE

Remark: The following step-by-step description uses the OData service ZDEV265_GW_#_SRV (for group number
#=300), representing the service you created in the previous exercise. You may alternatively use the service
ZDEV265_GW_SOL_SRV from the solution package. And for reference, you can have a look at the suggested solution
on http://lt5088.wdf.sap.corp:51080/sap/bc/ui5_ui5/sap/zdev265_coding/index.html (see Step 1 of Exercise G in the
CodingApp).

Explanation Screenshot

1. First of all, you‟ll have to

prepare your TechEd
notebook to use the SAP Web
IDE. In order to do so, please
open the Windows Start menu
and select “Start SAP Web
IDE (localhost)”.

51
DEV265

2. A console opens, just wait

until you see the prompt as
shown in the screenshot and
please leave it open .

3. Now let‟s open the SAP Web

IDE from the Windows Start
menu (you may use the
search term “dev265”).

4. Click the (don‟t know how to

call it ) icon.

52
DEV265

5. Provide logon credentials:

 User: DEV265
 Password: Welcome15

Note: There‟s no group

number necessary for the
username!

6. Welcome to SAP Web IDE

(maybe it‟s the first time for
some of you ).

7. We‟ll use an existing

application template to build
the user interface. So
navigate to File > New >
Project from Template
(Ctrl+Alt+Shift+O).

53
DEV265

8. In the first step, select the

SAP Fiori Master Detail
Application and click on Next.

9. Provide a meaningful Project

Name like DEV265 and
continue with Next.

54
DEV265

10. The Service Information is

pre-filled, therefore, an OData
Service request to read the
SAP Gateway OData Service
catalogue is triggered. You‟re
asked to provide a username
and password for the ABAP
backend system, please
provide:
 Username: DEV265-# (for
your group number #)
 Password: Welcome15

11. Search the service catalog for

your OData service
ZDEV265_GW_#_SRV (# your
group number) and continue
with Next.

55
DEV265

12. It‟s now time to customize the

application template.
Add the information as
depicted on the screenshots
and continue with Next.

56
DEV265

13. That‟s all for the template

customizing. So let‟s create
the project in your workspace
– click on Finish.

Having done so, all necessary

application components, like
the XML and JS sources etc.
are generated into your local
workspace.

14. Unfold the new project, select

the index.html, and you
can have a first preview of
your user interface via Run.

15. The data preview opens and

you are asked to provide your
ABAP backend logon
credentials – that‟s because
an OData request is send to
the backend to retrieve the
customer information to the
frontend. Please provide:
 Username: DEV265-#
(for your group number #)
 Password: Welcome15

57
DEV265

16. Now, a preview of your

application opens which looks
similar – but not identical – to
the final application we‟d like
to build.

Now it‟s time to go back to the

Web IDE and become an
XML and JavaScript expert .

17. First of all, we‟d like to provide

some additional texts. In
particular the “Category” label
for our customer
classification.

Open the Master.view.xml

file.

58
DEV265

18. Scroll down a bit and insert

{i18n>categoryLabel} as
numberUnit – okay,
technically this is not a
number unit but it‟ll serve our
needs .

Hint: If you cannot find it,

WebIDE allows to search via
Ctrl+F.

Hint2: It‟s not that much of

coding, but you still might
want to use the CodingApp
for Copy&Paste (Exercise G,
Step 2).

19. Save your changes (Ctrl+S),

otherwise you won‟t see any
difference in the UI later on .

20. To insert the text itself, open

the
messageBundle.properti
es file and add a new line
categoryLabel=Category.

21. Save your changes (Ctrl+S)

and run the preview again.

22. Congrats – first successful

changes in an xml file .

59
DEV265

23. Now, let‟s add the same text

to the details header.

Open the Detail.view.xml

file and add
{i18n>categoryLabel} as
numberUnit but now in the
ObjectHeader with
id=”detailHeader”.

24. Afterwards, don‟t forget to

save your changes (Ctrl+S)
and have a look at the data
preview again.

25. Additionally, we‟d like to have

information about the Country
for a given customer.

To add this information, go

back to the
Detail.view.xml and
scroll down a bit to add the
“Country” information to the
customer information details
as depicted on the screenshot
and save (Ctrl+S) your
changes.

Hint: You can find the coding

in Step 5, Exercise G in the
CodingApp.

60
DEV265

26. Additionally, insert the

countryLabel into the
messageBundle.properties
file as depicted on the
screenshot.

27. Did you save all your

changes? If yes, let‟s have a
look again at the data preview
– a lot of progress already…
very good!

28. Now, let‟s have a look at the

second icon tab filter.

As you can see, the second

icon tab filter shows the
aggregated gross amount and
the corresponding currency –
so nothing to do on that end.

61
DEV265

29. But compared to the final

application (depicted on the
application screenshot on the
introduction page) we‟re
missing a third icon tab filter,
where we can put the diagram
how many products the given
customer bought. The
information is provided via the
OData entity set
ProductInfoSet. So let‟s
add this information in the
Detail.view.xml and
display the diagram on a third
icon tab filter (of course on
the Details view).

An icon tab filter is used an

sap.makit chart is put into
the content of that icon tab
filter as depicted on the
screenshot… and now I‟m
absolutely sure that you don‟t
want to type it but you‟d rather
like to copy it from the
CodingApp, right? See Step
7, Exercise G.

30. The preview won‟t work yet,

as the app does not know
anything about makit… so
you have to add the xml
namespace at the very
beginning of the
Detail.view.xml.

Finally, don‟t forget to save

(Ctrl+S) your changes.

31. There you go… the preview

now nicely shows a bar chart
diagram. It displays the
number of products ordered
by a given customer.

62
DEV265

32. You might even search for a

customer, e.g. “African Gold”
to see that texts are provided
in English and the fallback
language Spanish.

Almost perfect… just a couple

of steps we‟d like to do for
beautifying the UI and to see
how OData Service errors can
be visualized.

33. So, if you‟re a real

perfectionist, you might want
to add labels to the icons (at
the icon tab filter). Well I am
one, so here‟s a short
description how you can add
them.

Back to the
Detail.view.xml, you‟d
have to add the texts as
shown on the screenshot
(Exercise G, Step9 in the
CodingApp).

63
DEV265

34. And since we are using the

messageBundle.properties
variant, we of course also
need to texts corresponding
to the detailsXY entries in
there.

35. Running the application in the

data preview, you can now
see nice descriptions for the
various icon tab filters.

36. And finally, we‟ll provide a

rudimentary message
handling for OData Service
request failures. For that,
open Components.js and
scroll down to the init
function.

37. Add the call of the

attachRequestFailed
method. In case of an OData
request failure, the method
showRequestFailedError
is called.

64
DEV265

38. Right after the implementation

of the init function, add the
implementation of the
showRequestFailedError
function as depicted on the
screenshot (see Exercise G,
Step 11 in the CodingApp).

And don‟t forget to save

(Ctrl+S) all your changes.

39. Now let‟s see, what happens

if an OData request fails. To
do so, open again the OData
service implementation class
zcl_zdev265_gw_#_dpc_e
xt (for your group number #)
in your Eclipse environment
and simulate a currency
conversion issue by changing
in method
customerinfoset_get_en
tity the parameter value of
lv_target_curr from USD
to USA. Save (Ctrl+S) and
activate (Ctrl+F3) the class.

40. Let‟s see how that translates

to a message in the SAP Web
IDE data preview. As you see,
a message box appears.

Perfect, just as we wanted it

to appear .

65
DEV265

41. But, as we all don‟t like to

finish the exercise with an
error message, please revert
the manipulation of an invalid
target currency in class
zcl_zdev265_gw_#_dpc_e
xt and run the SAP Web IDE
preview again, finally showing
the nice Fiori app we
promised to see at the very
beginning of this document!

Summary Exercise G
Congratulations, you finally did it!

You created an SAP Fiori application based on your SAP Gateway OData service. You started with an SAP
Fiori Master Detail Application and added various descriptions, a bar chart diagram, and even OData
Service request failure messaging to the application. And throughout the exercises you saw the progress
while testing the application using the SAP Web IDE data preview.

Great, you have successfully joined us on our E2E development journey from HANA to Fiori via ABAP!

66
DEV265

H. ADDITIONAL INFORMATION
Interface CDS Views of the Enterprise Procurement Model (EPM)

67
Useful ADT Shortcuts

Edit
Ctrl+Shift+A Open development object
Ctrl+F2 Check development object
Ctrl+F3 Activate development object
Ctrl+Shift+F3 Activate all inactive objects
Ctrl+Space Code completion
Ctrl+1 Quick fix proposal
Ctrl+< Add comment
Ctrl+Shift+< Remove comment
Shift+F1 Format source aka pretty printer
Help
F1 ABAP keyword documentation
F2 Show code element information
Ctrl+3 Search for commands & views
Ctrl+Shift+L List all keyboard shortcuts
Navigate
F3 Open definition
Alt+Left Backward history
Alt+Right Forward history
Ctrl+T Quick hierarchy
F4 Open Type Hierarchy
Ctrl+O Quick outline
Ctrl+Shift+G Where-used list
Run, Debug
F8 Run current ABAP object
Alt+F8 Select & run ABAP application
Ctrl+Shift+B Toggle breakpoint
F5, F6, F7, F8 Step into, over, return, resume

© 2015
2014 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP
and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company)
in Germany and other countries.
Please see http://www.sap.com/corporate-en/about/legal/copyright/index.html#trademark
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional
for additional
trademark
trademark
information
information
and notices.
and notices.