Professional Documents
Culture Documents
Exercises / Solutions
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.
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.
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:
Coding App
Execute transaction ZCNA381_CODING to start the Coding App using the shortcut Alt+F8 and provide your
ABAP user credentials if requested.
5
CNA381
Involved technologies
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.
In the perspective of an application developer, you are in touch various objects as displayed in the graphic:
6
CNA381
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.
7
CNA381
8
CNA381
Explanation Screenshot
9
CNA381
Explanation Screenshot
User: CNA381-##
Password: Welcome18
10
CNA381
Explanation Screenshot
ZCNA381_EX_##
(## is your group number)
11
CNA381
Explanation Screenshot
select
Data Definition
12
CNA381
ZCNA381_C_ALP_BOOKIN
GS_##
13
CNA381
14
CNA381
ZCNA381CALPPB##
zcna381_i_booking_sol
15
CNA381
16
CNA381
17
CNA381
DefaultAggregation
behaviour: #SUM
18
CNA381
@OData.publish: true
19
CNA381
/IWFND/MAINT_SERVICE
19. Press
Add Service
20
CNA381
20. Enter
LOCAL
*ALP*##*
(## is your group number)
Now press
Get Services.
Add Selected
Services.
ZCNA381_EX_##
21
CNA381
ZCNA381_C_ALP_BOOKIN
GS_##_CDS
22
CNA381
27. Press
Execute
23
CNA381
Explanation Screenshot
https://webidecp-
mwuyuzwlzl.dispatcher.hana.ondema
nd.com/
User: P00####
Password: Welcome18
24
CNA381
Explanation Screenshot
Click on
25
CNA381
Explanation Screenshot
6. Enter a
User: CNA381-##
Password: Welcome18
ZCNA381_C_ALP_
BOOKINGS_##_CDS
8. Press Next.
26
CNA381
Explanation Screenshot
ZCNA381_C_ALP_BOOKINGS_##
(## is your group number)
Analytical
Press Finish.
webapp
Component.js
27
CNA381
Explanation Screenshot
User: CNA381-##
(## is your group number)
Password: Welcome18
So now let’s create a CDS metadata extension and add some UI annotations to get a nice UI. 😊
28
CNA381
Explanation Screenshot
1. Create a new
Metadata Extension
Repository Object
ZCNA381_E_ALP_BOOKINGS_##
(## is your group number)
Press Next.
29
CNA381
Explanation Screenshot
Annotate View
30
CNA381
Explanation Screenshot
@Metadata.layer: #CORE
ZCNA381_C_ALP_BOOKINGS_##
(## is your group number).
7. Use the
@Metadata.allowExtensions:
true
31
CNA381
Explanation Screenshot
ZCNA381_C_ALP_BOOKINGS_##
(## is your group number).
32
CNA381
Explanation Screenshot
ZCNA381_E_ALP_BOOKINGS_##
(## is your group number)
33
CNA381
Explanation Screenshot
@UI.headerInfo
@UI.hidden: true
UI.lineItem
_Itinerary.
34
CNA381
Explanation Screenshot
35
CNA381
Explanation Screenshot
@UI.chart
36
CNA381
Explanation Screenshot
@UI.presentationVariant –
sortOrder
37
CNA381
Explanation Screenshot
@UI.selectionField
AirlineName.
38
CNA381
Explanation Screenshot
@Consumption.valueHelpDefi
nition
AirlineName.
39
CNA381
Explanation Screenshot
@UI.presentationVariant
40
CNA381
Explanation Screenshot
@UI.chart.
41
CNA381
Explanation Screenshot
annotations.xml
42
Explanation Screenshot
Et voila! 😊
Feedback
43
ADDITIONAL INFORMATION
SAP Documentation
44
About SAPUI5 and SAP Fiori Elements
SAPUI5 and SAP Fiori Elements
45
www.sap.com/contactsap