You are on page 1of 46

Build a List Report App with SAP Fiori and

ABAP Programming Model


CNA381

Exercises / Solutions

Las Vegas, October 2nd – 5th


Ingo Bräuninger / SAP
Volker Drees / SAP
Carine Tchoutouo Djomo / SAP

Barcelona, October 23th – 25th


Ingo Bräuninger / SAP
Thomas Gauweiler / SAP

Bangalore, November 28th – 30th


Shyam Balachandran / SAP
Madhumitha MV/ SAP
Karteek Majety / SAP
CNA381

TABLE OF CONTENTS
INTRODUCTION ...............................................................................................................................................3
Your SAP Fiori Elements App ....................................................................................................................3
Data Model ..................................................................................................................................................4
System Details ............................................................................................................................................5
Coding App .................................................................................................................................................5
Involved technologies ................................................................................................................................6
Hints and Tips .............................................................................................................................................7
A. SET UP YOUR ABAP DEVELOPMENT TOOLS IN ECLIPSE .................................................................9
B. ABAP CORE DATA SERVICES & ODATA SERVICES ......................................................................... 12
C. CREATE YOUR SAP FIORI ELEMENTS APPLICATION ...................................................................... 24
D. ABAP CDS METADATA EXTENSIONS ................................................................................................ 29
E. SAP WEB IDE ANNOTATION MODELER............................................................................................. 42
ADDITIONAL INFORMATION ......................................................................................................................... 44

2
CNA381

INTRODUCTION
Welcome to the SAP TechEd 2018 Hands-on session CNA381!
This exercise document will guide you thru the development of an analytical SAP Fiori application with filtering
capabilities, based on the ABAP programming model in SAP S/4HANA making use of some of the latest and
greatest technologies available in the ABAP platform and the SAP Fiori Elements in the SAP Cloud Platform.
This document focusses on the main steps to be performed in the ABAP backend to create a template-based
SAP Fiori Elements on top of an existing Core Data Services based data model.
This session is all about giving you an idea of the end-to-end story!
Before you start, here is some technical information like system details, coding app hints and tips that you will
need during the exercise.

Your SAP Fiori Elements App


The final aim of this session is to create an analytical SAP Fiori Elements application to visualize and filter the
available flight booking data.
The screenshot below shows the resulting SAP Fiori app.

Figure 1: Booking Overview App

3
CNA381

Data Model
The graphic below gives an overview of the different business entity nodes involved in the simplified data model
of the current scenario.

Figure 2: Underlying Data Model

Itinerary Root node of the composition hierarchy. Its only child is the Booking entity.
Booking Sub-node of the composition hierarchy. Itinerary represents its parent and root.
All Others Master data entities, associated with the root or sub-node.

4
CNA381

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

ABAP System ID M31


Application Server wdflbmt0715.wdf.sap.corp
Instance Number 10
ABAP Client 400
ABAP User Name CNA381-## (where ## is your group number)
ABAP Password Welcome18
ABAP Exercise Package ZCNA381_EX_## (where ## is your group number)
SAP Web IDE https://webidecp-mwuyuzwlzl.dispatcher.hana.ondemand.com/
SAP Web IDE User Name Refer to the provided handout (P00-####)

Coding App
Execute transaction ZCNA381_CODING to start the Coding App using the shortcut Alt+F8 and provide your
ABAP user credentials if requested.

Figure 3: Coding App

5
CNA381

Involved technologies

ABAP Core Data Services (CDS)


ABAP CDS provides a data modeling infrastructure for defining and consuming semantically rich data models in
the ABAP platform starting with AS ABAP 7.4 SPS 05. CDS offers advanced data modeling capabilities like field
computation using a rich set of built-in functions, building views on views, associations and table functions. CDS
data models can be enhanced in a modification-free manner at data model using CDS view extensions, but also
at metadata level using CDS metadata extensions. ABAP CDS is a core technology within SAP S/4HANA, and
the ABAP development for SAP HANA in general. Read more >>

CDS Metadata Extension (MDE)


MDEs are used to define CDS annotations for a CDS view outside of the corresponding data definition. A CDS
metadata extension is always assigned to a layer such as core, industry, partner or customer. MDEs allow a
separation of concerns by separating the data model from domain-specific semantics – e.g. UI-related information
for SAP Fiori Elements. Read more >>

Business Object Processing Framework (BOPF)


BOPF is an OO-based framework that provides a set of generic services and functionalities to speed up,
standardize, and modularize your development. BOPF manages the entire life cycle of your business objects and
covers all aspects of your business application development. Instead of expending effort for developing an
application infrastructure, the developer can focus on the individual business logic which can be provided in
dedicated code exists, i.e. determinations, validations and actions. A lightweight CDS-based flavor of BOPF, often
referred to as CDS-based BOPF, has been introduced to handle the transactional calls within the ABAP
programming model for SAP Fiori. Read more >>

Service Adaptation Description Language (SADL)


SADL plays the role of request dispatcher. It enables fast read access to data by directly pushing queries down
to the database (i.e. direct handling of SELECT queries). In case of transactional behavior, it calls the
corresponding BOPF implementation. SADL also joins the texts to the proper fields (associated texts).
There is an annotation interpreter between SADL and SAP Gateway which reads the annotations in the CDS-
based models, provides a metadata service for the UI and generates necessary artifacts. Examples for the latter
is the annotation @OData.publish: true which triggers the generation of an OData service.

SAP Gateway
SAP Gateway is an integral part of ABAP platform which allows the connection of devices, environments, and
platforms to SAP systems. It uses the Open Data Protocol (OData) so you can use any programming language or
model to connect to SAP and non-SAP applications. The Referenced Data Source options is the recommended
approach for exposing CDS-based data model as OData services and is the one used within the ABAP
Programming Model for SAP Fiori when using the CDS annotation @OData.publish: true which triggers the
generation of an RDS-based OData service.

SAP Fiori Elements


SAP Fiori Elements (formerly known as Smart Templates) allows the automatic generation of SAP Fiori apps
based on UI-specific annotations which can for example be specified in a CDS view or in locale annotations
within the SAP Web IDE. The set of predefined domain-specific CDS annotations has been enhanced with such
UI annotations with ABAP 7.5x. The development of Fiori Elements apps take place in the SAP Web IDE. Read
more >>

In the perspective of an application developer, you are in touch various objects as displayed in the graphic:

6
CNA381

Figure 4: Development objects involved in the ABAP Programming Model

You will not get in touch with CDS-based BOPF Business Objects in the present exercises, since we are going
to build an analytical, i.e. read-only, application. BOPF is only needed when building transactional applications.

Hints and Tips


Please note that the screenshots in this document have been taken for user CNA381-00 (i.e. group number: 00).
ADT offers various shortcuts and features to speed up the ABAP development like the code completion feature
using the shortcut Ctrl+Space or the shortcut Ctrl+Shift+A to open an object.
Find a list of useful ADT shortcuts as screenshot (reference cards) below.

7
CNA381

Now, enjoy the exercises!

8
CNA381

A. SET UP YOUR ABAP DEVELOPMENT TOOLS IN ECLIPSE

Explanation Screenshot

1. Open the SAP Development


Tools – ABAP in
Eclipse CNA381
Oxygen.

2. Create a new ABAP


Project using shortcut
Ctrl+Alt+Shift+P.

9
CNA381

Explanation Screenshot

3. Select system M31.

4. Enter your ABAP user


credentials

User: CNA381-##
Password: Welcome18

and press Next.

(## is your group number)

10
CNA381

Explanation Screenshot

5. Add your exercise package

ZCNA381_EX_##
(## is your group number)

as a favorite package and


press Finish.

11
CNA381

B. ABAP CORE DATA SERVICES & ODATA SERVICES

Explanation Screenshot

1. Create a new CDS data


definition in your exercise
package.

2. In the ABAP Repository


Object dialog, navigate to

Core Data Services,

select

Data Definition

and press Next.

12
CNA381

3. Enter a name and a


description for your Data
Definition e.g.

ZCNA381_C_ALP_BOOKIN
GS_##

(## is your group number).

13
CNA381

4. Create a new Transport


Request.

and click on Next.

5. Select the Define View


template and press Finish.

14
CNA381

6. Specify the sql_view


_name in the view definition as

ZCNA381CALPPB##

(## is your group number)

7. … specify your data source


after the select from
statement as

zcna381_i_booking_sol

8. .. and insert all elements


between the curly brackets.

You can use Content Assist


function of ADT for this
purposes.

15
CNA381

9. Your Data Definition


should look as shown in the
screenshot.

10. Save and activate the data


definition.

11. Run the Data Preview by


simply pressing F8 or use the
context menu.

12. The Data Preview is


shown.

16
CNA381

13. Feel free to play around with


the data preview functionality
by using e.g. the Quick
filter.by right-clicking on a
field of a given row entry.

14. Now let’s enhance the


projection as shown on the
screenshot.

Specify key elements by


adding the keyword key
before the elements
id,
itinerary_id
and customername.

Add aliases for the elements.

Remove the element


country
from the projection.

Add some alias names using


the keyword as after each
elements

and add the element


AirlineName
by following the association
_Itinerary.

17
CNA381

15. Next step is to add a virtual


field counter.

and specify its default


aggregation behaviour by
adding the annotation

DefaultAggregation
behaviour: #SUM

directly before it.

18
CNA381

16. Expose the data as OData


Service.

Specify the view annotation

@OData.publish: true

before the define view


statement to create an OData
service.

19
CNA381

17. Save and activate the data


definition.

The OData service is now


created but need to be
activated. This will be done in
the next step.

18. Run the transaction

/IWFND/MAINT_SERVICE

to register the created OData


service on the system. Use the
Shortcut Alt+F8 to open the
Run ABAP Development
Object dialog

19. Press

Add Service

to search for your service.

20
CNA381

20. Enter

LOCAL

as your system alias and

*ALP*##*
(## is your group number)

as your technical service name

Now press

Get Services.

Select your generated OData


service in the in the Select
Backend Services area
and press on

Add Selected
Services.

21. Specify your exercise package

ZCNA381_EX_##

(## is your group number)


for the package assignment.

21
CNA381

22. Select your transport request.

23. You should receive a message


that the service registration
was successful.

Confirm the dialog.

24. Navigate back and select your


Service in the Service
Catalog by using the Filter.

25. Enter again your technical


service name

ZCNA381_C_ALP_BOOKIN
GS_##_CDS

(## is your group number)


and confirm.

22
CNA381

26. Navigate to the

SAP Gateway Client.

27. Press

Execute

to test your service.

28. Verify that your service is


working. If not call the operator
😉.

23
CNA381

C. CREATE YOUR SAP FIORI ELEMENTS APPLICATION

Explanation Screenshot

1. Start the SAP Web IDE Full-


Stack in the Chrome browser.

Use the link within your Coding App.

https://webidecp-
mwuyuzwlzl.dispatcher.hana.ondema
nd.com/

2. Logon with the SAP Web IDE user


credentials provided on the handout.

User: P00####

Password: Welcome18

24
CNA381

Explanation Screenshot

3. Open your workspace.

4. Create a New Project from


Template.

5. Select the category

SAP Fiori Elements.

Click on

Analytical List Page/


Object Page

and press Next.

25
CNA381

Explanation Screenshot

6. Enter a

Project Name, Title &


Namespace (e.g. ca)

and press Next.

7. Maintain the data connection to the


ABAP backend system.

Select the entry

M31 – TechEd 2018

from the drop-down box and filter for


your Service and sign in with your
ABAP credentials if required.

User: CNA381-##
Password: Welcome18

Select your service:

ZCNA381_C_ALP_
BOOKINGS_##_CDS

and press Next.

(## is your group number)

8. Press Next.

26
CNA381

Explanation Screenshot

9. Select the addressable OData


collection from the appropriate drop-
down box:

ZCNA381_C_ALP_BOOKINGS_##
(## is your group number)

Select the table type from the


appropriate drop-down box:

Analytical

Keep all other attributes as they are.

Press Finish.

10. After the project was created


successfully, open the

webapp

folder, select the file

Component.js

and start the application.

27
CNA381

Explanation Screenshot

11. Enter your ABAP user credentials

User: CNA381-##
(## is your group number)
Password: Welcome18

to logon to the backend system.

12. You should receive an error because


there are no UI elements defined yet.

So now let’s create a CDS metadata extension and add some UI annotations to get a nice UI. 😊

28
CNA381

D. ABAP CDS METADATA EXTENSIONS

Explanation Screenshot

1. Create a new

Metadata Extension
Repository Object

in you exercise package

2. Enter a name and a description and

ZCNA381_E_ALP_BOOKINGS_##
(## is your group number)

Press Next.

29
CNA381

Explanation Screenshot

3. Select your transport request


and press Next.

4. Choose the metadata extension


template

Annotate View

and press Finish.

30
CNA381

Explanation Screenshot

5. Use the Content Assist

and enter the view annotation

@Metadata.layer: #CORE

before the annotate view


statement.

6. Specify your CDS view name after the


view statement

ZCNA381_C_ALP_BOOKINGS_##
(## is your group number).

7. Use the

Quick Fix (Ctrl+1)

to add the required annotation

@Metadata.allowExtensions:
true

to the base view.

31
CNA381

Explanation Screenshot

8. The annotation is added in the data


definition

ZCNA381_C_ALP_BOOKINGS_##
(## is your group number).

9. Save and activate the data definition.

32
CNA381

Explanation Screenshot

10. Navigate back to the


CDS metadata extension

ZCNA381_E_ALP_BOOKINGS_##
(## is your group number)

and use the Content Assist


between the curly brackets to insert all
elements.

11. All elements are displayed, and the


syntax check is displaying errors
because no UI annotation is maintained
yet!

33
CNA381

Explanation Screenshot

12. So let’s add the view annotation

@UI.headerInfo

before the annotate view


statement.

13. Add the element annotation

@UI.hidden: true

for the fields BookingId and


ItineraryId to hide the identifiers in
our app.

14. Use the element annotation

UI.lineItem

to display the fields by default in the


smart table.

15. Comment the association to Itinerary

_Itinerary.

34
CNA381

Explanation Screenshot

16. Save and activate the CDS metadata


extension.

17. Go back to the browser and refresh


your app (F5 or Shift+F5).

You should now see your bookings in


the ALP smart table.

(ALP: Analytical List Page)

18. Feel free to use the Maximize icon to


see the data in full screen mode.

35
CNA381

Explanation Screenshot

19. Next step is to create the column chart


to display the booking information per
customers.

For that, add the view annotation

@UI.chart

before the annotate view


statement.

Feel free to use the Content Assist or


use the code snippet from the Coding
App.

20. Save and activate your CDS metadata


extension.

21. Refresh your app in the browser.

36
CNA381

Explanation Screenshot

22. Now let’s add the view annotation

@UI.presentationVariant –
sortOrder

to influence the ordering of the chart


data.

23. Save and activate your CDS metadata


extension.

24. Refresh your app in the browser.

37
CNA381

Explanation Screenshot

25. Now let’s focus on the filters.

If you navigate to the


Adapt Filters

(on the right-upper corner of your app),


you will see that no Default Filters are
configured.

26. Specify the element annotation

@UI.selectionField

for the field

AirlineName.

27. Save and activate your CDS metadata


extension.

38
CNA381

Explanation Screenshot

28. Refresh your app in the browser and


open the filters again.

You will see the Airline Name as a


Basic filter.

29. If you open the filter you will see that


the UI5 default filter is shown.

30. Let’s specify the element annotation

@Consumption.valueHelpDefi
nition

for the field

AirlineName.

to change the filter to an Value Help


(aka F4 help).

31. Save and activate the CDS metadata


extension.

39
CNA381

Explanation Screenshot

32. Refresh your app in the browser and


open the filter.

You will notice that the filter behavior


has changed.

33. The Last two steps are to define a


visual filter. Therefore add a qualifier,
and the visualization type to the

@UI.presentationVariant

Again: Use either the Content


Assist or use the Coding App for the
code snippet.

40
CNA381

Explanation Screenshot

34. Last step is to define a visual filter


within the view annotation

@UI.chart.

Again: Use either the Content


Assist or use the Coding App for the
code snippet.

35. Save and activate the CDS metadata


extension.

36. If you refresh your app in the browser,


you will notice that the Visual
Filter is still not visible.

Unfortunately, this is not supported in


the current ABAP release we are using.

Thus we will use the


SAP Web IDE Annotation
Modeler to achieve it.

41
CNA381

E. SAP WEB IDE ANNOTATION MODELER

Explanation Screenshot

1. Go to your workspace in the


SAP Web IDE and open the
file

annotations.xml

within your workspace


project.

You may have to switch to


the Code Editor view.

2. Copy the code snippet from


the appropriate exercise in
the Coding App.

Scroll down to the bottom of


the Code Editor and paste it
into the annotations.xml
source as shown on the
screenshot.

Replace the ## with your


group number and save the
source.

Please note that CDS entity


names are case sensitive,
thus camelCase, lower or
upper case should be
respected in the annotation
file.

42
Explanation Screenshot

3. Refresh your app in the


browser.

Et voila! 😊

Congratulations! You made it to the end of the exercise!


We hope you enjoyed this hands-on session.

Feedback

Please complete your session


evaluation for CNA381

43
ADDITIONAL INFORMATION

Related SAP TechEd 2018 Content Journeys


CNA6 – How to Move Your ABAP Skills to the Cloud and SAP HANA
CNA4 – How to get to SAP S/4HANA

Related SAP TechEd 2018 Sessions

CNA120 ABAP Strategy


CNA215 Set the Big Picture of the ABAP RESTful Programming Model
CNA216 A Technical deep dive into the ABAP RESTful Programming Model
CNA302 Custom Code Adaptation for SAP S/4HANA
CNA317 Automated Testing with the ABAP RESTful Programming Model
CNA319 Optimize your Custom ABAP Code for SAP HANA
CNA364 Custom Code Adaptation for SAP S/4HANA
CNA379 Build a transactional SAP Fiori App with the ABAP Programming Model
CNA653 Troubleshoot Your SAP Fiori App with ABAP Development Tools for Eclipse
CNA654 Build a SAP Fiori with the ABAP Programming Model

SAP Documentation

About ABAP Programming Model for SAP Fiori:


In the SAP Help Portal:
https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.52.2/en-
US/3b77569ca8ee4226bdab4fcebd6f6ea6.html

In the ABAP Development Tools (ADT) in Eclipse:


Select the ADT menu Help > Help Contents.
The Help will open and you can find all related content and E2E Guides under SAP About ABAP Programming Model for
SAP Fiori. Detailed information about ABAP Core Data Services (CDS) is also available in the documentation.

44
About SAPUI5 and SAP Fiori Elements
SAPUI5 and SAP Fiori Elements

About SAP Web IDE:


SAP Cloud Platform, SAP Web IDE | SAP Web IDE Personal Edition

SAP Community Links


Getting started with ABAP Programming Model for SAP Fiori:
https://blogs.sap.com/2016/04/04/getting-started-abap-programming-model/

Getting started with ABAP Core Data Services


https://blogs.sap.com/2016/02/01/getting-started-with-abap-core-data-services/

45
www.sap.com/contactsap

© 2018 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.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation
or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the
materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the
express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this
document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any
related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or
platforms, directions, and functionality are all subject to change and may be changed by SAP SE or its affiliated companies a t
any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to
deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that
could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these
forward-looking statements, and they should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See https://www.sap.com/copyright for additional trademark information and notices.

You might also like