.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
.
S4DEV
Hands-on Introduction to
Application Programming on SAP
S/4HANA
.
PARTICIPANT HANDBOOK
INSTRUCTOR-LED TRAINING
Course Version: 10
Course Duration: 3 Day(s)
Material Number: 50145640
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
SAP Copyrights and Trademarks
© 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.
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://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
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 SE or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP SE 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 platform directions and functionality are
all subject to change and may be changed by SAP SE or its affiliated companies at 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, which speak
only as of their dates, and they should not be relied upon in making purchasing decisions.
© Copyright. All rights reserved.
iii
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Typographic Conventions
American English is the standard used in this handbook.
The following typographic conventions are also used.
This information is displayed in the instructor’s presentation
Demonstration
Procedure
Warning or Caution
Hint
Related or Additional Information
Facilitated Discussion
User interface control
Example text
Window title
Example text
iv
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Contents
vii
Course Overview
1
Unit 1:
2
7
11
19
23
Foundation
Lesson: Exploring SAP S/4HANA
Exercise 1: Explore the SAP S/4HANA System Landscape
Lesson: Exploring SAP Fiori
Exercise 2: Test SAP Fiori Application
Unit 2:
Data Modeling
24
29
33
49
57
Lesson: Working with ABAP Development Tools (ADT)
Exercise 3: Create a Project and a Package in ADT
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Exercise 4: Analyze Existing CDS Views
Lesson: Creating CDS Views
63
Exercise 5: Define CDS Views and a Mapping Role
73
Unit 3:
74
81
85
89
93
Lesson: Exploring SAP Gateway
Exercise 6: Test SAP Gateway Service
Lesson: Publishing Gateway Services based on CDS Views
Exercise 7: Implement OData.publish in CDS View
Unit 4:
94
111
119
123
135
145
166
179
193
198
209
221
User Interface
Lesson: Developing UIs with SAPUI5
Exercise 8: Create a Simple SAPUI5 Application
Exercise 9: Deploy an SAPUI5 Application on an ABAP Server
Lesson: Consuming Business Data using SAP Fiori Elements
Exercise 10: Create a List Report Application
Exercise 11: Configure a List Report Application Using CDS
Annotations
Exercise 12: Deploy a List Report Application
157
165
Data Service
Unit 5:
Transactional Processing
Lesson: Enabling Change Operations
Exercise 13: Enable Create, Update, and Delete Operations
Exercise 14: Provide Draft Capabilities
Lesson: Implementing Additional Functionality
Exercise 15: Expose an Action to the Consumer
Exercise 16: Provide Value Helps
© Copyright. All rights reserved.
v
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
229
230
235
239
243
vi
Unit 6:
Application Provisioning
Lesson: Exploring SAP Fiori Launchpad Configuration
Exercise 17: Reference SAP Fiori Catalog
Lesson: Configuring Target Mappings
Exercise 18: Create SAPUI5 Target Mapping
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Course Overview
TARGET AUDIENCE
This course is intended for the following audiences:
●
Developer
●
Development Consultant
© Copyright. All rights reserved.
vii
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
viii
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 1
Foundation
Lesson 1
Exploring SAP S/4HANA
Exercise 1: Explore the SAP S/4HANA System Landscape
2
7
Lesson 2
Exploring SAP Fiori
Exercise 2: Test SAP Fiori Application
11
19
UNIT OBJECTIVES
●
Explore SAP S/4HANA
●
Explore SAP Fiori
© Copyright. All rights reserved.
1
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Lesson 1
Exploring SAP S/4HANA
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAP S/4HANA
SAP HANA
Figure 1: Evolution of ERP
With SAP R/2, SAP started to deliver screens to specialists so that they can enter information
into the system. These users were experts in their fields and they were trained to use the
system. Today even the operation of an ERP is more like controlling a machine or using an
interface to a business function than an intuitive and self-explaining UI.
With S/4HANA, SAP is executing on the vision to empower every customer employee to use
SAP business software. The "S" in S/4HANA stands for Simple, but it also stands for Suite.
And the "4" stands for fourth generation. The complete name is SAP Business Suite 4 for SAP
HANA (S/4HANA).
2
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP S/4HANA
Figure 2: Advances in Hardware Technology
Historically, the amount of memory was limited because of its high costs. This caused a
serious bottleneck in the data flow from disk to the Central Processing Unit (CPU). Today
memory is no longer a problem. SAP HANA runs on hardware with many terabytes of
memory. With so much memory available, entire databases of even large organizations can
be stored completely inside memory. Without the need for mechanical spinning disks, data is
accessed instantly, without any waiting time.
In addition to huge memory, the processors continue to improve at a phenomenal rate. Today
there are high-speed multi-core processors that can take on multiple complex tasks and
process them in parallel. This means response times for even complex analytical tasks such
as predictive analysis can be carried out in real-time.
Figure 3: Managing the Memory Bottleneck
© Copyright. All rights reserved.
3
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
Modern processors can manage on-board memory called CPU cache. The new generation of
CPUs manages on board cache in hierarchical layers. A nanosecond is one billionth of a
second. One nanosecond is to one second, as one second is to 31.71 years. So a nanosecond
is fast and it is the measure of how processor speeds need to perform for modern application
in a leading business operating in the digital world.
From the very beginning of SAP HANA development in 2008, SAP worked closely with the
CPU manufacturers in co-development projects in order to understand how to exploit all the
power from their next generation processors. We especially needed to understand how data
moves from memory to core so we could code in exactly the right way to get the most out of
the processors.
SAP S/4HANA
Figure 4: From SAP HANA to SAP S/4HANA
SAP S/4HANA is the next generation business suite that help lines of business and industries
run simply. SAP S/4HANA combines the most recent innovations (SAP HANA platform, SAP
Fiori UX) with more than 40 years of experience in mastering complex industry challenges in a
new suite that caters to a digital, networked economy. SAP Simple Finance was the first
available S/4HANA optimized solution.
Figure 5: SAP S/4HANA Simplicity
4
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP S/4HANA
From an IT value perspective, SAP S/4HANA creates unique opportunities to dramatically
simplify the landscape and reduce TCO with SAP HANA as the great simplifier. Business users
can leverage a simple and role-based user experience based on modern design principles
minimizing training efforts while increasing productivity. Guided configurations ease the
requirements for creating settings in the areas of system administration up to application
customizing. Enterprises can now significantly reduce their data footprint and work with
larger data sets in one system to save hardware costs, operational costs, and time.
Here are key facts on SAP S/4HANA:
●
Faster analytics and reporting
●
Less process steps
●
ERP, CRM, SRM,SCM, PLM co-deployed
●
All data: social, text, geo, graph, processing
●
No locking, parallelism
●
Actual data (25%) and historical (75%)
●
Smaller total data footprint
●
SAP Fiori UX for any device
Figure 6: SAP Fiori System Landscape
The system landscape for SAP Fiori consists mainly of an SAP Front-End Server (FES) and an
SAP Back-End Server (BES). These are system roles of an Application Server (AS) ABAP. The
back-end server is an SAP S/4HANA, which holds applications and data of any area based on
an AS ABAP 7.50 or higher. The front-end server is a basic AS ABAP 7.50 or higher without
any business products installed.
The SAP Fiori launchpad (FLP) is the new entry point for users to carry out daily task.
Although FLP is able to communicate with the FES directly, the recommendation is to use an
SAP Web Dispatcher or another reverse proxy between FLP and FES in external facing
scenarios and also internally. The reason is that for some features of the FLP, multiple
© Copyright. All rights reserved.
5
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
systems have to be reached, which is forbidden in web communication for a good reason. A
reverse proxy offers a single point of communication. It holds routing rules and forward
requests to the correct target systems.
6
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Exercise 1
Explore the SAP S/4HANA System Landscape
Log in to the SAP Secure Login Client. From there, log in via Single-Sign On (SSO) to the frontend and back-end server. Check the release information of both servers.
Note:
Login information will be provided by your trainer.
1. Log in to your training landscape.
2. Log in to the SAP Secure Login Client of your training landscape.
3. Log in to your Back-End Server (BES) and note the SAP S/4HANA release.
Release: ___________________________________
4. Log in to your Front-End Server (FES) and note the SAP Fiori Front-End Server release.
Release: ___________________________________
© Copyright. All rights reserved.
7
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Solution 1
Explore the SAP S/4HANA System Landscape
Log in to the SAP Secure Login Client. From there, log in via Single-Sign On (SSO) to the frontend and back-end server. Check the release information of both servers.
Note:
Login information will be provided by your trainer.
1. Log in to your training landscape.
a) Follow the guidance of your trainer.
2. Log in to the SAP Secure Login Client of your training landscape.
a) In the Windows taskbar, choose SAP Secure Login Client.
b) In the SAP Secure Login Client, right-click on SAP AS Java Authentication and choose
Log In....
c) In the Username field, enter your username.
d) In the Password field, enter your password.
e) Choose OK.
3. Log in to your Back-End Server (BES) and note the SAP S/4HANA release.
Release: ___________________________________
a) In the Windows start menu, choose SAP Logon.
b) Select the SAP GUI SNC system entry of your BES.
c) Choose Log On.
d) In the menu, choose System → Status....
e) Choose Component.
f) Choose Installed Product Versions.
g) Select the product S4HANA ON PREMISE.
4. Log in to your Front-End Server (FES) and note the SAP Fiori Front-End Server release.
Release: ___________________________________
a) In the SAP Logon, select the SAP GUI SNC system entry of your FES.
b) Choose Log On.
c) In the menu, choose System → Status....
d) Choose Component.
8
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP S/4HANA
e) Choose Installed Product Versions.
f) Select the product SAP FIORI FRONT-END SERVER.
© Copyright. All rights reserved.
9
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
LESSON SUMMARY
You should now be able to:
●
10
Explore SAP S/4HANA
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Lesson 2
Exploring SAP Fiori
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAP Fiori
SAP Fiori Design
Figure 7: What is SAP Fiori
SAP Fiori is a collection of apps, which are based on, and represent, the rules of the SAP User
Experience. At the SAPPHIRE 2013 conference, the first 25 apps for managers and employees
with functions for request and approval had been released.. Since then the number of apps
has increased tremendously.
© Copyright. All rights reserved.
11
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
Figure 8: SAP Fiori Dimensions
The three dimensions, in which SAP Fiori is defined, are Design, Concept, and Technology. In
each dimension, rules and guidelines – starting with optic, handling, interactions, and
architectures, up to technologies in development and system landscape – are in place to set
the definition of what SAP Fiori really is.
Design
The SAP Fiori design is more than just the definition of colors and fonts. It describes in
detail, what an SAP Fiori app should look like for a certain purpose, how information is
presented and edited, and how the interaction between the user and the UI should work.
All details of the SAP Fiori design are available as guidelines for general use at: https://
experience.sap.com/fiori-design.
Technology
A lot of technologies are used in SAP Fiori, so it is important to define which ones are for
which purpose and how they should be used. There are rules on how to develop new apps
but also how existing legacy apps can be integrated in SAP Fiori.
Concept
Users should have a consistent, coherent, simple, intuitive, and delightful user
experience on all devices, to be able to work better and more efficiently. The five design
principles of SAP Fiori are at the core of every Fiori app to fulfill these goals. The rolebased approach is, therefore, the biggest change compared to classic user interfaces.
12
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori
Figure 9: Role-Based User Experience
A role-based user experience means that end users get all information and functions they
need for their daily work – but no more. The classic SAP User Interface (UI) often offers a
single complex transaction for many user roles. The tasks of a single user then makes it
necessary to use multiple transactions or additional applications.
SAP Fiori decomposes these big transactions into several discrete apps suiting the user roles.
All apps are connected to each other so that all tasks of the transaction are still possible but
are only performed if the user requires it. The SAP Fiori launchpad then serves as the central
entry-point to all apps for a user.
© Copyright. All rights reserved.
13
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
SAP Fiori Launchpad
Figure 10: Coherent Experience Across Enterprise
The SAP Fiori Launchpad (FLP) offers a coherent user experience across different enterprise
solutions by utilizing the capabilities of the user role to combine the decomposed apps in one
user interface. Each app represents one individual step for one specific role. Several apps
combined represent a complete process covering different enterprise solutions and systems.
This is a shift from monolithic solutions to activity-based apps, and a role-based simplification
of business processes.
Figure 11: SAP Fiori 2.0 Viewport
14
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori
With SAP S/4HANA 1610, SAP Fiori 2.0 is shipped to customers. The SAP Fiori launchpad
now offers a viewport consisting of the Me Area to the left, the Workspace in the center, and
the Notifications to the right. The Me Area is an enhanced user menu providing access to
frequently used apps and recent activities. The Notifications on the other side provide fast
access to information and tasks including simple actions. The Workspace in between offers
groups consisting of apps. Each app is represented by a tile, which can be clicked or touched
to start the app. Tiles can offer summarized information about the data available for the user
in the app. The whole design of SAP Fiori 2.0 was rewarded with the “Red Dot Design Award”
in 2015.
The FLP can be started by using the URL https://<host>:<port>/sap/bc/ui2/flp or by calling
the transaction /UI2/FLP on the FES.
SAP Fiori Programming Model
Figure 12: ABAP Code Push-Down
SAP HANA can perform calculations on the data level much faster than any previous
technology – including ABAP programs. In the SAP Business Suite, the data was brought to
the code meaning it was read from the database and processed in the AS ABAP. With SAP
HANA it is more efficient to bring the code to the data meaning to push-down calculations
from AS ABAP in SAP HANA and only transfer the results back.
Figure 13: ABAP Code Top-Down Approach
Moving calculations to the database to benefit of their features is not new with SAP HANA.
Stored procedures were possible before to be used for calculations in many databases. But
they were seldom used in ABAP because they only ran in the database they were developed in
and were therefore not transportable. With SAP S/4HANA, the ABAP Repository was
extended with two new database objects: Core Data Service (CDS) Views and ABAP Managed
© Copyright. All rights reserved.
15
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
Database Procedures (AMDP). CDS Views are deployed as HANA views in the HANA
Database (HDB) and the AMDPs are deployed as stored procedures. That is comparable to
deploying a transparent table of the ABAP repository as a database table in any DB.
Figure 14: Development Flow
The complete development flow since SAP S/4HANA 1610 is moving in the direction of
metadata-driven development with CDS views at the center. The pure data definition for
accessing the database tables is enriched by metadata extensions consisting of annotations,
which can be part of the CDS view, or organized in separate files. These annotations can, for
example, access search objects, call BOPF (Business Object Processing Framework)
business objects for CRUD-support, or enable the draft concept in Fiori apps.
For the UI-part, annotations are used to publish the Gateway service to be consumed by apps
based on SAPUI5. If using SAP Fiori elements, the UI structure and behavior is completely
managed by the metadata extensions.
16
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori
Figure 15: SAP Fiori Programming Model
The SAP Fiori Programming Model describes the possibilities and best practices of how to
develop in SAP S/4HANA. The goal is to provide the best user experience for the user to
access and work with data in SAP S/4HANA. For the UI part, SAPUI5 apps embedded in the
SAP Fiori launchpad are set as standard. Also set is the SAP Gateway as data provider,
offering OData services in an ABAP system.
For accessing data in application tables, SAP Gateway uses the Service Adaptation Definition
Language (SADL) to access CDS views. There everything is defined to read data from
application tables, so no additional (ABAP) code must be written by any developer.
To enable write access to application tables, functions of the Business Object Processing
Framework (BOPF) are attached to the CDS view. SADL then uses these functions to provide
write access to applications and also draft tables.
If an application scenario is not possible to be solved using SADL with CDS views and BOPF, it
is still possible to develop ABAP code to access application tables or CDS views or any other
available resource.
© Copyright. All rights reserved.
17
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
18
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Exercise 2
Test SAP Fiori Application
Start the SAP Fiori launchpad of your Front-End Server (FES). Add a draft-enabled SAP Fiori
list report to your workspace and test it.
Note:
Login information will be provided by your trainer.
1. Start the SAP Fiori launchpad of your Front-End Server (FES) in Internet Explorer and
examine the URL.
2. Add the Manage Customer Bookings tile of the S4DEV Customer catalog to your My Home
group.
3. In the Manage Customer Bookings app, create an empty draft of a booking for a customer
of your choice.
4. In the Manage Customer Bookings app, search for your booking draft and complete the
booking.
© Copyright. All rights reserved.
19
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1
Solution 2
Test SAP Fiori Application
Start the SAP Fiori launchpad of your Front-End Server (FES). Add a draft-enabled SAP Fiori
list report to your workspace and test it.
Note:
Login information will be provided by your trainer.
1. Start the SAP Fiori launchpad of your Front-End Server (FES) in Internet Explorer and
examine the URL.
a) In the Windows start menu, choose Internet Explorer.
b) In the Internet Explorer favorites, choose the SAP Fiori launchpad of your FES.
c) Examine the URL.
2. Add the Manage Customer Bookings tile of the S4DEV Customer catalog to your My Home
group.
a) Choose your user in the upper left corner.
b) In the Me Area, choose App Finder.
c) In the list of catalogs on the left, choose S4DEV Customer.
d) Click the pin of the Manage Customer Bookings tile.
e) Select My Home.
f) Choose OK.
g) Choose Back.
3. In the Manage Customer Bookings app, create an empty draft of a booking for a customer
of your choice.
a) Choose the Manage Customer Bookings tile.
b) Choose Go.
c) Choose a customer of your choice.
d) Choose Edit.
e) Choose Add or the plus for Bookings.
f) Choose Back twice.
4. In the Manage Customer Bookings app, search for your booking draft and complete the
booking.
a) In the Editing Status dropdown, select Own Draft.
20
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori
b) Choose Go.
c) Choose the Draft link of your booking draft.
d) Close the Draft dialog box.
e) Choose your booking draft.
f) Choose your empty booking in the list.
g) Fill in all required fields with values of your choice.
h) Choose Back.
i) Choose Save.
j) Choose Back.
© Copyright. All rights reserved.
21
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 1: Foundation
LESSON SUMMARY
You should now be able to:
●
22
Explore SAP Fiori
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 2
Data Modeling
Lesson 1
Working with ABAP Development Tools (ADT)
Exercise 3: Create a Project and a Package in ADT
24
29
Lesson 2
Exploring Core Data Services ABAP (CDS ABAP)
Exercise 4: Analyze Existing CDS Views
33
49
Lesson 3
Creating CDS Views
Exercise 5: Define CDS Views and a Mapping Role
57
63
UNIT OBJECTIVES
●
Work with ABAP Development Tools
●
Understand the Basics of Core Data Services (CDS)
●
Open and Analyze a Data Definition
●
Open and Analyze an Access Control
●
Define a CDS View
●
Define a Mapping Role
© Copyright. All rights reserved.
23
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Lesson 1
Working with ABAP Development Tools (ADT)
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Work with ABAP Development Tools
Eclipse-Based ABAP Development
ABAP Development Tools (ADT) is an alternative to the ABAP Workbench. ADT provides the
following features:
●
A complete new ABAP development experience on top of the Eclipse platform
●
An open platform for developing new ABAP-related tools
●
A set of open, language-independent, and platform-independent APIs that developers can
use to build new custom tools for the ABAP environment
Figure 16: Eclipse-based ABAP Development
Benefits of Developing in Eclipse
With ABAP Development Tools in Eclipse, you benefit from the usability, speed, and flexibility
of Eclipse, while also benefitting from proven ABAP Workbench features. ADT improves
developer productivity by offering better refactoring functionality, code completion, auto-
24
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Working with ABAP Development Tools (ADT)
insertion, and code templates. It also includes an invaluable Quick Fix feature and is highly
navigable.
ADT allows you to connect to multiple ABAP systems and provides session failover, reducing
the impact of lost connections. It also enables cross-platform development by integrating
ABAP and non-ABAP development tools in a single, powerful, integrated development
environment (IDE).
The architecture of ABAP Development Tools for SAP NetWeaver is designed to allow
developers to use a single Eclipse client, installed locally, that connects to several ABAP backend systems of different releases. This allows developers to control all activities in a central
location and helps avoid time-consuming context switches. The client provides a set of
standard Eclipse development tools, such as the project explorer for system browsing and
search views.
ADT Overview
Figure 17: ADT_Getting started_Selection of Perspective.pptx
Eclipse allows development in many different programming languages. To support this,
Eclipse contains different combinations of tools, called Perspectives. If you have ADT
installed, you can switch to the ABAP perspective. Choose Window → Open
Perspective → Other... → ABAP in the menu bar or choose the Open Perspective button.
© Copyright. All rights reserved.
25
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 18: Creating a Project
When you use ADT, you log on to an SAP back-end system and work directly with its
repository objects. In a sense, the development process is exactly the same as when you use
the ABAP Workbench; there is no manual check-out and check-in of the objects.
An ABAP project serves as a container for the development objects that are stored in a
particular ABAP back-end system, and contains the logon parameters for the system logon —
system, client, user, and language. You must be logged on to the system to edit an object.
Within the ABAP project, you can access any development object in the repository. In
addition, to make it easier to manage objects you can set up favorite packages for each
project.
Editing Repository Objects in ADT
Figure 19: Editing Repository Objects
26
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Working with ABAP Development Tools (ADT)
The Project Explorer provides a hierarchical view of the repository, similar to the navigation
area of the ABAP workbench. Under each project, you can maintain a list of favorite packages.
By expanding the System Library node, you see a list of all the packages.
To open a specific repository object in its respective editor, double-click it. The editor is
shown on the right side of the ABAP perspective. For each new object, a new tab is added.
This simplifies the navigation between editors and objects.
Different Types of Editors
Figure 20: Editors – Native or Integrated SAP GUI
There are two types of editors in the ABAP development tools:
●
Editors for which there is a native Eclipse implementation
For example, ABAP Editor
●
Editors that are displayed in an in-place SAP graphical user interface (GUI)
For example, ABAP transaction editor with the classic SAP GUI visualization appearing
within the Eclipse environment
In the figure, Editors – Native or Integrated SAP GUI, you can see an example of both types.
There is no requirement to use ADT for ABAP Development, and each developer is free to
choose whether to use ADT or the classic ABAP Workbench. The functions and features of
Eclipse and ADT lend themselves particularly well to object-oriented programming. Among
these features are various built-in refactoring functions and support for unit testing. There are
other tasks to which the ABAP Workbench is better suited — in particular working with
module pools and screens.
© Copyright. All rights reserved.
27
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Documentation, Installation and Support for ABAP Development Tools
Figure 21: Further Information
If you are looking for a local installation of ADT, you can choose from the following sources:
●
●
●
28
SAP Software Download Center (https://support.sap.com/en/my-support/softwaredownloads.html)
SAP Development Tools for Eclipse website (http://tools.hana.ondemand.com). You can
also find other products, such as the SAP HANA studio or the tools for SAPUI5
development on this site.
SAP Community Network pages (http://scn.sap.com/community/abap/eclipse) provide
documentation and support on how to install the SAP Development Tools for Eclipse.
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Exercise 3
Create a Project and a Package in ADT
Create a New ABAP Project in ADT
Open ABAP Development Tools. Create a project for application server S4D and add package
DEVS4DEV_BES as a favorite package under this project.
1. To open ABAP Development Tools, start Eclipse and open the ABAP perspective.
2. Create a project for system S4D. Use the client, user ID, and password provided by your
instructor.
3. Add the package DEVS4DEV_BES to the favorites of this project.
Create a Package with ADT
In your project, create a new development package ZS4DEV_##_BES (where ## stands for
your group number) and add it to the favorite packages in your project.
1. In ADT, create a new development package ZS4DEV_##_BES (where ## stands for your
group number).
2. Add your package ZS4DEV_##_BES to the favorite packages under your project.
© Copyright. All rights reserved.
29
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Solution 3
Create a Project and a Package in ADT
Create a New ABAP Project in ADT
Open ABAP Development Tools. Create a project for application server S4D and add package
DEVS4DEV_BES as a favorite package under this project.
1. To open ABAP Development Tools, start Eclipse and open the ABAP perspective.
a) From the Microsoft Windows start menu, choose Start → All Programs → Eclipse.
b) If the Welcome page is open, close it or choose the Workbench link.
c) Change to the ABAP perspective using the button in the upper right-hand corner.
2. Create a project for system S4D. Use the client, user ID, and password provided by your
instructor.
a) Right-click anywhere in the Project Explorer window on the left and choose
New → ABAP Project.
b) Click the Browse button and choose system connection S4D. Choose OK followed by
Next.
c) Enter the client, user ID, and password given to you by your instructor. Choose Finish .
3. Add the package DEVS4DEV_BES to the favorites of this project.
a) In Project Explorer, expand the project. Under your project, in the context menu of
Favorite Packages, choose Add a Package....
b) Enter the package name DEVS4DEV_BES and choose OK.
Create a Package with ADT
In your project, create a new development package ZS4DEV_##_BES (where ## stands for
your group number) and add it to the favorite packages in your project.
1. In ADT, create a new development package ZS4DEV_##_BES (where ## stands for your
group number).
a) In the Project Explorer on the left, in the context menu of your project, choose
New → ABAP Repository Object ....
b) In the dialog window New ABAP Repository Object expand the node Package, choose
the ABAP Package entry and choose Next.
c) On the next dialog window, enter ZS4DEV_##_BES (where ## stands for your group
number) and choose Next.
d) On the next dialog window, enter a short description for your package and choose
Continue (Enter).
e) On the next dialog window, choose Own Requests to select the prepared transport
request.
30
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Working with ABAP Development Tools (ADT)
f) Choose Continue (Enter).
2. Add your package ZS4DEV_##_BES to the favorite packages under your project.
a) In the Project Explorer, under your project, in the context menu of Favorite Packages,
choose Add a Package....
b) Enter the name of your package and choose OK.
© Copyright. All rights reserved.
31
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
LESSON SUMMARY
You should now be able to:
●
32
Work with ABAP Development Tools
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Lesson 2
Exploring Core Data Services ABAP (CDS
ABAP)
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Understand the Basics of Core Data Services (CDS)
●
Open and Analyze a Data Definition
●
Open and Analyze an Access Control
Core Data Services (CDS)
Figure 22: Core Data Services (CDS)
Many technologies exist that introduce higher-level models on top of SQL to add semantics
and ease consumption – for example, OData EDM models, the Semantic Layer in the BI
platform, JPA and enterprise objects in Java, and the business objects frameworks in ABAP.
Those higher-level models share many commonalities, but are usually specific to their
technology. This prevents their re-use across stacks and increases effort for application
developers.
To address this, SAP HANA introduced a set of domain-specific languages (DSL) and services
called Core Data Services for defining and consuming semantically-rich data models.
Among these languages is an enhanced Data Definition Language (DDL) for defining
semantically rich database tables/views (CDS entities) and user-defined types in the
database.
Some of the enhancements are:
Expressions – used for calculations and queries in the data model
Associations – on a conceptual level, replacing joins with simple path expressions in queries
© Copyright. All rights reserved.
33
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Annotations – to enrich the data models with additional (domain-specific) metadata
Basic Features of ABAP CDS
Figure 23: Some Basic Features of ABAP CDS
As a first step, the advanced view-building capabilities of CDS have been implemented in
ABAP CDS. With many tables already defined in the ABAP Dictionary, the DEFINE
VIEW statement of ABAP CDS makes the full wealth of the CDS universe readily available to
existing ABAP data models.
You can either define sophisticated new views or simply wrap an existing table in a CDS view
in order to enrich it semantically. For example, ABAP CDS offers a new authorization concept
based on roles defined with DEFINE ROLE in a DCL (Data Control Language) source code. In
order to let an existing table participate in the new authorization concept, you can simply
create a CDS view for that table that is connected to a role. Other examples include advanced
joining of tables with associations, or using specific annotations in order to connect existing
tables to new technologies like OData or UI5.
34
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
CDS-Related Repository Objects
Figure 24: CDS-Related Repository Objects
With ABAP CDS, the following new repository object types were introduced:
Data Definition
●
●
Also referred to as DDL Source (for Data Definition Language, named after the DDL part of
SQL)
Contains the definition of either a CDS View or a CDS Table function
Access Control
●
●
Also referred to as DCL Source (for Data Control Language, named after the DCL part of
SQL)
Contains the definition of authorization rules that are automatically checked when a
program accesses a certain CDS View or CDS table function
Metadata Extensions
●
Always relate to a CDS view, which is defined in a data definition
●
Add semantic information (metadata) to the existing object
●
Often used to store application-specific metadata outside the data definition
●
Can be used by customers to add their specific metadata to CDS objects delivered by SAP
Note:
Depending on the system release, you can display the source code of the new
CDS-related repository objects in the classical ABAP workbench. But to create or
change the new repository objects you have to use the respective editors in ABAP
Development Tools (also known as ABAP in Eclipse).
© Copyright. All rights reserved.
35
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
DDL Source, SQL View, and CDS View
Figure 25: Data Definition – Defines Two Objects
A CDS view is defined in a data definition, which is a new type of repository object. There is no
editor for data definitions in the classical ABAP workbench. This new type of repository object
has to be analyzed and developed in ABAP Development Tools in Eclipse.
Upon activation of a Data Definition, two objects are created: the SQL View and the CDS View.
Neither of them can be edited directly.
The SQL view is visible as an object in the Project Explorer where it can’t be edited and only
reveals a fraction of the information available in the DDL source. It serves as a representative
of the database object.
The CDS view carries more semantics than its SQL view. It is not created on the database and
it is not visible in the Project Explorer.
36
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Figure 26: SQL View and CDS View in a Data Definition
As with conventional database views, the simplest form of a CDS view is a projection – that is,
a selection of fields from a single table.
The language used is SQL Data Definition Language (DDL), but in an Open SQL form so that
the view can be deployed on any database platform.
Figure 27: Difference Between SQL View and CDS View
The name of the CDS entity is specified after the DEFINE VIEW statement. It is
recommended, though not technically necessary, that the name of the DDL source and the
name of the CDS view are identical.
The name of the SQL view is specified after @ABAPCatalog.sqlViewName. It has to be
different from the name of the CDS entity. Like for any Dictionary view, the maximum length is
16 characters.
© Copyright. All rights reserved.
37
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 28: Dependency Analyzer
For more sophisticated data definitions, it can therefore be quite difficult to find the actual
source of the data. This becomes particularly true if a CDS view reads from several other
objects, and if these other objects are not just database tables but CDS views that again
depend on other objects.
The Dependency Analyzer offers a simplified view by focusing on the dependency tree and
disregarding the rest.
Open a given data definition in the Dependency Analyzer as follows:
1. Right-click the Data Definition. (Either in the editor window or in the Project Explorer.)
2. Choose Open With → Dependency Analyzer.
The Dependency Analyzer opens in a new tab in the editor window.
38
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Annotations
Figure 29: Annotations – Some Basic Facts
A CDS annotation (or annotation for short) enriches a definition in the ABAP CDS with
metadata. An annotation is identified by a simple or structured name after leading character
"@" or "@<". Depending on its scope, an annotation can be found in different locations within
the CDS Source.
View annotations relate to the view itself and are placed before the define view statement.
Element annotations relate to elements in the field list and can be found before or after the
element.
Note:
Element annotations after the element begin with leading characters @<.
SAP uses a set of predefined SAP annotations. Most of them are optional. There is one
exception: @AbapCatalog.sqlViewName is mandatory in any CDS view definition.
© Copyright. All rights reserved.
39
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 30: Opening Active Annotations View
The Active Annotations view summarizes the semantic information of the CDS view and of its
view fields.
This is not restricted to annotations alone. It also lists semantic information that is taken
(inherited) from other CDS views or from DB table definitions and data elements.
Open the Active Annotations view as follows:
1. Right-click the data definition. (Either in the editor window or in the Project Explorer.)
2. Choose Open With → Active Annotations.
The Active Annotations view is displayed in a dedicated tab in the tabstrip below the editor
window.
40
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Figure 31: Active Annotations View
In the figure, Active Annotations View, you can see that the field carrid of CDS view
S4d430_Carrier has a label "Airline" which is not defined in the corresponding DDL source.
This label is inherited from the source field in SCARR and originates from data element
S_CARRID with which this source field is typed.
Associations
Figure 32: What are Associations?
CDS provide extended support for treating relationships between entities. Such relationships
are often reflected as foreign key relationships in the database, but in SQL, the relations are
often concealed behind non-trivial join conditions.
This is cumbersome and error-prone for application developers, and requires considerable
effort when joins are to be re-used.
© Copyright. All rights reserved.
41
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
The syntax of associations keeps the relations between data model entities visible. Path
expressions and filtered associations make it easier to read the CDS view definitions, as well
as the SELECT statements accessing the views.
Although associations and joins look different, there is no difference on the database level.
Eventually, any association is translated into an ordinary join. But in the case of exposed
associations, it depends on the way in which a view is consumed. The join is only executed if
the consumer requests data from the associated data source. This can have a positive effect
on the performance and is sometimes referred to as "JOIN on Demand".
Figure 33: Example: Association from Flight Booking to Customer
When you define an association you can use addition AS to specify an alias. This syntax looks
very similar to the definition of aliases in the join syntax. But strictly speaking, it is not an alias
for the data source but a name for the association.
Note:
It is recommended, but not a fixed rule, that names for associations begin with the
character "_". A meaningful name for the association further improves the
readability of the view definition.
Specifying a cardinality after keyword ASSOCIATION is optional. If the cardinality is not
explicitly defined, the cardinality "0..1" is implicitly used.
Instead of accessing individual fields of the associated data source, a CDS view can place the
association name itself in its element list. The association is then exposed to the consumer of
the CDS view. The consumer of the view gets full access to all components of the associated
data source.
There is a prerequisite for exposing an association: All fields used in the ON condition of the
association have to be part of the element list. In the example shown in the figure, Example:
Association from Flight Booking to Customer, the CustomGuid field is required for exposing
the _Customer association.
42
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Figure 34: Data Preview for CDS Views (1)
The Data Preview tool allows you to analyze the data returned by a CDS view without the need
to implement an application yourself.
Open the Data Preview for a given data definition as follows:
1. Right-click the data definition (either in the Editor window or in the Project Explorer).
2. Choose Open With → Data Preview.
The Data Preview opens in a new tab in the editor window.
Figure 35: Data Preview for CDS Views (2)
Data Preview lists the first N entries of the specified view or table. N is set to 100 by default
but you can increase or decrease this value manually (by setting Max.Rows).
The toolbar on the Raw Data tab offers the following additional functions:
© Copyright. All rights reserved.
43
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Add filter opens a dialog to enter selection criteria
Number of Entries displays the total number of rows in the table/view that match the
selection criteria
SQL Console opens a new editor window with a SELECT statement for this view/table. You
can edit this statement, execute it, and display the result to run a more sophisticated ad-hoc
analysis of the data.
Figure 36: Exposed Associations in Data Preview
If a CDS view definition contains exposed associations, you can evaluate these associations in
Data Preview as follows:
1. Open the CDS view in Data Preview.
2. Choose one of the displayed rows, then click on the arrow next to the view name in the
header toolbar (see the figure, Exposed Associations in Data Preview).
Note:
Alternatively, you can right-click the entry and choose Follow Association.
3. Choose an association from the list of available associations.
44
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Access Controls
Figure 37: Access Control on Database - How it works
The figure, Access Control on Database – How it Works, shows the basic principle of a new
repository object, CDS Access Control. CDS Access Control defines a CDS role (keyword
DEFINE ROLE …). It relates the CDS role to one (or more) CDS views (keyword GRANT
SELECT ON …) and defines access conditions for this CDS view (keyword WHERE …).
Whenever an ABAP program accesses this CDS view, the database interface will
automatically filter the selection result according to the access conditions.
Note:
CDS Access Control only works if the program accesses the CDS view directly.
Access control is ignored if the CDS view is accessed indirectly over another CDS
view.
© Copyright. All rights reserved.
45
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 38: Example: Access Control
The example shows an access control for flight bookings.
The access control automatically removes bookings for which the user does not have
sufficient authorization.
Figure 39: Access Control for a Given CDS View
The syntax check for data definitions shows an information if an access control exists for this
CDS view.
In the figure, Access Control for a Given CDS View, the information tells us that the CDS view
DS4_C_Booking_S1 is used in access control DS4_C_BOOKING_S1.
46
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
Figure 40: Annotation @AccessControl.authorizationCheck
© Copyright. All rights reserved.
47
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
48
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Exercise 4
Analyze Existing CDS Views
Open and Analyze a Data Definition
In ABAP Development Tools, open the data definition DS4_C_BOOKING_S1 and analyze it with
different tools. Follow existing associations and analyze the associated data sources.
1. In your ABAP project in ADT, expand the favorite package DEVS4DEV_BES and open data
definition DS4_C_BOOKING_S1.
What is the name of the CDS view?
What is the name of the SQL view?
From which data source does the CDS view read its data?
2. Open the data definition with the Dependency Analyzer.
What kind of object is DS4_I_BookingWD?
Which database table does the data originally come from?
3. Open the Active Annotations view for the data definition. Make sure every element comes
with an active label and heading.
4. Return to the source code of the data definition DS4_C_BOOKING_S1 and analyze the CDS
view’s associations.
© Copyright. All rights reserved.
49
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Does the CDS view DS4_C_Booking_S1 have any associations to other data sources?
What is the name of this association?
What is the cardinality of the association and what does it mean?
Which data source does the association point to?
5. Navigate to the object DS4_C_Customer_S1 to analyze it.
What kind of object is DS4_C_Customer_S1?
From which data source does the CDS view read its data?
To which other data source does CDS view DS4_C_Customer_S1 have an association?
What is the name of this association?
50
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
What is the cardinality of the association and what does it mean?
Use the Data Preview Tool for CDS Views
1. Return to the definition of CDS view DS4_C_Booking_S1. Use the Data Preview tool to
display the raw data for this view.
2. Set a filter to display only bookings operated by the airline ‘LH’.
3. Pick one flight booking from the list and use the association _Customer to display details
of the customer who made this booking.
4. Use the association _Bookings to display all bookings from the same customer.
Analyze an Authorization Control
Analyze the Authorization Control for the CDS view DS4_C_Booking_S1.
1. Find out if there is an authorization check related to the CDS view DS4_C_Booking_S1.
2. Open the access control DS4_C_BOOKING_S1.
3. Confirm that this access control restricts access to the CDS view DS4_C_Booking_S1.
Which field(s) of the CDS view enter(s) the authorization check?
4. Return to the data definition DS4_C_Booking_S1 and display it with the Data Preview tool.
5. Confirm that the result does not contain bookings for which your user does not have
display authorization.
Hint:
Your user should not have display authorization for carrier UA.
© Copyright. All rights reserved.
51
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Solution 4
Analyze Existing CDS Views
Open and Analyze a Data Definition
In ABAP Development Tools, open the data definition DS4_C_BOOKING_S1 and analyze it with
different tools. Follow existing associations and analyze the associated data sources.
1. In your ABAP project in ADT, expand the favorite package DEVS4DEV_BES and open data
definition DS4_C_BOOKING_S1.
a) In your ABAP project in ADT expand DEVS4DEV_BES → Core Data Services → Data
Definitions.
b) Double click on data definition DS4_C_BOOKING_S1.
What is the name of the CDS view?
DS4_C_Booking_S1
What is the name of the SQL view?
DS4CBOOK1
From which data source does the CDS view read its data?
The CDS view reads data from the object DS4_I_BookingWD.
2. Open the data definition with the Dependency Analyzer.
a) Right-click anywhere in the source code of the data definition and choose Open
With → Dependency Analyzer.
What kind of object is DS4_I_BookingWD?
DS4_I_BookingWD is a CDS view.
Which database table does the data originally come from?
DS4BOOK
3. Open the Active Annotations view for the data definition. Make sure every element comes
with an active label and heading.
52
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
a) Right-click anywhere in the source code of the data definition and choose Open
With → Active Annotations.
4. Return to the source code of the data definition DS4_C_BOOKING_S1 and analyze the CDS
view’s associations.
Does the CDS view DS4_C_Booking_S1 have any associations to other data sources?
Yes
What is the name of this association?
_Customer
What is the cardinality of the association and what does it mean?
Cardinality [1..1] means that exactly one customer is assigned to every flight booking. A
booking may not be assigned to more than one customer, neither may a booking have no
customer assigned to it.
Which data source does the association point to?
It points to an object DS4_C_Customer_S1
5. Navigate to the object DS4_C_Customer_S1 to analyze it.
a) Place the cursor on DS4_C_Customer_S1 and hit the F3 key. Alternatively, press Ctrl
and left-click on DS4_C_Customer_S1.
What kind of object is DS4_C_Customer_S1?
DS4_C_Customer_S1 is a CDS view.
From which data source does the CDS view read its data?
The CDS view reads data from CDS view DS4_I_CustomerWD.
To which other data source does CDS view DS4_C_Customer_S1 have an association?
DS4_C_Customer_S1 has an association to CDS view DS4_C_Booking_S1.
© Copyright. All rights reserved.
53
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
What is the name of this association?
_Booking
What is the cardinality of the association and what does it mean?
Cardinality [*] means that a given customer may have any number of bookings, including
not having any at all.
Use the Data Preview Tool for CDS Views
1. Return to the definition of CDS view DS4_C_Booking_S1. Use the Data Preview tool to
display the raw data for this view.
a) Right-click anywhere in the source code of the data definition and choose Open
With → Data Preview.
2. Set a filter to display only bookings operated by the airline ‘LH’.
a) From the toolbar within Data Preview, choose Add Filter.
b) From the dropdow list, choose the CarrID field.
c) Enter the filter value LH, and choose Enter.
3. Pick one flight booking from the list and use the association _Customer to display details
of the customer who made this booking.
a) In the result list, right-click the booking for which you want to see customer details.
b) Choose Follow Association.
c) From the list of available associations, choose the association _Customer.
4. Use the association _Bookings to display all bookings from the same customer.
a) In the result list, right-click the entry with customer details.
b) Choose Follow Association.
c) From the list of available associations, choose the association _Bookings to see all
bookings by this customer.
Analyze an Authorization Control
Analyze the Authorization Control for the CDS view DS4_C_Booking_S1.
1. Find out if there is an authorization check related to the CDS view DS4_C_Booking_S1.
a) Open the data definition DS4_C_BOOKING_S1.
b) In the Problems tab, below the editor window, expand the node Infos.
2. Open the access control DS4_C_BOOKING_S1.
a) In the Project Explorer, expand the favorite package DEVS4DEV_BES.
b) Expand the node Core Data Services → Access Controls.
c) Double-click on DS4_C_BOOKING_S1 to open this access control.
3. Confirm that this access control restricts access to the CDS view DS4_C_Booking_S1.
54
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring Core Data Services ABAP (CDS ABAP)
a) The CDS view is mentioned after keyword ON.
Which field(s) of the CDS view enter(s) the authorization check?
The field CarrID, mentioned in brackets after keyword WHERE, enters the authorization
check.
4. Return to the data definition DS4_C_Booking_S1 and display it with the Data Preview tool.
a) Perform this step as before.
5. Confirm that the result does not contain bookings for which your user does not have
display authorization.
Hint:
Your user should not have display authorization for carrier UA.
a) Sort the result by field CARRID and scroll down.
b) Alternatively, you can right-click on the CARRID column and choose Distinct Values for
[carrid].
© Copyright. All rights reserved.
55
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
LESSON SUMMARY
You should now be able to:
56
●
Understand the Basics of Core Data Services (CDS)
●
Open and Analyze a Data Definition
●
Open and Analyze an Access Control
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Lesson 3
Creating CDS Views
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Define a CDS View
●
Define a Mapping Role
Data Definition Creation
Figure 41: Create New Data Definition (1)
To create a new data definition, proceed as follows:
1. Right-click on your project in the Project Explorer.
2. Choose New → ABAP Repository Object …
3. From the list, choose Core Data Services → Data Definitions.
Note:
You can use the input field below Project to type a search term, e.g. "data"
4. Choose Next.
© Copyright. All rights reserved.
57
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
5. Enter the name of an (existing) package, and a name and description for the new DDL
Source.
Figure 42: Create New Data Definition (2)
When you create a new data definition, you can create a blank editor page. Alternatively, you
can use one of several available templates as a starting point.
Figure 43: Use Templates During Data Definition Creation
Usually, a dialog appears after you assigned the new data definition to your ABAP workbench
request. But you can always return to the Template selection later in the editing process.
58
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
Figure 44: Data Definition Templates During Editing
To choose a template later, go to the Templates tab in the tabstrip below the editor window.
Note:
You may define your own templates in the editor preferences. Go to
Window → Preferences and search for Data Definition Templates.
Auto Completion
While editing a CDS Source, you can use the editor’s auto-completion functionality to avoid
typing everything in manually.
© Copyright. All rights reserved.
59
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 45: Auto-Completion Usage
Figure 46: Field List Auto-Completion
Auto-completion is particularly helpful when editing the field list. Choose individual elements
from the underlying data source, or let the editor insert a complete list.
60
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
Access Control Creation
Figure 47: Create New Access Control (1)
To create a new access control proceed as follows:
1. Right-click on your project in the Project Explorer.
2. Choose New → ABAP Repository Object….
3. From the list, choose Core Data Services → Access Control.
Note:
You can use the input field below Project to type a search term, e.g. "access".
4. Choose Next.
5. Enter the name of an (existing) package, and a name and description for the new access
control.
© Copyright. All rights reserved.
61
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Figure 48: Create New Access Control (2)
You can use a template as a starting point.
Figure 49: Template Define Instance Role
62
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Exercise 5
Define CDS Views and a Mapping Role
Business Example
Template:
none
Solution:
DS4_C_BOOKING_S1 (Data Definition)
DS4_C_CUSTOMER_S1 (Data Definition)
DS4_C_BOOKING_S1 (Access Control)
Define a CDS View
Create a new data definition and implement a CDS view for Customer Data that reads from
CDS view DS4_I_CustomerWD.
1. In your own package, create a new data definition(suggested name: Z##_C_CUSTOMER,
where ## stands for your group number). Choose template defineView to generate the
definition statement and some standard annotations.
2. If the tool did not ask for the template, go to the templates tab on the tabstrip below the
editor and choose the template there.
3. Edit the new data definition. In the respective Annotation, enter a name for the SQL view
that is to be generated (suggested name: Z##CCUST).
Would it be possible to specify the same name for CDS view and SQL view?
What is the maximum length for the name of the SQL view?
4. Before the DEFINE VIEW statement, use annotation @VDM.viewType: #CONSUMPTION to
identify this view as consumption view.
5. Implement the data definition. In the FROM clause of the SELECT statement, specify CDS
view DS4_I_CustomerWD.
6. Edit the element list of the SELECT Statement. Use auto-completion to insert all elements
of the data source.
© Copyright. All rights reserved.
63
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
7. Remove the two associations at the end of the element list.
8. Make the first element (CustomGuid) the key field of the view.
9. In Annotation @AccessControl.authorizationCheck:, replace value #CHECK with value
#NOT_REQUIRED.
Hint:
Use auto-completion again to insert the new value.
10. Perform a syntax check. Then activate the data definition.
Define a CDS View with an Association
Create a new data definition, and implement a CDS view for flight booking data that reads
from CDS view DS4_I_BookingWD. Add an association to your previously-defined CDS view
Z##_C_Customer.
1. In your own package, create a new data definition (suggested name: Z##_C_BOOKING,
where ## stands for your group number). Choose the template
defineViewWithAssociation this time. This template generates an ASSOCIATION
statement in addition to the definition statement and some standard annotations.
2. Implement the data definition. In the respective annotation, enter a name for the SQL view
that is to be generated (suggested name: Z##CBOOK).
3. Before the DEFINE VIEW statement, use annotation @VDM.viewType: #CONSUMPTION to
identify this view as a consumption view.
4. In the FROM clause of the SELECT statement, specify CDS view DS4_I_BookingWD.
5. Edit the ASSOCIATION statement. Make the following replacements:
target_data_source_name
Z##_C_Customer
_association_name
_Customer
data_source_name.element name
$projection.CustomGuid
_association_name.target_element_name
_Customer.CustomGuid
6. Edit the element list of the SELECT statement. Use auto-completion to insert all elements
of the data source.
7. From the bottom of the element list, remove all associations and replace them with the
entry (_Customer).
8. Make the first element (BookGuid) the key field of the view.
9. Perform a syntax check. Then activate the data definition.
You should see one warning now. What is this warning related to?
64
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
Define A CDS Role
Define a CDS role for your CDS view Z##_C_Booking. Make sure only bookings of those
airlines are selected for which the user has read authorization.
1. In your own package, create a new authorization control (suggested name:
Z##_C_BOOKING, where ## stands for your group number). Choose the template
DefineInstanceRole.
2. Edit the new access control. After keywords GRANT SELECT ON, enter the name of the
CDS view you want to link with authorization rules (Z##_C_Booking).
3. After keyword WHERE, replace condition with the following statement ( CarrID ) =
aspect pfcg_auth( S_CARRID, CARRID, ACTVT = ’03’ ).
4. Perform a syntax check and activate your new DCL Source.
Add an Association to Your First Data Definition
Edit your data definition Z##_C_CUSTOMER and add an association to your CDS view
Z##_C_Booking.
1. Open data definition Z##_C_CUSTOMER.
2. Immediately before the element list (i.e. before the opening curly bracket), add the
following coding: association[*] to Z##_C_Booking as _Booking on
$projection.CustomGuid = _Booking.CustomGuid.
3. At the end of the element list (i.e. before the closing curly bracket), add a comma after the
element Discount followed by the name of your new association (_Booking).
Activate the DDL Sources and Test the Result
1. Perform a syntax check. Then activate the DDL Source.
2. Open the Data Preview for either of your CDS views.
© Copyright. All rights reserved.
65
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2
Solution 5
Define CDS Views and a Mapping Role
Business Example
Template:
none
Solution:
DS4_C_BOOKING_S1 (Data Definition)
DS4_C_CUSTOMER_S1 (Data Definition)
DS4_C_BOOKING_S1 (Access Control)
Define a CDS View
Create a new data definition and implement a CDS view for Customer Data that reads from
CDS view DS4_I_CustomerWD.
1. In your own package, create a new data definition(suggested name: Z##_C_CUSTOMER,
where ## stands for your group number). Choose template defineView to generate the
definition statement and some standard annotations.
a) In the ABAP perspective of Eclipse, right click on your project and choose New
→ Other ABAP Repository Object.
b) On the next window, choose Core Data Services→Data Definition.
c) Enter the name of your package, a name, and a short description for the new object,
and choose Next.
d) If the tool asks for a template, select defineView and choose Next.
e) Assign the object to your transport request and choose Finish.
2. If the tool did not ask for the template, go to the templates tab on the tabstrip below the
editor and choose the template there.
a) Go to tab templates on the tabstrip below the editor.
b) Select template defineView.
3. Edit the new data definition. In the respective Annotation, enter a name for the SQL view
that is to be generated (suggested name: Z##CCUST).
a) Annotation@ABAPCatalog.sqlViewName. See source code extract from the model
solution.
66
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
Would it be possible to specify the same name for CDS view and SQL view?
No. They need to be distinguishable when they are used, e.g., in ABAP coding.
What is the maximum length for the name of the SQL view?
16 Characters
4. Before the DEFINE VIEW statement, use annotation @VDM.viewType: #CONSUMPTION to
identify this view as consumption view.
a) See source code extract from the model solution.
5. Implement the data definition. In the FROM clause of the SELECT statement, specify CDS
view DS4_I_CustomerWD.
a) See source code extract from the model solution.
6. Edit the element list of the SELECT Statement. Use auto-completion to insert all elements
of the data source.
a) For auto-completion, place the cursor between the curly brackets and press the keys
Ctrl and Space at the same time.
b) From the drop down list, choose Insert all elements — template.
c) See source code extract from the model solution.
7. Remove the two associations at the end of the element list.
a) Remove elements _Booking and _City from the element list.
b) Remove the comma (“,” after element Discount.
c) See source code extract from the model solution.
8. Make the first element (CustomGuid) the key field of the view.
a) Place key word key in front of this element.
b) See source code extract from the model solution.
9. In Annotation @AccessControl.authorizationCheck:, replace value #CHECK with value
#NOT_REQUIRED.
Hint:
Use auto-completion again to insert the new value.
a) Delete value #CHECK, then press the keys Ctrl and Space at the same time.
b) Choose value #NOT_REQUIRED from the drop down list.
c) See source code extract from the model solution.
10. Perform a syntax check. Then activate the data definition.
a) Choose Check ABAP Development Object or press Ctrl + F2.
b) Choose Activate or press Ctrl + F3.
© Copyright. All rights reserved.
67
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
Define a CDS View with an Association
Create a new data definition, and implement a CDS view for flight booking data that reads
from CDS view DS4_I_BookingWD. Add an association to your previously-defined CDS view
Z##_C_Customer.
1. In your own package, create a new data definition (suggested name: Z##_C_BOOKING,
where ## stands for your group number). Choose the template
defineViewWithAssociation this time. This template generates an ASSOCIATION
statement in addition to the definition statement and some standard annotations.
a) In the ABAP perspective of Eclipse, expand your own package.
b) Expand the node Core Data Services, then right click on Data Definitions and choose
New Data Definition.
c) On the next window, enter the name of your package, a name, and a short description
for the new object, and choose Next.
d) Assign the object to your transport request and choose Next >.
e) When the tool asks for the template, choose template defineViewWithAssociation from
the list and choose Finish.
2. Implement the data definition. In the respective annotation, enter a name for the SQL view
that is to be generated (suggested name: Z##CBOOK).
a) See the source code extract from the model solution.
3. Before the DEFINE VIEW statement, use annotation @VDM.viewType: #CONSUMPTION to
identify this view as a consumption view.
a) See source code extract from the model solution.
4. In the FROM clause of the SELECT statement, specify CDS view DS4_I_BookingWD.
a) See source code extract from the model solution.
5. Edit the ASSOCIATION statement. Make the following replacements:
target_data_source_name
Z##_C_Customer
_association_name
_Customer
data_source_name.element name
$projection.CustomGuid
_association_name.target_element_name
_Customer.CustomGuid
a) See source code extract from the model solution.
6. Edit the element list of the SELECT statement. Use auto-completion to insert all elements
of the data source.
a) For auto-completion, place the cursor between the curly brackets and press the keys
Ctrl and Space at the same time.
b) From the drop down list, choose Insert all elements — template.
c) See source code extract from the model solution.
7. From the bottom of the element list, remove all associations and replace them with the
entry (_Customer).
a) See source code extract from the model solution.
68
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
8. Make the first element (BookGuid) the key field of the view.
a) Place the keyword key in front of this element.
b) See source code extract from the model solution.
9. Perform a syntax check. Then activate the data definition.
a) Choose Check ABAP Development Object or press Ctrl + F2.
b) Choose Activate or press Ctrl + F3.
You should see one warning now. What is this warning related to?
The warning is related to the annotation @AccessControl.authorizationCheck: #CHECK.
Define A CDS Role
Define a CDS role for your CDS view Z##_C_Booking. Make sure only bookings of those
airlines are selected for which the user has read authorization.
1. In your own package, create a new authorization control (suggested name:
Z##_C_BOOKING, where ## stands for your group number). Choose the template
DefineInstanceRole.
a) In the ABAP perspective of Eclipse, right-click on your project and choose New
→ Other ABAP Repository Object.
b) On the next window, choose Core Data Services→Access Control.
c) Enter the name of your package, a name, and a short description for the new object,
and choose Next.
d) If the tool asks for a template, select DefineMappingRole and choose Next.
e) Assign the object to your transport request and choose Finish.
2. Edit the new access control. After keywords GRANT SELECT ON, enter the name of the
CDS view you want to link with authorization rules (Z##_C_Booking).
a) See source code extract from the model solution.
3. After keyword WHERE, replace condition with the following statement ( CarrID ) =
aspect pfcg_auth( S_CARRID, CARRID, ACTVT = ’03’ ).
a) See source code extract from the model solution.
4. Perform a syntax check and activate your new DCL Source.
a) Choose Check ABAP Development Object or press Ctrl + F2.
b) Choose Activate or press Ctrl + F3.
Add an Association to Your First Data Definition
Edit your data definition Z##_C_CUSTOMER and add an association to your CDS view
Z##_C_Booking.
1. Open data definition Z##_C_CUSTOMER.
a) See previous section of this exercise.
2. Immediately before the element list (i.e. before the opening curly bracket), add the
following coding: association[*] to Z##_C_Booking as _Booking on
$projection.CustomGuid = _Booking.CustomGuid.
© Copyright. All rights reserved.
69
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
a) See source code extract from the model solution.
3. At the end of the element list (i.e. before the closing curly bracket), add a comma after the
element Discount followed by the name of your new association (_Booking).
Activate the DDL Sources and Test the Result
1. Perform a syntax check. Then activate the DDL Source.
a) Choose Check ABAP Development Object or press Ctrl + F2.
b) Choose Activate or press Ctrl + F3.
2. Open the Data Preview for either of your CDS views.
a) In the Project Explorer, right-click on your DDL Source and choose Open With → Data
Preview.
Data Definition DS4_C_CUSTOMER_S1
@AbapCatalog.sqlViewName: 'DS4CUSTS1'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Solution: Consumption View Customer'
@VDM.viewType: #CONSUMPTION
define view DS4_C_Customer_S1
as select from DS4_I_CustomerWD
association [*] to DS4_C_Booking_S1
as _Booking
on $projection.CustomGuid = _Booking.CustomGuid
{
// Fields
key CustomGuid,
ID,
Form,
Name,
Street,
PostCode,
City,
Country,
Email,
Telephone,
Discount,
// Associations
_Booking
}
Data Definition DS4_C_BOOKING_S1
@AbapCatalog.sqlViewName: 'DS4BOOK1'
@VDM.viewType: #CONSUMPTION
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Solution: OData Service'
define view DS4_C_Booking_S1
as select from DS4_I_BookingWD
association [1..1] to DS4_C_Customer_S1
70
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Creating CDS Views
as _Customer
on $projection.CustomGuid = _Customer.CustomGuid
{
// Fields
key BookGuid,
CarrID,
ConnID,
FlDate,
BookID,
Class,
Order_Date,
CustomGuid,
ForCurAm,
ForCurKey,
AgencyNum,
Cancelled,
// Associations
_Customer
}
Access Control DS4_C_BOOKING_S1
@EndUserText.label: 'Solution: Authorization for Consumption View'
@MappingRole: true
define role Ds4_C_Booking_S1 {
grant select
on DS4_C_Booking_S1
where ( CarrID ) = aspect pfcg_auth( S_CARRID, CARRID, ACTVT =
'03' );
}
© Copyright. All rights reserved.
71
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 2: Data Modeling
LESSON SUMMARY
You should now be able to:
72
●
Define a CDS View
●
Define a Mapping Role
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 3
Data Service
Lesson 1
Exploring SAP Gateway
Exercise 6: Test SAP Gateway Service
74
81
Lesson 2
Publishing Gateway Services based on CDS Views
Exercise 7: Implement OData.publish in CDS View
85
89
UNIT OBJECTIVES
●
Explore SAP Gateway
●
Publish Gateway Services based on CDS Views
© Copyright. All rights reserved.
73
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Lesson 1
Exploring SAP Gateway
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAP Gateway
OData
Figure 50: Open Data Protocol
OData is an open standard originally developed by Microsoft but now managed by the Oasis
Organisation. It is based on the Atom Publishing and Atom Syndication standards, which in
turn are based on XML and HTTP(S). The objective of the OData protocol is to provide a
vendor-neutral web-based API that fully complies with the design principles of
Representational State Transfer (REST). OData is also extensible. This allows SAP to
supplement the data types used by OData with extra information from the ABAP Data
Dictionary.
74
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Gateway
Figure 51: Atom Versus JSON Format
In today’s real-life applications, JSON (JavaScript Object Notation) is used instead of Atom
and XML for structuring data. It needs considerably less meta-information, which reduces the
transferred amount of data tremendously. Atom and XML in contrast is used exactly because
of the extensive meta-information when it comes to development.
Figure 52: CRUD Operations
One of the main features of OData is that it uses the existing HTTP verbs GET, PUT, POST,
and DELETE at addressable resources identified in the URI. Conceptually, OData is a way of
performing database-style create, read, update, and delete operations on resources by using
HTTP verbs.
© Copyright. All rights reserved.
75
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
Figure 53: Service Document
To consume an OData service for read, you just need a browser and the OData service URI.
This leads to the service document. To get data from the service, add the name of an entity of
the service to the base URI. You will get a list of entities of that type, which could be the
content of a database table.
Figure 54: Service Metadata Document
By adding the OData option $metadata to the service root URI, the metadata document of
the service is shown. The whole EDM is defined here and available at runtime. Application
developers and all the wizards in development environments create their applications based
on this information.
76
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Gateway
Figure 55: Request Using URI Options
An OData request consists of a server address, service URI, entity set, and additional query
options. There are many query options with many combinations possible. A complete
documentation is available on http://www.odata.org.
SAP Gateway
Figure 56: OData Provider
SAP Gateway (formally known as SAP NetWeaver Gateway) provides a single entry point to
access business data of ABAP-based systems like the SAP Business Suite or the SAP S/
4HANA.
Additional servers can be added to the communication path to enhance the possibilities for
client and server. For Microsoft Office, the SAP Gateway for Microsoft, and for mobile devices,
the SAP Mobile Platform (SMP) adds additional value to the applications.
© Copyright. All rights reserved.
77
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
Figure 57: Gateway Service Maintenance
The gateway service maintenance transaction offers a list of all registered OData services in
the system. Complete maintenance of these services is possible here. The transaction
subdivides in three areas:
●
Service catalog – Service name, description, and many additional settings
●
ICF nodes – Maintenance of ICF-services and testing
●
System aliases – Maintenance of connections to back-end
Figure 58: Gateway Client
Using the gateway client transaction, all functionalities of OData services can be tested. For a
read request, it is enough to enter the request URI and execute. For a create, update, and
78
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Gateway
delete request, additional adjustments must be made, for example a request body filled with
data to be created. All adjustments can be saved as test cases for later usage.
Beside these two transactions, there are several more around SAP Gateway. All transactions
are connected to each other via buttons and menu entries. You can therefore jump from the
service maintenance to the gateway client and backwards.
© Copyright. All rights reserved.
79
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
80
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Exercise 6
Test SAP Gateway Service
Examine and test an SAP Gateway service using SAP Gateway Service Maintenance and the
SAP Gateway Client.
Note:
Login information will be provided by your trainer.
1. Log on to your Front-End Server (FES) using SAP Logon.
2. Examine the service registration of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in
the SAP Gateway Service Maintenance on your FES.
3. Call the service document of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in the
SAP Gateway Client on your FES.
4. Call the service metadata document of the Gateway service
ZDS4_C_CUSTOMER_S2_CDS in the SAP Gateway Client on your FES.
5. Display all customers of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in the SAP
Gateway Client on your FES.
6. Display all bookings of one customer of your choice of the Gateway service
ZDS4_C_CUSTOMER_S2_CDS in the SAP Gateway Client on your FES.
© Copyright. All rights reserved.
81
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Solution 6
Test SAP Gateway Service
Examine and test an SAP Gateway service using SAP Gateway Service Maintenance and the
SAP Gateway Client.
Note:
Login information will be provided by your trainer.
1. Log on to your Front-End Server (FES) using SAP Logon.
a) In the SAP Logon window, select the SAP GUI SNC system entry of your FES.
b) Choose Log On.
2. Examine the service registration of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in
the SAP Gateway Service Maintenance on your FES.
a) Open the SAP Gateway Service Maintenance by using transaction /IWFND/
MAINT_SERVICE.
b) Choose Filter.
c) In the Technical Service Name field, enter *DS4* and choose Continue.
d) Choose the Technical Service Name ZDS4_C_CUSTOMER_S2_CDS.
e) Confirm that the status of the ICF Node ODATA is green.
3. Call the service document of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in the
SAP Gateway Client on your FES.
a) In the ICF Nodes panel, choose SAP Gateway Client.
b) Choose Execute.
c) Examine the HTTP Response.
4. Call the service metadata document of the Gateway service
ZDS4_C_CUSTOMER_S2_CDS in the SAP Gateway Client on your FES.
a) In the SAP Gateway Client, choose Add URI Option.
b) Double-click the URI Option $metadata.
c) Choose Execute.
d) Examine the HTTP Response.
5. Display all customers of the Gateway service ZDS4_C_CUSTOMER_S2_CDS in the SAP
Gateway Client on your FES.
a) In the SAP Gateway Client, choose EntitySets.
82
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Gateway
b) Double-click the EntitySet Name DS4_C_Customer_S2.
c) Choose Execute.
d) Examine the HTTP Response.
6. Display all bookings of one customer of your choice of the Gateway service
ZDS4_C_CUSTOMER_S2_CDS in the SAP Gateway Client on your FES.
a) In the HTTP Response of the SAP Gateway Client, search for a link with the title
to_Bookings.
b) Copy the href of this link.
c) Paste the href in the Request URI field replacing DS4_C_Customer_S2.
d) Choose Execute.
e) Examine the HTTP Response.
© Copyright. All rights reserved.
83
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
LESSON SUMMARY
You should now be able to:
●
84
Explore SAP Gateway
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Lesson 2
Publishing Gateway Services based on CDS
Views
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Publish Gateway Services based on CDS Views
SAP Gateway and CDS Views
Figure 59: SAP Fiori Programming Model – SAP Gateway
There are two ways in the SAP Fiori programming model to create a Gateway service. The
most common and easiest way uses the annotation OData.publish: true, and provides a
Gateway service with full read functionalities. For additional features like write access,
additional annotations or definitions are needed in the CDS view. Although ABAP classes are
generated, these are controlled by the framework and are not editable.
The second way references a CDS view as a data source in a Gateway project and offers more
freedom in the ABAP development. Again a Gateway service with full read functionalities is
generated. But aside from the generated classes, extension classes are also created, which
can be changed freely by the developer. This freedom offers the possibility to implement
features that are not (yet) possible by using annotations in CDS views.
© Copyright. All rights reserved.
85
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
Figure 60: OData Service Development with CDS Views
SAP Gateway in the SAP Fiori programming model has the task to provide OData services
based on CDS views. The service maintenance on the FES provides the tools and runtime for
OData services to be consumed by SAPUI5 apps. It connects via RFC to the SAP Gateway
back-end components, which provide the actual implementation of the service. An SAP
Gateway service always consists of ABAP code, which is, in most parts, generated but then
enhanced by custom code.
Gateway Service Development
Figure 61: CDS View Annotation OData.publish: true
The annotation @OData.publish: true is put in a CDS view of type consumption. When
activating the CDS view, a technical service including data and model provider classes are
generated. Everything defined inside the CDS view, including the associated CDS views, are
interpreted to be included in the SAP Gateway service. The only thing needed besides the
86
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Publishing Gateway Services based on CDS Views
annotation is to register the technical service using the SAP Gateway Service Maintenance (/
IWFND/MAINT_SERVICE).
Figure 62: Gateway Service Builder
The service builder is the central development environment for SAP Gateway in ABAP. It uses
projects to bundle all artifacts of a service in one central place and thereby helps to organize
the service development and modeling process. Since projects consolidate all related data,
developers can easily work on multiple projects in parallel and reuse data between projects
before generating and activating the actual service.
Figure 63: Reference Data Source in SEGW
As mentioned, an alternative to the annotation OData.publish is to create a Gateway
project in the SAP Gateway Service Builder (SEGW) and reference a CDS view as a data source.
© Copyright. All rights reserved.
87
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
This is a pure reference to the CDS view so the Gateway service is still defined based on the
elements in the CDS view. The difference is that a full set of runtime artifacts is generated:
●
Model Provider Base Class
●
Model Provider Extension Class
●
Data Provider Base Class
●
Data Provider Extension Class
●
Technical Model
●
Technical Service
The base classes are generated based on the data source reference to the CDS view and
should not be changed. The extension classes inherit the base classes and are meant to be
adapted to provide whatever is needed in the Gateway service in addition to the generated
features.
Figure 64: Register Gateway Service
In either way after creating a technical service by adding the CDS view annotation or by
referencing the CDS view as data source, the service needs to be registered in the system
that should provide the service to the client. In an embedded deployment, it is the same
system providing the CDS view. In a hub deployment it is the hub, also known as the FES. For
both cases the SAP Gateway Service Maintenance (/IWFND/MAINT_SERVICE) is used to
access the system providing the CDS view using a system alias. This system alias is an alias
for an RFC connection, which provides more flexibility especially in a transport landscape.
System alias and RFC destination should be provided by an administrator.
88
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Exercise 7
Implement OData.publish in CDS View
Publish and register an SAP Gateway service based on a CDS view and test it in the SAP
Gateway Client.
Template: DS4_C_CUSTOMER_S1
Solution: DS4_C_CUSTOMER_S2
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. In the ABAP Development Tools (ADT) connected to your back-end server (BES), publish
your CDS view Z##_C_CUSTOMER as OData service.
2. Create a new package named ZS4DEV_##_FES in your front-end server (FES) using the
ABAP Workbench.
3. Register the service Z##_C_CUSTOMER_CDS in the SAP Gateway Service Maintenance of
your FES for the system alias S4HANA using your package ZS4DEV_##_FES.
4. Display all customers of the Gateway service Z##_C_CUSTOMER_CDS in the SAP
Gateway Client on your FES.
© Copyright. All rights reserved.
89
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3
Solution 7
Implement OData.publish in CDS View
Publish and register an SAP Gateway service based on a CDS view and test it in the SAP
Gateway Client.
Template: DS4_C_CUSTOMER_S1
Solution: DS4_C_CUSTOMER_S2
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. In the ABAP Development Tools (ADT) connected to your back-end server (BES), publish
your CDS view Z##_C_CUSTOMER as OData service.
a) In the ADT connected to your BES, navigate to Z##_C_CUSTOMER.
b) Add @OData.publish: true above the view definition.
c) Activate your changes.
2. Create a new package named ZS4DEV_##_FES in your front-end server (FES) using the
ABAP Workbench.
a) In your FES, open the ABAP Workbench by using the transaction SE80.
b) From the Object Category dropdown in the navigation area, select Package.
c) In the Object Name field in the navigation area, enter ZS4DEV_##_FES and choose
Enter.
d) Choose Yes in the Create Package window.
e) Enter a short description of your choice.
f) In the Application Component field, enter CA.
g) Choose Continue.
h) Choose the transport request provided by your trainer.
i) Choose Continue.
3. Register the service Z##_C_CUSTOMER_CDS in the SAP Gateway Service Maintenance of
your FES for the system alias S4HANA using your package ZS4DEV_##_FES.
a) In your FES, open the SAP Gateway Service Maintenance by using transaction /
IWFND/MAINT_SERVICE.
b) Choose Add Service.
90
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Publishing Gateway Services based on CDS Views
c) In the System Alias field, enter S4HANA.
d) In the Technical Service Name field, enter *##*.
e) Choose Get Services.
f) Choose Z##_C_CUSTOMER_CDS.
g) In the Package Assignment field, enter ZS4DEV_##_FES.
h) Choose Continue.
i) Choose the transport request provided by your trainer for every dialog box.
j) In the Information dialog box, choose Continue.
k) Choose Back.
4. Display all customers of the Gateway service Z##_C_CUSTOMER_CDS in the SAP
Gateway Client on your FES.
a) In the SAP Gateway Service Maintenance, select the Z##_C_CUSTOMER_CDS service.
b) In the ICF Nodes panel, choose SAP Gateway Client.
c) In the SAP Gateway Client, choose EntitySets.
d) Double-click the EntitySet Name Z##_C_CUSTOMER.
e) Choose Execute.
f) Examine the HTTP Response.
© Copyright. All rights reserved.
91
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 3: Data Service
LESSON SUMMARY
You should now be able to:
●
92
Publish Gateway Services based on CDS Views
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 4
User Interface
Lesson 1
Developing UIs with SAPUI5
Exercise 8: Create a Simple SAPUI5 Application
Exercise 9: Deploy an SAPUI5 Application on an ABAP Server
94
111
119
Lesson 2
Consuming Business Data using SAP Fiori Elements
Exercise 10: Create a List Report Application
Exercise 11: Configure a List Report Application Using CDS Annotations
Exercise 12: Deploy a List Report Application
123
135
145
157
UNIT OBJECTIVES
●
Explore SAPUI5
●
Work with SAP Web IDE
●
Explore SAP Fiori Elements
●
Implement a List Report Application
© Copyright. All rights reserved.
93
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Lesson 1
Developing UIs with SAPUI5
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAPUI5
●
Work with SAP Web IDE
Overview SAPUI5
Figure 65: SAP Fiori Programming Model – SAPUI5
94
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 66: SAP UI Development Toolkit for HTML5
The SAP UI Development Toolkit for HTML5 (SAPUI5) is a JavaScript-based UI library. It is
designed to build stateless cross-platform business applications. It combines the advantages
of being open and flexible as well as being enterprise-ready, supporting all SAP Product
Standards.
While Web Dynpro is best suited to heavyweight transactional applications for expert usage,
SAPUI5 is designed for building lightweight consumer-grade UIs for casual usage. It targets
developers at SAP and customers with web development skills (HTML, CSS3, JavaScript).
The SAPUI5 SDK as well as the documentation, the API reference, samples, demo apps, and
tools can be found under https://sapui5.hana.ondemand.com.
Figure 67: Main SAPUI5 Features
SAPUI5 is an enterprise-ready HTML5 rendering library for client-side UI rendering and
programming. It is based on open source web technologies like jQuery and standards like
HTML, JavaScript, and CSS, making it easier to learn, increasing adoption and tightening
integration. But SAPUI5 goes beyond adherence to Web standards by complying with all SAP
product standards including security, globalization (right-to-left support), accessibility,
software lifecycle, and performance.
© Copyright. All rights reserved.
95
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
SAPUI5 applications are responsive across browsers and devices. They run on a wide range of
devices (smartphone, tablet, desktop) and on multiple server platforms. The UI controls
automatically adapt themselves to each device's capabilities.
SAPUI5 simplifies application development by managing many aspects of modern
development behind the scenes. It comes with built-in support for architectural concepts like
MVC, data binding, and routing. It also provides all features needed to cover most current
application requirements, with standards high enough to be delivered in standard SAP
solutions (e.g. translation and internationalization support, extensibility concepts at code and
application level).
To separate structure from layout, SAPUI5 uses CSS3-based techniques that allow
developers to change the visual design of applications without modification. SAPUI5 offers
predefined themes that adhere to the latest SAP UX standards and also supports various
types of custom theme adaptations, from color shifts or light adaptation of existing themes to
newly-created custom themes for the highest level of flexibility.
Figure 68: SAPUI5 Architecture
Apps developed with SAPUI5 run in a browser on any device (mobile, tablet, or desktop PC).
The top-level structural unit in SAPUI5 is called a library. Libraries bundle a set of controls and
related types and make them consumable by Web applications. There are predefined
standard libraries, like sap.m, with many commonly-used controls.
When users access an SAPUI5 app, a request is sent to the respective server to load the
application into the browser. The view accesses the relevant libraries. Usually the model is
also instantiated and business data is fetched from the database.
Depending on the environment in which SAPUI5 is used, the libraries or your applications can
be stored, for example, on an SAP NetWeaver Application Server or on the SAP Cloud
Platform, and business data can be accessed, for example, using the OData model through an
SAP Gateway.
96
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 69: Model View Controller (MVC)
The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of
information from the user interaction. This separation facilitates development and the
changing of parts independently.
The purpose of data binding in the UI is to separate the definition of the user interface (view),
the data visualized by the application (model), and the code for the business logic for
processing the data (controller). The separation has the following advantages: It provides
better readability, maintainability, and extensibility. It also allows you to change the view
without touching the underlying business logic, and to define several views of the same data.
Views and controllers often form a 1:1 relationship, but it is also possible to have controllers
without a UI. These controllers are called application controllers. It is also possible to create
views without controllers. From a technical position, a view is an SAPUI5 control and can have
or inherit an SAPUI5 model.
View and controller represent reusable units, and distributed development is highly
supported.
© Copyright. All rights reserved.
97
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 70: Browser and Platform Support
Specific SAPUI5 libraries may have different browser support. The single source of truth
about supported browsers and platforms is the Product Availability Matrix (PAM), which you
can find at https://support.sap.com/pam. SAPUI5 is not a product of its own, so make sure
to check the PAM for the product you're using SAPUI5 with. For example, for SAPUI5 1.44.xx
refer to User Interface Technology 7.51 in SAP NetWeaver 7.51. For more information, see
SAP Note 1716423.
SAP currently does not guarantee that newer ECMAScript standards, such as ES6/ES2015,
work with SAPUI5.
Figure 71: Versioning of SAPUI5
To view the documentation for a specific version, check which versions are available
at https://sapui5.hana.ondemand.com/versionoverview.html. You can view the version-
98
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
specific Demo Kit by adding the version number to the base URL, for example: https://
sapui5.hana.ondemand.com/1.50.7/.
To get an overview of the new features of each version, see the What's New? section at:
https://sapui5.hana.ondemand.com/sdk/index.html#/topic. To see the fixes contained in
each patch, from the left pane, choose What’s New in SAPUI5 → Change Log.
All SAPUI5 resources are available on the content delivery network Akamai. There, you can
find multiple SAPUI5 versions which can be used in your application.
You can check which SAPUI5 version is used in an application in the technical information
dialog (Ctrl + Alt + Shift + P).
Figure 72: Maintenance Strategy
SAPUI5 provides innovations on a regular basis through maintenance versions and innovation
versions. As long as an SAPUI5 version is still in maintenance, SAP provides patches with
fixes. You can check the available versions with respective maintenance status at https://
sapui5.hana.ondemand.com/versionoverview.html.
An innovation version is only maintained until the next version of SAPUI5 is released.
Maintenance versions have an extended maintenance period in which SAP still provides
patches even though a higher version is already available. This is because the SAPUI5 version
is included in a release of the SAP_UI component. For example, the following version has an
extended maintenance: 1.44 as SAPUI5 version 1.44 is included in SAP_UI 7.51.
In the version overview at https://sapui5.hana.ondemand.com/versionoverview.html, you
can see which of the SAPUI5 versions have an extended maintenance. For more information
on the SAPUI5 maintenance strategy for SAP NetWeaver AS ABAP, see SAP Note 2217489.
© Copyright. All rights reserved.
99
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 73: Available SAPUI5 Versions on the Application Server
To find out which SAPUI5 versions are available on your Application Server ABAP, the
following URL can be used: http://<host>:<port>/sap/public/bc/ui5_ui5/index.html. In this
URL, replace <host> with the host name and <port> with the http port number of your ABAP
system.
Introduction to SAP Web IDE
Figure 74: What is the SAP Web IDE?
SAP Web IDE is a flexible, browser-based IDE for developers who want to dive right into the
code editor without having to spend time configuring and administering the development
environment. The tool is aimed at developers who need a modern and secure environment to
create new or extend existing SAP Fiori, SAPUI5, or hybrid applications. Developers are
provided with a comprehensive set of tools, including strong code editors with templates,
100
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
wizards, beautifier capabilities, code completion, code snippets, code validation, code
checking, WYSIWYG, and many more features.
SAP Web IDE is available as a cloud service on SAP Cloud Platform. For this delivery option, it
only requires a browser to use SAP Web IDE. There is no installation and maintenance
required.
Using application templates, you can build SAPUI5 applications applying SAP Fiori UX
guidelines. In addition, it is possible to extend SAP Fiori applications through a visual
extensibility editor.
Figure 75: SAP Web IDE Delivery Options
There are currently three main versions of SAP Web IDE:
●
SAP Cloud Platform Web IDE – available on SAP Cloud Platform (Neo)
-
●
●
Also available as a downloadable personal edition
SAP Cloud Platform Web IDE for Full-Stack Development – available on SAP Cloud
Platform (Cloud Foundry)
SAP Web IDE for SAP HANA – available with SAP HANA
-
Also included with the downloadable SAP HANA Express Edition (HXE)
The main use cases of the SAP Cloud Platform Web IDE are to create or extend SAPUI5 or
Fiori apps that:
●
Consume existing cloud or on-premise OData services
●
Will be deployed to SAP Cloud Platform or to an on-premise SAPUI5 ABAP repository
●
Can easily be built into hybrid mobile applications for mobile devices
The main use cases of the SAP Cloud Platform Web IDE for Full-Stack Development are to
create SAP full-stack apps, SaaS apps, and extend SAP S/4HANA apps that:
© Copyright. All rights reserved.
101
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
●
●
Consume existing cloud or on-premise OData services
Will be deployed to SAP Cloud Platform, Neo, and Cloud Foundry environments, or to an
on-premise SAPUI5 ABAP repository
SAP Cloud Platform Web IDE for Full-Stack Development is based on an open-source serverside foundation, and offers advanced features, such as:
●
●
Support for SAP Leonardo with incorporated IoT wizard for developing IoT applications
without any coding.
Full-stack application development for SAP Cloud Platform, Cloud Foundry environment,
consisting of several modules, such as a HANA-based model, business logic (written in
Java), and of course Fiori/SAPUI5.
The main use cases for SAP Web IDE for SAP HANA are to create SAP HANA native
applications for your SAP HANA platform that:
●
●
Consist of multiple modules, from UI to OData services and HANA data models
Will be deployed to your SAP HANA system with its Extended Services advanced
application server (XSA, on SAP HANA 1.0 SPS 11 or higher)
If you prefer to work offline, or if you don't have access to a corporate SAP HANA system, you
can also download and install the SAP HANA express edition and the XSA-based tool package
on your workstation, including SAP Web IDE for SAP HANA.
Figure 76: SAP Cloud Platform – Trial Version
For evaluation purposes, you can sign up for a free SAP Cloud Platform trial account to
explore SAP Web IDE based development. To create such an account, register at https://
account.hanatrial.ondemand.com and log on afterwards. Once you are ready to start
development, you have to acquire an SAP Cloud Platform license or SAP Web IDE user
license.
102
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 77: SAP Cloud Platform Cockpit
After logging on to the SAP Cloud Platform, in the navigation bar of the SAP Cloud
Platform Cockpit, choose Services, and open the SAP Web IDE Overview page by choosing
the SAP Web IDE tile. On the SAP Web IDE Overview page, choose the Go to Service link to
open the SAP Web IDE.
Figure 78: SAP Cloud Platform, Web IDE Personal Edition (1)
Customers using SAP Web IDE on SAP Cloud Platform benefit from the full scope of SAP Web
IDE and leverage SAP Cloud Platform capabilities with frequent updates of the cloud
environment. In addition SAP offers a personal edition of SAP Web IDE: SAP Cloud Platform,
Web IDE Personal Edition (SAP Web IDE Personal Edition). SAP Web IDE Personal Edition is
meant for use by an individual user only and should not be used as a server.
The personal edition includes the possibility to connect to an external Git repository. This
feature can be used to combine both versions, using Git to sync your local workspace and
© Copyright. All rights reserved.
103
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
your Cloud Platform account. When switching work modes from the cloud edition to the
personal edition (and vice-versa), you can also export the relevant projects, and import them
in the other edition.
To start developing applications with SAP Web IDE personal edition, download it from
https://tools.hana.ondemand.com/#sapui5 and follow the installation instructions in the
"SAP Web IDE Personal Edition" chapter of the documentation.
Figure 79: SAP Cloud Platform, Web IDE Personal Edition (2)
You can use the personal edition in one of the following ways:
●
●
Trial - for test and evaluation purposes for anyone
Productive - for all customers who have a license to productively use SAP Web IDE on SAP
Cloud Platform
The SAP Web IDE Personal Edition is updated quarterly. It excludes some of the features of
the cloud-based version of SAP Web IDE, such as zero administration, plugin/template
development, certain optional plugins, and cloud-specific features like building mobile apps.
The full SAP Web IDE functionality is available on SAP Cloud Platform, where you can benefit
from the cloud capabilities and latest features of the trial and productive versions. This is the
focus of the SAP Web IDE delivery.
104
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 80: Development Environment Overview
In SAP Web IDE, you can choose from different types of menus and toolbars to perform your
actions. The menu bar provides access to all operations available in SAP Web IDE. Depending
on the item that is activated in the workspace, you can choose from the buttons in the global
toolbar. Icons of actions that are not applicable are grayed out.
The buttons in the left sidebar can be used to switch between the welcome page,
development workspace, learning center, and user preferences. The buttons in the right
sidebar can be used to switch between the different panes available in SAP Web IDE (for
example, Git Pane, Outline pane, Problems view, Console, and so on).
Using the buttons in the workspace toolbar you can collapse all projects with one click, search
for any resource and quickly open it from the Open Resource dialog, and access additional
options related to the workspace. The workspace toolbar is located directly below the global
toolbar, above the workspace directory.
Figure 81: Creating New Projects
SAP Web IDE offers various methods for creating new projects. You can create a new project
for an application based on one of the following:
© Copyright. All rights reserved.
105
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
●
A specific template
●
An existing application, which is used as a reference
There are several predefined templates and applications to choose from. For example, the
SAP Fiori Master-Detail Application template implements a typical split-screen layout. The
split-screen layout is optimized for displaying and processing a list of items. On the left side of
the screen, users can quickly scan and navigate through the list. On the right side, they then
see the details of the selected item, and can trigger related actions or edit the data.
You can also extend SAPUI5 applications residing remotely on the SAPUI5 ABAP repository
or SAP Cloud Platform using an Extension Project. Via the Extension Project, you can change
the views or the logic of the original application.
Figure 82: Importing Projects
You can import the resources that are contained in a project into the SAP Web IDE
workspace. To import a compressed (.zip) file of the project from the local file system into the
SAP Web IDE workspace, select the folder to which you want to import the project from the
workspace, for example, the top-level workspace folder and choose File → Import → From File
System.
To import an existing application from SAP Cloud Platform into the SAP Web IDE workspace,
choose File → Import → Application from SAP Cloud Platform to start the corresponding
import wizard. Note that this import is only possible when working with the cloud edition of
SAP Web IDE. The Personal Edition does not support the import of cloud applications.
To import an existing application from the SAPUI5 ABAP repository into the SAP Web IDE
workspace, choose File → Import → Application from the SAPUI5 ABAP Repository to start
the corresponding import wizard.
106
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 83: Working with the Layout Editor
The Layout Editor is a WYSIWYG tool that can be used to edit the views of an SAPUI5
application. The Layout Editor displays the content of a view in a way that closely corresponds
to how it will appear in the finished application.
Among other things, you can do the following with the Layout Editor:
●
Add controls to a view using drag and drop functionality
●
Delete controls from a view
●
Rearrange controls in a view using drag and drop functionality
●
Bind controls to data from an OData service.
Note that the Layout Editor is not supported in the Safari browser and that only XML views
can be edited with it.
To edit an XML view with the Layout Editor, choose Open With → Layout Editor from the
view's context menu.
© Copyright. All rights reserved.
107
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 84: Layout Editor
The Layout Editor is composed of a canvas, a pane on the left that includes
the Controls and Outline tabs, and a pane on the right that includes
the Events and Properties panes.
The buttons on the Layout Editor toolbar allow you to:
●
Change the device format of the canvas to smartphone, tablet, or desktop view.
●
Expand and collapse the panes to the right and left of the canvas.
●
Undo and redo actions.
Controls Tab: You can expand or collapse each section by clicking the arrow on each section
header. You can also search for controls by entering the control name in the search field at
the top of the Controls tab. The relevant sections expand to display the controls that match
the search criteria. Make sure to delete the search criteria if you want to expand other
sections. You can drag and drop controls from the Controls tab onto the canvas.
Outline Tab: Controls that are selected on the Outline tab are automatically selected on the
canvas and vice versa. You can use the Outline tab to see the hierarchy of controls on the
canvas. In addition, you can add and remove controls from the canvas using the Outline tab.
Canvas: The canvas in the middle of the Layout Editor area provides a graphical display of the
selected XML view. Click a control on the canvas to select it.
The Events pane allows you to assign an event handler from the controller to an event of the
selected control. The icon next to each event opens the code editor to display the relevant
controller of the XML view.
The Properties pane shows the properties of the control that is currently selected in the
canvas and allows you to modify its property values. The most commonly used properties for
each control are displayed at the top of the list.
108
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 85: Running Applications from the Workspace
SAP Web IDE uses Run Configurations to define how a project is executed. Via a Run
Configuration you can, for example, set whether the application should be executed with
mock data or which SAPUI5 version should be used at runtime. You can create new Run
Configurations, and delete or configure existing Run Configurations by choosing Run → Run
Configurations… from the context menu of any file in your project.
If you do not create a new Run Configuration or select an existing one, SAP Web IDE uses
default Run Configurations that use the SAP Web IDE default settings.
You can run a project in any of the following ways:
●
Select a project and in the global toolbar, choose Run. The project runs with the Run
Configuration that is displayed in the drop-down menu, which is the last-used Run
Configuration. You can choose a different Run Configuration in the list.
●
In the project’s context menu, choose Run.
●
Choose a recently-used Run Configuration from the displayed list
●
Choose Run As → Web Application
●
Create or edit a Run Configuration and run a project using this configuration.
© Copyright. All rights reserved.
109
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
110
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Exercise 8
Create a Simple SAPUI5 Application
Business Scenario
In this exercise, you create an SAPUI5 project with an XML view in the SAP Web IDE Personal
Edition. In the generated view, you enter the text “Hello World!” using a Text UI element. You
also set the title of the displayed page to “SAP Web IDE”. To do this, you edit the view with the
graphical Layout Editor. You then test the application in the browser.
Note:
Login information will be provided by your trainer.
1. Create a user account in the SAP Web IDE Personal Edition.
2. In the SAP Web IDE, create a new project called sap.training.webide using the project
template SAPUI5 Application. Enter student## as the namespace (where ## is your
group number) and generate an XML view called Main.
3. Open the Main view generated by the wizard in the graphical Layout Editor. Add a text UI
element to the view, and set its Text property to the value “Hello World!”. Also set the Title
of the page to “SAP Web IDE”.
4. Adjust the bootstrap script so that SAPUI5 is no longer loaded from the web server locally
via a relative path and is instead loaded externally from a Content Delivery Network
(CDN).
Note:
In the next exercise, you deploy your SAPUI5 application on an ABAP server
and test it there. The relative paths for loading the SAPUI5 are however
different in the SAP Web IDE environment and on an ABAP server. Therefore,
load the SAPUI5 externally via a CDN, so that the application can run without
path adjustment in both the SAP Web IDE environment and on an ABAP
server.
5. Test your application by starting it from the SAP Web IDE.
© Copyright. All rights reserved.
111
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Solution 8
Create a Simple SAPUI5 Application
Business Scenario
In this exercise, you create an SAPUI5 project with an XML view in the SAP Web IDE Personal
Edition. In the generated view, you enter the text “Hello World!” using a Text UI element. You
also set the title of the displayed page to “SAP Web IDE”. To do this, you edit the view with the
graphical Layout Editor. You then test the application in the browser.
Note:
Login information will be provided by your trainer.
1. Create a user account in the SAP Web IDE Personal Edition.
a) Open the SAP Web IDE Personal Edition in Google Chrome.
b) Choose Create a new account.
c) In the username field, enter a username, for example, TRAIN## where ## is your group
number.
d) In the password field, enter a password consisting of eight numbers and characters.
e) In the retype password field, retype your password.
f) Choose Sign up.
2. In the SAP Web IDE, create a new project called sap.training.webide using the project
template SAPUI5 Application. Enter student## as the namespace (where ## is your
group number) and generate an XML view called Main.
a) From the SAP Web IDE menu, select the path File → New → Project from Template.
b) Select the template SAPUI5 Application, then choose Next.
c) Enter sap.training.webide as the Project Name and student## as the
Namespace, where ## is your group number. Choose Next.
d) Choose XML as the View Type for the view to be generated, and enter Main as the
name of this view. Confirm your entries with the Next button.
e) Close the wizard with the Finish button.
3. Open the Main view generated by the wizard in the graphical Layout Editor. Add a text UI
element to the view, and set its Text property to the value “Hello World!”. Also set the Title
of the page to “SAP Web IDE”.
a) To open the Main view in the Layout Editor, in the context menu of the Main.view.xml
file, select the path Open With → Layout Editor.
112
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
b) On the Controls tab, expand the Display section, and then drag the Text UI element
from this section to the view using drag and drop.
c) In the Properties Pane, enter the value Hello World! for the Text property of the
Text UI element.
d) To adjust the page title, you must first select the associated Page UI element. You can
do this by clicking the Page link in the Toolbar.
e) In the Properties Pane, enter the value SAP Web IDE for the Title property of the Page
UI element.
Note:
Don’t forget to save your changes using the Save button in the SAP Web
IDE toolbar.
4. Adjust the bootstrap script so that SAPUI5 is no longer loaded from the web server locally
via a relative path and is instead loaded externally from a Content Delivery Network
(CDN).
Note:
In the next exercise, you deploy your SAPUI5 application on an ABAP server
and test it there. The relative paths for loading the SAPUI5 are however
different in the SAP Web IDE environment and on an ABAP server. Therefore,
load the SAPUI5 externally via a CDN, so that the application can run without
path adjustment in both the SAP Web IDE environment and on an ABAP
server.
a) Open the index.html file, and in the bootstrap script tag, change the value of the src
attribute to the URL https://sapui5.hana.ondemand.com/resources/sap-uicore.js.
Note:
The latest SAPUI5 version is now always loaded via the URL you just
entered. In new releases, this procedure can have an impact on the stability
of an application. Therefore, you should only follow this procedure for test
purposes.
You can load a specific SAPUI5 version using a versioned URL, for example
https://sapui5.hana.ondemand.com/1.50.7/resources/sap-ui-core.js.
5. Test your application by starting it from the SAP Web IDE.
a) Choose the Run button in the SAP Web IDE toolbar to start the application.
b) Check whether the adjustments you made to the Main view are displayed in the
preview.
© Copyright. All rights reserved.
113
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Project Deployment
Figure 86: Connecting Cloud Applications to On-Premise Systems
The Cloud Connector serves as the link between on-demand applications in SAP Cloud
Platform and existing on-premise systems. It combines an easy setup with a clear
configuration of the systems that are exposed to SAP Cloud Platform. In addition, you can
control the resources available for the cloud applications in those systems. This means you
can benefit from your existing assets without exposing the whole internal landscape.
The Cloud Connector runs as an on-premise agent in a secured network and acts as a reverse
invoke proxy between the on-premise network and SAP Cloud Platform. Due to its reverse
invoke support, you don't need to configure the on-premise firewall to allow external access
from the cloud to internal systems.
The Cloud Connector provides fine-grained control over the following:
●
On-premise systems and resources that shall be accessible by cloud applications
●
Cloud applications that shall make use of the Cloud Connector
The Cloud Connector allows propagating identity of cloud users to on-premise systems in a
secure way. It can be used to connect on-premise databases, or BI tools to SAP HANA
databases in the cloud. That means that it also supports the opposite connection direction
(from the on-premise system to the cloud).
You can use the Cloud Connector in business-critical enterprise scenarios. The tool takes care
to automatically re-establish broken connections, it provides audit logging of the inbound
traffic and configuration changes, and it can be run in a high-availability setup.
The Cloud Connector supports additional protocols, apart from HTTP. For example, the RFC
protocol supports native access to ABAP systems by invoking function modules.
The Cloud Connector must not be used with products other than SAP Cloud Platform or S/
4HANA Cloud.
114
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
Figure 87: Installing the Cloud Connector on Microsoft Windows OS
Depending on your preferable operating system, you can choose one of the following
procedures to install the Cloud Connector. On Microsoft Windows and Linux, two installation
modes are available for the Cloud Connector: portable version and installer version. On Mac
OS X, only the portable version is available.
The portable version can be easily installed by just extracting a compressed archive into an
empty directory. It does not require administrator or root privileges for the installation. Note
that the portable version cannot be run in the background as a Windows Service or Linux
daemon (with automatic start capabilities at boot time). Neither does it support an automatic
upgrade procedure. So, if you want to update a portable installation, you will have to delete
the current installation, extract the new version, and then re-do the configuration.
The installer version requires administrator or root permissions for the installation and can be
set up to run as a Windows Service or Linux daemon in the background. It can also be easily
upgraded, retaining all the configuration and customizing. It is the recommended variant for
productive setups.
To install the Cloud Connector, Java 7 or Java 8 needs to be available on the machine. If you
want to use SAP JVM, you can download it from https://tools.hana.ondemand.com/#cloud.
When using a portable version, set the environment variable JAVA_HOME to the installation
directory of the JDK you want to use to run the Cloud Connector. (Alternatively, you can add
the bin subdirectory of the JDK installation directory to the PATH environment variable.)
Figure 88: Connecting Remote Systems in SAP Web IDE Personal Edition
© Copyright. All rights reserved.
115
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
To access systems and OData services in SAP Web IDE Personal Edition, you have to define
service destinations. You must create a destination file for each remote system to which you
want to connect. Add the following configuration to the destination file, replacing the
placeholders with values specific to your system:
Name=<mysystem>Description=<mysystem description>
TrustAll=trueType=HTTP or HTTPS
ProxyType=Internet
URL=http\://<host>\:<port> or https\://<host>\:<port>
Authentication=NoAuthentication
WebIDEEnabled=true
WebIDEUsage=<add required usages>
WebIDESystem=<mysystem>
sap-client=<SAP client number for ABAP systems only. Delete this line if you are not using an
ABAP system.>
The possible values for WebIDEUsage can be found in the documentation. Examples would be
odata_abap for the OData functionality of SAP Gateway and dev_abap for extensibility
scenarios and deploying to the SAPUI5 ABAP repository. When you enter multiple usages for
a destination, separate them by commas without spaces (for example,
dev_abap,odata_abap).
If your landscape requires the use of a proxy server to reach your systems, you can configure
the Orion Application Server that the personal edition is running on to use a proxy server.
Figure 89: Deploying Applications to the SAPUI5 ABAP Repository
You can deploy an application from SAP Web IDE to SAPUI5 ABAP repository as a new
application or as an update to a previously deployed application that resides in the SAPUI5
ABAP repository.
To deploy an application from the SAP Web IDE to the SAPUI5 ABAP repository, right-click
the desired project in the workspace and select Deploy → Deploy to SAPUI5 ABAP Repository.
116
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
This starts the corresponding wizard. The deployment wizard compares the version being
used in the application to that of the ABAP server. If the SAPUI5 versions differ, a warning
message shows the current versions. If you want to proceed, you can ignore this warning
message. You can follow the progress and the completion of the deployment process in the
SAP Web IDE console. To open the console, choose View → Console. A notification message
displays once the deployment is complete.
When you deploy a project, an application build is performed in the background. The artifact
deployed to the SAPUI5 ABAP repository is the result of this application build which
represents only the productive version of the application and does not reflect the project's
source files. If the application is configured to be built upon deployment (by setting the
SAPUI5 Client Build project type in the Project Settings), only the content of the build target
folder (called dist by default) is deployed. If this configuration is not set, but the application
contains a webapp folder, only the content within this folder is deployed.
Figure 90: Using the SAPUI5 Repository Upload and Download Reports to Synchronize
You can upload an SAPUI5 app to or download it from the SAPUI5 ABAP repository by using
the SAPUI5 repository upload and download reports.
When using the report /UI5/UI5_REPOSITORY_LOAD, enter the name of the SAPUI5 app and
specify whether you want to update, download, or delete it. You can also specify whether or
not the line endings are adjusted automatically during the upload.
When using the reports /UI5/UI5_REPOSITORY_LOAD_HTTP or /UI5/
UI5_REPOSITORY_LOAD_HTTPN, enter the relevant parameters and specify whether or not
the line endings are adjusted automatically during the upload.
The SAPUI5 Repository upload via HTTP is also available via the RFC-enabled function
module /UI5/UI5_REPOSITORY_LOAD_HTTP. It can be called remotely, for example, from
Maven builds.
For more information, see the documentation for the reports and for the function
module /UI5/UI5_REPOSITORY_LOAD_HTTP.
© Copyright. All rights reserved.
117
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
118
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Exercise 9
Deploy an SAPUI5 Application on an ABAP
Server
Business Scenario
In this exercise, you deploy the SAPUI5 application that you developed in the last exercise on
an ABAP server via the SAP Web IDE.
Note:
Login information will be provided by your trainer.
1. Deploy the SAPUI5 application that you developed in the previous exercise from the SAP
Web IDE to the SAP Front-End Server Development. To do this, create a new application
called ZUI5_WEBIDE_## (where ## stands for your group number) with the description
Hello World App. Assign the application to your package ZS4DEV_##_FES (where ## =
group number) and to the transport request that already exists for the training course.
Note:
You can track the deployment process in the SAP Web IDE Console. To do this,
from the SAP Web IDE menu, choose View → Console.
2. After deployment, call up the application on the ABAP server using the following URL
(replace ## with your group number): http://fsdhost.wdf.sap.corp:
8000/sap/bc/ui5_ui5/sap/zui5_webide_##/index.html
© Copyright. All rights reserved.
119
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Solution 9
Deploy an SAPUI5 Application on an ABAP
Server
Business Scenario
In this exercise, you deploy the SAPUI5 application that you developed in the last exercise on
an ABAP server via the SAP Web IDE.
Note:
Login information will be provided by your trainer.
1. Deploy the SAPUI5 application that you developed in the previous exercise from the SAP
Web IDE to the SAP Front-End Server Development. To do this, create a new application
called ZUI5_WEBIDE_## (where ## stands for your group number) with the description
Hello World App. Assign the application to your package ZS4DEV_##_FES (where ## =
group number) and to the transport request that already exists for the training course.
Note:
You can track the deployment process in the SAP Web IDE Console. To do this,
from the SAP Web IDE menu, choose View → Console.
a) In the context menu of your SAPUI5 project sap.training.webide, choose the path
Deploy → Deploy to SAPUI5 ABAP Repository.
b) Make sure that the option Deploy a new application is selected on the displayed form,
and select the system SAP Front-End Server Development from the list box.
c) In the dialog box that is displayed, enter the User Name and Password for the ABAP
system used. To confirm your entries, choose Log In.
d) After successful login, choose Next.
e) As the Name of the new application, enter ZUI5_WEBIDE_## (## = group number) and
as the Description, enter Hello World App. Use the Browse button to select your
package ZS4DEV_##_FES (## = group number). Choose Next.
f) On the next window, make sure that the transport request belonging to the training
course is selected, and choose Next.
g) Close the wizard, by choosing Finish.
2. After deployment, call up the application on the ABAP server using the following URL
(replace ## with your group number): http://fsdhost.wdf.sap.corp:
8000/sap/bc/ui5_ui5/sap/zui5_webide_##/index.html
120
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Developing UIs with SAPUI5
a) Enter the specified URL in the browser.
b) If prompted, enter the username and password for the ABAP system used.
© Copyright. All rights reserved.
121
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
LESSON SUMMARY
You should now be able to:
122
●
Explore SAPUI5
●
Work with SAP Web IDE
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Lesson 2
Consuming Business Data using SAP Fiori
Elements
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAP Fiori Elements
●
Implement a List Report Application
Overview of SAP Fiori Elements
Figure 91: Developing Apps with SAP Fiori Elements
SAP Fiori Elements provide designs for UI patterns and predefined templates for commonlyused application patterns. Applications based on SAP Fiori Elements use predefined views
and controllers that are provided centrally, so no application-specific view instances are
required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData
service and uses the corresponding views for the SAP Fiori app at startup. The predefined
views and controllers ensure UI design consistency across similar apps. Also the metadatadriven development model significantly reduces the amount of front-end code for each app,
so the developer can focus on the business logic.
SAP Fiori Elements offer the following features:
●
Reuse functionality that does not require specific programming
●
A common look and feel and UI behavior for all apps
●
Edit mode control, switching between display and edit, and submitting changes
●
Message handling
© Copyright. All rights reserved.
123
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
●
Control of the UI using OData annotations, which semantically enrich the OData metadata
●
Handling of draft documents (draft saving is available)
SAP Fiori Elements are part of the SAPUI5 delivery.
Figure 92: Currently Available Floorplans
With a List Report, users can view and work with a large set of items. This floorplan offers
powerful features for finding and acting on relevant items. It is often used as an entry point for
navigating to the item details, which are usually shown on an Object Page.
The Object Page allows users to display, edit, and create objects, and save drafts. It is suitable
for both simple objects and more complex, multi-faceted objects. The Object Page view offers
optimal support for multiple devices.
An Overview Page is a data-driven SAP Fiori application for organizing large amounts of
information. Overview pages provide quick access to business information at a glance, in the
form of visual, actionable cards. The application lets you create several cards for different
types of content that helps in visualizing information in an attractive and efficient way. The
displayed data is fully interactive, with clickable areas for easy navigation to relevant
applications.
The Analytical List Page is an SAP Fiori Elements application for detailed analytics. It lets you
analyze data from different perspectives, to investigate a root cause, and to act on
transactional content. All this can be done seamlessly within one page.
124
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
Figure 93: List Report – Main Elements
The List Report view includes the following main elements:
●
●
●
Using the variant management control in the header title, the user can save and restore
the filter settings. Users can choose a default variant, which is selected every time the app
is started.
The filter bar in the header content can contain a search field (optional). If you use the
search field, the content area shows only items that match both the search and filter
criteria. By default, the filter bar is displayed as shown above, when users launch an app.
When choosing Go, the content of the List Report is displayed.
The content area consists of a table toolbar and a table. In the table toolbar a table title
(with an item count) and table actions can be displayed.
Figure 94: Object Page – Main Elements
The Object Page is a floorplan with a display mode, a create mode, and an edit mode. In all
modes, the Object Page contains:
© Copyright. All rights reserved.
125
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
●
●
●
A header – The header is the uppermost element of the Object Page floorplan. It contains
key information about the business object and provides the user with the necessary
context. The header also contains global actions for the object.
A navigation bar – The navigation bar lets users navigate to the individual content area
sections.
A content area – The Object Page content consists of sections and subsections arranged
in a column layout. Sections are containers for subsections. They provide the basic
structure for navigation, and are directly reflected in the navigation bar. Sections can have
a title, subsections, and actions. However, they cannot contain controls. Subsections are
the containers for the actual content.
Figure 95: Overview Page – Main Elements
The Overview Page allows the user to focus on the most important tasks, and view, filter, and
react to information quickly. Each task or topic is represented by a card (or content
container). The Overview Page acts as a UI framework for organizing multiple cards on a
single page.
The Overview Page is always role-based. The user sees a heterogeneous set of information
related to a specific business context and the tasks associated with a specific role. This is not
the case with the Object Page, which contains homogenous, object-based information.
The Overview Page application contains the following main components:
●
●
126
In the header of the Overview Page, variant management and a filter bar can be displayed.
The filter bar provides application-level filters for changing the levels of data displayed in
the cards. For example, you could use the filter to display only transactions larger than
$10,000, only items lighter than 50 kg, and so on. The variant management enables end
users to persist their preferred filters.
The content of the Overview Page is presented using cards. Information can be visualized
on cards in different ways (texts, charts, lists, tables). Users can reposition cards by
dragging them to a different location.
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
Figure 96: Analytical List Page – Main Elements
In the Analytical List Page, you can filter data sets used for the content area through different
filter modes. You can either use a compact filter or a visual filter to perform the search
operation. Visual filters provide an intuitive way of choosing filter values from an associated
measure value. Visual filters support line, bar, and donut chart types.
You can choose to view data in the content area in the following view modes:
●
Table only – Displays transactional data in a tabular format
●
Chart only – Uses a chart that provides visual representation of analytical data
●
Hybrid (chart and table) – This is the default data display mode in the content area. It
allows you to view both analytical data (chart format) and transactional data (table
format). Users can interact with both the chart and the table. Selecting a dimension within
a chart area automatically filters all relevant information in the table area. For example, if a
chart selection is Country=ABC, then all records associated with this country selection are
filtered in the table.
© Copyright. All rights reserved.
127
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Adding Semantics to OData Services
Figure 97: Working with Annotations
Annotations are at the heart of the SAP Fiori Elements approach. They are a powerful way of
extending OData services and can be used to embed machine-readable additional metadata
that can be leveraged by development tools, client libraries, and generic clients to better
interact with the service. This additional information can be embedded in the service's
metadata, or it can be provided as a separate web resource that references the annotated
service.
With OData 2.0 SAP invented SAP-specific annotations to express business semantics. The
drawback of using custom annotations is that non-SAP client libraries at best gracefully
ignore these SAP annotations, but to consume these annotations, SAP has to provide SAPspecific libraries or library extensions, reducing some of the benefit from using a standardized
protocol. With OData 4.0, semantic meta-information can be expressed in a standardized
way, and all fully compliant OData 4.0 client libraries will know how to parse these annotations
and pass them on to the consuming applications.
Figure 98: Generating the UI from OData Annotations – Example 1
128
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
As mentioned, there is a specification for an SAP extension of the OData protocol based on
annotations for OData Version 2.0 (SAP metadata extensions). For detailed information
regarding this specification see http://scn.sap.com/docs/DOC-44986.
One area of SAP Annotations for OData Version 2.0 are capability annotations that describe
which of the possible interactions defined by OData's uniform interface are supported by
which parts of a concrete service. These annotations will, for example, tell whether an entity
set allows inserts, updates, or deletes, whether it requires a filter, and which properties can be
used in filter expressions. They also advertise capabilities that go beyond the base set defined
by OData, for example, whether an entity set allows free-text search via an SAP-defined query
option. This information is used by SAP Fiori Elements to generate the appropriate UI
elements.
Figure 99: Generating the UI from OData Annotations – Example 2
Another area of SAP Annotations for OData Version 2.0 are semantic annotations that tell
which of the OData properties contain, for example, a monetary amount, and link the amount
to its currency. In example 2, the annotation sap:semantics="currency-code" identifies
the content of the currency property as an ISO currency code. The currency property is
referenced by the annotation sap:unit of the PaymentSum property to provide the
information that the currency property contains the currency code for the payment amount.
The annotation sap:label is used to provide a human-readable text suitable for labels and
captions in UIs, whereas sap:quickinfo contains a human-readable text suitable for tool
tips.
All information is used by SAP Fiori Elements to generate the appropriate user interface.
© Copyright. All rights reserved.
129
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 100: Generating the UI from OData Annotations – Example 3
A vocabulary is a namespace containing terms where each term is a named metadata
extension for an OData service. Vocabularies provide the ability to annotate metadata as well
as instance data:
●
●
Metadata annotations can be used to define additional characteristics or capabilities of a
metadata element, such as a service, entity type, property, function, or parameter. For
example, a metadata annotation may define ranges of valid values for a particular
property.
Instance annotations can be used to define additional information associated with a
particular result, entity, property, or error; for example, whether a property is read-only for
a particular instance.
All annotations are expressed as <Annotation> elements that name the term that is applied
to a model element as well as the value for this term. In the example 3, the term
UI.SelectionFields is used. This identifies properties that might be relevant for filtering a
collection of entities of the entity type mentioned in the target attribute of the annotations
element. The value for the term UI.SelectionFields is described by a collection of
property paths, meaning "follow these paths in the annotated entity type to find the value for
the term". In other words, the consumer now knows that the property Carrid of the
annotated entity type is relevant for filtering a collection of corresponding entities. For that
reason, a field for the airline is automatically generated in the filter bar of the list report.
The following vocabularies exist in addition to the OData standard vocabularies:
●
●
●
●
130
Core – Core terms needed to write vocabularies (https://github.com/oasis-tcs/odatavocabularies/blob/master/vocabularies/Org.OData.Core.V1.md)
Capabilities – Terms describing capabilities of a service (https://github.com/oasis-tcs/
odata-vocabularies/blob/master/vocabularies/Org.OData.Capabilities.V1.md)
Measures – Terms describing monetary amounts and measured quantities (https://
github.com/oasis-tcs/odata-vocabularies/blob/master/vocabularies/
Org.OData.Measures.V1.md)
Validation – Terms describing validation rules (https://github.com/oasis-tcs/odatavocabularies/blob/master/vocabularies/Org.OData.Validation.V1.md)
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
SAP has developed three additional vocabularies for describing data semantics and its
abstract UI representation:
●
●
●
SAP Common – centered on data semantics (https://wiki.scn.sap.com/wiki/x/vh_7Gg)
SAP Communication – centered on communication-relevant information (https://
wiki.scn.sap.com/wiki/x/ux_7Gg)
SAP UI – centered on presenting data in user interfaces (https://wiki.scn.sap.com/
wiki/x/uB_7Gg)
Figure 101: CDS Annotations Controlling the UI
The CDS annotations belonging to UI.selectionField allow filtering a list of data. The
UI.selectionField CDS annotations are usually used in an initial page floorplan as filter
bar. With the CDS annotation UI.selectionField.position, you specify the order of
selection fields that are used for filtering.
For example, when users open a list report application and see a table with objects, they
might want to filter for a specific property. With the CDS annotation
UI.selectionField.position you specify which selection fields are displayed for filtering
above the table. You specify what selection field is displayed first, second, and so on. The
Service Adaptation Definition Language (SADL) translates the CDS annotations into the
corresponding OData Version 4.0 annotations for the corresponding OData service.
© Copyright. All rights reserved.
131
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Creating an Application Containing a List Report and Object Pages
Figure 102: Creating a List Report Application – 1
To create an application that is based on the SAP Fiori Elements List Report and Object Page,
proceed as follows:
●
●
In the SAP Web IDE, go to File → New → Project from Template. The system starts the
wizard for new projects.
In the Template Selection step, select the List Report Application tile and choose Next.
Figure 103: Creating a List Report Application – 2
132
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
In the Basic Information step, the following fields are mandatory: Project Name and Title.
Optionally, you can enter a Namespace and a Description for your application. Choose Next.
To specify the data connection, choose Service Catalog from the list of sources, and select the
required SAP Gateway system from the drop-down. Select the desired OData service from
the table and then choose Next.
Figure 104: Creating a List Report Application – 3
If the used OData service provides any available UI-related metadata, the corresponding
annotation files are displayed in the table of the Annotation Selection step. Select the desired
annotation files and rank them in the order in which they will be loaded. If the annotation files
overlap, the one loaded last will overwrite the previous ones. Choose Next.
In the Template Customization step you have to choose the entity set for the OData Collection
that creates the list report and the first object page of your project. In the second drop-down,
you can choose a navigation property to create a navigation to a second object page. Click
Finish to create the project.
© Copyright. All rights reserved.
133
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 105: Project Tree Created in the SAP Web IDE
The project wizard creates the SAP Fiori application based on SAP Fiori Elements. Once you
have applied the template, the generated application is ready to run.
The XML files in the localService folder are copies of the annotation files selected in the
project wizard. They are generated for local tests that want to simulate back-end access. For
productive scenarios, the files are not needed.
In contrast to the annotation files that are retrieved from the back-end system, the local
annotation file annotations/annotations.xml plays a role at runtime. It can be used to
add UI annotations to the selected OData service. You can also override annotations from
back-end sources by editing them locally in this annotation file. You should use the SAP Web
IDE Annotation Modeler to maintain the local annotation file. It provides an intuitive user
interface for annotating OData services.
If required, you can adapt the default UI texts for your application. The standard texts can be
overwritten by application-specific texts using the i18n.properties resource files.
134
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Exercise 10
Create a List Report Application
Business Scenario
In this exercise, you create a List Report Application in the SAP Web IDE Personal Edition
based on the OData service you generated in a previous exercise. You then test the
application in the browser.
Note:
Login information will be provided by your trainer.
1. In the SAP Web IDE Personal Edition, create a new project called
sap.training.bookings using the project template List Report Application. Enter
Customer Bookings as the application’s Title and student## as the corresponding
Namespace (where ## is your group number). The application should be based on the
OData service generated in a previous exercise and display a list of customers. The flight
bookings belonging to a customer should also be displayed using navigation.
2. Test your application by starting it from the SAP Web IDE.
© Copyright. All rights reserved.
135
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Solution 10
Create a List Report Application
Business Scenario
In this exercise, you create a List Report Application in the SAP Web IDE Personal Edition
based on the OData service you generated in a previous exercise. You then test the
application in the browser.
Note:
Login information will be provided by your trainer.
1. In the SAP Web IDE Personal Edition, create a new project called
sap.training.bookings using the project template List Report Application. Enter
Customer Bookings as the application’s Title and student## as the corresponding
Namespace (where ## is your group number). The application should be based on the
OData service generated in a previous exercise and display a list of customers. The flight
bookings belonging to a customer should also be displayed using navigation.
a) If you have not already done so, log in to the SAP Web IDE Personal Edition.
b) From the SAP Web IDE menu, select the path File → New → Project from Template.
c) Select the template List Report Application, and choose Next.
d) Enter sap.training.bookings as the Project Name, Customer Bookings as the
application’s Title, and student## as the corresponding Namespace, where ## is your
group number. Choose Next.
e) In the Data Connection step, make sure that the entry Service Catalog is chosen
from the list of Sources, and select the system SAP Front-End Server
Development from the drop-down. If prompted, enter the username and password for
the ABAP system used. Select your OData service from the table and choose Next.
f) In the Annotation Selection step, select all annotation files displayed in the table.
Choose Next.
g) In the Template Customization step, choose your Customer entity set as OData
Collection that creates the List Report and the first Object Page of your project. In the
OData Navigation drop-down, choose the navigation property to_Booking to create a
navigation to a second Object Page. Choose Finish to create the project.
2. Test your application by starting it from the SAP Web IDE.
a) To start the application, from the SAP Web IDE toolbar, choose Run.
b) On the Choose the File to Run dialog box, choose flpSandbox.html and choose OK.
c) On the displayed page, choose the tile that belongs to your application.
136
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
d) If prompted, enter the username and password for the ABAP system used.
e) Verify that the application works as expected.
© Copyright. All rights reserved.
137
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Configuring List Report and Object Page Features Using CDS Annotations
Figure 106: Enabling the Search Function in the List Report
The full text searching provides you with the capability to identify natural language terms that
satisfy a query and, optionally, to sort them by relevance (ranking) to the query.
Fuzzy search is a fast and fault-tolerant search feature of SAP HANA. The basic concept
behind the fault-tolerant search is that a database query returns records even if the search
term (user input) contains additional or missing characters, or even spelling errors.
Within the context of the ABAP programming model for SAP Fiori, you only need to enable the
text and fuzzy search functionality in your data model definitions. For this purpose, you
implement it in designated CDS views using appropriate text and fuzzy search annotations.
As an application developer however, you must ensure that your CDS views are suitable for
text and fuzzy search enabling.
The Search.searchable annotation marks a view as searchable. It defines that a CDS view
is generally relevant for search scenarios. This annotation must be set in case other searchrelated annotations are being defined for elements of the respective CDS view.
Search.defaultSearchElement specifies that the element is to be considered in a
freestyle search. At least one view field must be defined as a default search element. All view
elements that are annotated for the default search define the search scope. The search will be
performed on all elements that have this annotation.
Search.fuzzinessThreshold specifies the lowest level of fuzziness that the element has
to have to be considered in a fuzzy search at all, for example, 0.7. The value can be between 0
and 1. The default value is 1. SAP recommends using the default value 0.7 to start with. Later
on, you can fine-tune the search settings based on your experiences with the search. You can
also fine-tune the search using feedback collected from your users. A value of between 0.7
and 0.99 would be most useful. Use 1 for exact matches.
@Search.ranking specifies how relevant the values of an element (view field) are for
ranking, should the freestyle search terms match the element's value. The ranking can have
the following values: HIGH, MEDIUM, LOW.
138
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
The shown example implements a search model for searching flight connections. The
annotation @Search.searchable: true marks the view as searchable. In addition, the
element Cityfrom is annotated with @Search.defaultSearchElement: true. This means
that a freestyle search is enabled on the search UI where it is possible to search for the
annotated element. The annotation @Search.fuzzinessThreshold: 0.9 defines that the
text search should be applied to the element Cityfrom with a similarity value of 90%.
Figure 107: Using Metadata Extensions
A metadata extension is a transportable ABAP development object that provides CDS
annotations in order to extend the CDS annotations used in a CDS view. Defining the
annotations outside the CDS source code of the CDS entity improves the readability of the
CDS source code of a data definition as it does not have to list all of the metadata.
The source code and the activation of a CDS entity are completely independent of any
metadata extensions for this entity. For this reason, a Metadata Extension can only add
annotations that are not already evaluated during the activation of the CDS entity. Currently
only the ABAP annotation @EndUserText and the component-specific annotations @UI can
be specified in metadata extensions. A syntax error occurs if annotations that are not
permitted are specified.
The metadata can be defined and transported independently of the data definition.
To use a metadata extension for a CDS view, you have to consider the following conditions:
●
●
In the definition of the CDS view, the @Metadata.allowExtensions annotation with the
value true is added. This annotation explicitly allows the use of metadata extensions.
In the metadata extension, you have to define the name of the CDS view to be annotated in
the annotate view statement.
There can be several metadata extensions for one CDS entity. Each metadata extension is
assigned to a layer using the annotation Metadata.layer. This annotation defines the
priority of the metadata extension when it is evaluated. The #CUSTOMER layer has the highest
priority. The #CORE layer has the lowest priority.
To create a metadata extension in your ABAP project, open the context menu for the relevant
package node in the Project Explorer and choose New → Other ABAP Repository
© Copyright. All rights reserved.
139
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Object → Core Data Services → Metadata Extension to select the corresponding creation
wizard.
Figure 108: Displaying Table Columns in the List Report
If you perform a search in the list report using the Go button, you get an error message if no
columns are selected for the table. The annotation UI.lineItem can be used to make table
columns visible.
With UI.lineItem.position, you specify the order of the columns of a list. Only the
positioning order is relevant, so you can use any decimal number as a value for the positioning
property. This annotation is mandatory.
The annotation UI.lineItem.importance expresses the importance of a column. To define
importance, you can choose the following values: #HIGH, #MEDIUM, and #LOW. This
information is relevant for adaptive UIs: If a UI is displayed on a small screen, elements with
low priority can automatically be hidden. That is, columns that need to be displayed always
get a HIGH importance. This ensures that these columns are displayed in the table when the
table is rendered on a small display. If no importance is defined, the line item is treated as if it
had a LOW importance.
140
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
Figure 109: Field Hiding
Generally, all fields that are exposed by an OData service are available to the client, whether or
no the fields are exposed explicitly using UI annotations. To enable end-user personalization,
the list report offers the possibility to add fields that are hidden by default. You can use the
annotation UI.hidden to prevent fields from being displayed on the UI and in the
personalization dialog, but leaving the field available for the client. You can use this feature if,
for example, a CDS view contains technical keys, for example GUIDs, that have to be exposed
to the OData service to work. These keys are usually not supposed to be displayed on the UI.
You can also use this annotation if fields are required in calculations, but are not supposed to
be displayed on a UI.
In the displayed example, the hidden fields ConnGuid and CarrGuid are needed on the client
side for the OData service to work, but are not supposed to be displayed on the UI.
You can use the annotation @Consumption.hidden to prevent fields from being available to
a client. Preventing fields from being available to a client is useful, for example, for system
parameters. These parameters are filled by the runtime engine, but should not be available to
the client. In cases where a field is needed in the client, for example for calculations, but
should not be displayed directly in a list or table, or on an object page floorplan, the
annotation @Consumption.hidden is not suitable.
© Copyright. All rights reserved.
141
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Figure 110: Selection Fields for Filtering
If a CDS view is annotated with @Search.searchable, the UI automatically takes this into
consideration and no additional UI annotations are required to expose a search field in the list
report. If the table contains many data and therefore many rows, it gets hard to find the
information you need. To facilitate finding the desired information, you can use selection
fields to specify the range of information that you are looking for.
The annotation UI.selectionField allows you to specify selection fields to filter a list
report using a filter bar.
With UI.selectionField.position, you specify the order of selection fields that are used
for filtering. Only the positioning order is relevant, so you can use any decimal number as a
value for the positioning property. This annotation is mandatory.
Figure 111: General Information on the Object Page
142
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
The annotation UI.identification is used to identify an entity to an end user. The
information is displayed in the General Information section in the content area of the Object
Page.
With UI.identification.position, you specify the order of entries in the General
Information section of the Object Page. This annotation is mandatory. Only the positioning
order is relevant, so you can use any decimal number as a value for the positioning property.
The annotation UI.identification.importance expresses the importance of the data
fields. To define importance, you can choose the following values: #HIGH, #MEDIUM, and
#LOW. The importance is relevant for adaptive UIs: If a UI is displayed on a small screen,
elements with low priority can automatically be hidden. That is, the entries of the General
Information section of the Object Page that need to be displayed always get a HIGH
importance. This ensures that these entries are displayed in the section when this section is
rendered on a small display. If no importance is defined, the identification item is treated like
having a LOW importance.
Figure 112: Page Header of an Object Page
The page header of an Object Page contains information on the object you are editing. You
can use several UI annotations to influence the header section of the Object Page.
Annotations belonging to the UI.headerInfo describe an entity, its title, an optional short
description, the name of the entity in singular and plural form, and optional image URLs for
the individual entity.
UI.headerInfo.typeName represents the title of an Object Page. The element is required
and can be omitted only when the @EndUserText.label is specified on view level.
UI.headerInfo.title is used to represent the title of an item on the header of an item's
Object Page, whereas UI.headerInfo.description provides an appropriate description.
UI.headerInfo.title.value and UI.headerInfo.description.value refer to a
value. If you refer to a value that is in the same view, specify the element name. If you use an
association to refer to a value, specify the path to the element.
© Copyright. All rights reserved.
143
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
UI.headerInfo.title.label and UI.headerInfo.description.label contain a
language-dependent text that can be used for titles or descriptions in the Object Page. The
elements are optional.
Figure 113: Table Title in the List Report
If necessary, you can provide a header for the table in the list report. The UI annotation
UI.headerInfo.typeNamePlural represents the table title in the list report. The title is
displayed together with an item count.
144
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Exercise 11
Configure a List Report Application Using CDS
Annotations
Business Scenario
In this exercise, you configure the List Report Application you created in the last exercise by
using CDS annotations. You then test the application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S2 (Customer Consumption View)
DS4_C_Booking_S2 (Booking Consumption View)
Solution:
DS4_C_Customer_S3 (Customer Consumption View)
DS4_C_Booking_S3 (Booking Consumption View)
DS4_E_CUSTOMER_S3 (Customer Metadata Extension)
DS4_E_BOOKING_S3 (Booking Metadata Extension)
1. To enable the search function in the List Report, mark your views Z##_C_Customer and
Z##_C_Booking (## = group number) as searchable. In the view Z##_C_Customer,
specify the fields Name and City as default search elements with a fuzziness level of 0.8.
In the view Z##_C_Booking, specify the fields BookID and AgencyNum as default search
elements.
Note:
To test the search function, you can rerun the List Report Application from the
SAP Web IDE after you have activated the changed sources. There should be a
search field in the header area of the list report to search for individual
customers by their name and city. Note that the application uses only the
search functionality of the customer view.
2. The UI annotations required for the customer and the booking view should be stored in
Metadata Extensions. Therefore, allow the use of Metadata Extensions in the views
Z##_C_Customer and Z##_C_Booking (## = group number), then activate the two views.
3. Create a Metadata Extension named Z##_ E_CUSTOMER (## = group number) in your
package ZS4DEV _ ##_BES to annotate the view Z##_C_Customer. Choose Customer
© Copyright. All rights reserved.
145
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
UI Metadata as the description and assign the Metadata Extension to the transport
request belonging to the course.
4. Create a Metadata Extension named Z##_ E_BOOKING (## = group number) in your
package ZS4DEV _ ##_BES to annotate the view Z##_C_Booking accordingly. Choose
Booking UI Metadata as the description and also assign this Metadata Extension to the
transport request belonging to the course.
5. Go to Metadata Extension Z##_E_CUSTOMER (## = group number) and make sure that it
annotates view Z##_C_Customer. Assign the Metadata Extension to the layer #CUSTOMER
and insert all fields from view Z##_C_Customer into the extension.
6. Use the annotation @UI.headerInfo in the Metadata Extension Z##_E_CUSTOMER to
set the title of the table in the List Report to Flight Customers and the title of the
Object Page to Flight Customer. Also, make sure that the customer name is used as
the title and the city as the description in the header of the Object Page.
7. Use the annotation @UI.hidden in the Metadata Extension Z##_E_CUSTOMER to
prevent the field CustomGuid from being displayed on the UI and in the personalization
dialog. In addition, configure the following properties for the List Report Application:
Use the annotation @UI.lineItem to
a) ID (importance #HIGH)
make the following fields visible as table
columns in the List Report (in the order giv- b) Name (importance #HIGH)
en and with the stated importance):
c) Street (importance #MEDIUM)
d) PostCode (importance #MEDIUM)
e) City (importance #HIGH)
f) Country (importance #MEDIUM)
g) Email (importance #MEDIUM)
h) Telephone (importance #MEDIUM)
Use the annotation @UI.selectionField
to specify the following fields to be displayed as selection fields in the filter bar of
the List Report (in the order given):
146
a) PostCode
b) Country
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
Use the annotation @UI.identification
a) ID (importance #HIGH)
to define the following fields to be displayed
in the General Information section of the
b) Form (importance #HIGH)
Object Page (in the order given and with
c) Name (importance #HIGH)
the stated importance):
d) Street (importance #MEDIUM)
e) PostCode (importance #MEDIUM)
f) City (importance #HIGH)
g) Country (importance #MEDIUM)
h) Email (importance #MEDIUM)
i) Telephone (importance #MEDIUM)
j) Discount (importance #LOW)
8. Go to Metadata Extension Z##_E_BOOKING (## = group number) and make sure that it
annotates view Z##_C_Booking. Assign the Metadata Extension to the layer #CUSTOMER
and insert all the fields from view Z##_C_Booking into the extension.
9. Use the annotation @UI.headerInfo in the Metadata Extension Z##_E_BOOKING to set
the title of the table in the List Report to Flight Bookings and the title of the Object
Page to Flight Booking. Also, make sure that the booking ID is used as the title and the
order date as the description in the header of the Object Page.
10. Use the annotation @UI.hidden in the Metadata Extension Z##_E_BOOKING to prevent
the fields BookGuid and CustomGuid from being displayed on the UI and in the
personalization dialog. In addition, configure the following properties for the List Report
Application:
Use the annotation @UI.lineItem to
make the following fields visible as table
columns in the List Report Application (in
the order given and with the stated importance):
a) BookID (importance #HIGH)
b) CarrID (importance #HIGH)
c) ConnID (importance #HIGH)
d) FlDate (importance #HIGH)
e) Order_Date (importance #MEDIUM)
f) ForCurAm (importance #MEDIUM)
g) ForCurKey (importance #MEDIUM)
h) Cancelled (importance #MEDIUM)
© Copyright. All rights reserved.
147
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Use the annotation @UI.selectionField
to specify the following fields to be displayed as selection fields in the filter bar of
a List Report (in the order given):
a) CarrID
b) FlDate
Note:
The configured selection fields
are not displayed in the application as the bookings are only displayed on an Object Page
and not via a List Report.
Use the annotation @UI.identification a) BookID (importance #HIGH)
to define the following fields to be displayed
in the General Information section of the
b) CarrID (importance #HIGH)
Object Page (in the order given and with
c) ConnID (importance #HIGH)
the stated importance):
d) FlDate (importance #HIGH)
e) Class (importance #MEDIUM)
f) Order_Date (importance #MEDIUM)
g) ForCurAm (importance #MEDIUM)
h) ForCurKey (importance #MEDIUM)
i) AgencyNum (importance #LOW)
j) Cancelled (importance #MEDIUM)
11. Activate the two Metadata Extensions and test your application by starting it from the SAP
Web IDE.
148
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Solution 11
Configure a List Report Application Using CDS
Annotations
Business Scenario
In this exercise, you configure the List Report Application you created in the last exercise by
using CDS annotations. You then test the application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S2 (Customer Consumption View)
DS4_C_Booking_S2 (Booking Consumption View)
Solution:
DS4_C_Customer_S3 (Customer Consumption View)
DS4_C_Booking_S3 (Booking Consumption View)
DS4_E_CUSTOMER_S3 (Customer Metadata Extension)
DS4_E_BOOKING_S3 (Booking Metadata Extension)
1. To enable the search function in the List Report, mark your views Z##_C_Customer and
Z##_C_Booking (## = group number) as searchable. In the view Z##_C_Customer,
specify the fields Name and City as default search elements with a fuzziness level of 0.8.
In the view Z##_C_Booking, specify the fields BookID and AgencyNum as default search
elements.
Note:
To test the search function, you can rerun the List Report Application from the
SAP Web IDE after you have activated the changed sources. There should be a
search field in the header area of the list report to search for individual
customers by their name and city. Note that the application uses only the
search functionality of the customer view.
a) Annotate the views Z##_C_Customer and Z##_C_Booking with
@Search.searchable: true.
b) Add the annotation @Search.defaultSearchElement: true to the fields Name
and City of view Z##_C_Customer and the fields BookID and AgencyNum of view
Z##_C_Booking.
© Copyright. All rights reserved.
149
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
c) In addition, add the annotation @Search.fuzzinessThreshold: 0.8 to the fields
Name and City of view Z##_C_Customer.
2. The UI annotations required for the customer and the booking view should be stored in
Metadata Extensions. Therefore, allow the use of Metadata Extensions in the views
Z##_C_Customer and Z##_C_Booking (## = group number), then activate the two views.
a) Annotate the views Z##_C_Customer and Z##_C_Booking with
@Metadata.allowExtensions: true.
b) To activate inactive ABAP development objects you can use the keyboard shortcut Ctrl
+ Shift + F3.
3. Create a Metadata Extension named Z##_ E_CUSTOMER (## = group number) in your
package ZS4DEV _ ##_BES to annotate the view Z##_C_Customer. Choose Customer
UI Metadata as the description and assign the Metadata Extension to the transport
request belonging to the course.
a) Choose New → Metadata Extension in the context menu of the folder Core Data
Services, which appears under your package ZS4DEV _ ##_BES in the Project
Explorer.
b) On the dialog box, enter Z##_E_CUSTOMER (## = group number) in the Name field and
Customer UI Metadata as Description. Choose Next.
c) Select the transport request belonging to the course for the Metadata Extension and
choose Next.
d) In the last step of the wizard, make sure that the template Annotate View is selected
and choose Finish.
4. Create a Metadata Extension named Z##_ E_BOOKING (## = group number) in your
package ZS4DEV _ ##_BES to annotate the view Z##_C_Booking accordingly. Choose
Booking UI Metadata as the description and also assign this Metadata Extension to the
transport request belonging to the course.
a) To perform this step, proceed as described in the previous step.
5. Go to Metadata Extension Z##_E_CUSTOMER (## = group number) and make sure that it
annotates view Z##_C_Customer. Assign the Metadata Extension to the layer #CUSTOMER
and insert all fields from view Z##_C_Customer into the extension.
a) In Metadata Extension Z##_E_CUSTOMER replace view_name with Z##_C_Customer
(## = group number).
b) In the @Metadata.layer annotation, set the layer to #CUSTOMER.
c) To insert all fields from the view Z##_C_Customer into the Metadata Extension, press
Ctrl + Space in the element list and select the template Insert all elements in the dialog
box that appears. Finally, delete the association _Booking from the list of inserted
elements.
6. Use the annotation @UI.headerInfo in the Metadata Extension Z##_E_CUSTOMER to
set the title of the table in the List Report to Flight Customers and the title of the
Object Page to Flight Customer. Also, make sure that the customer name is used as
the title and the city as the description in the header of the Object Page.
150
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
a) In the Metadata Extension Z##_E_CUSTOMER, add the following annotation before
the annotate view statement:
@UI: {
headerInfo: {
typeName: 'Flight Customer',
typeNamePlural: 'Flight Customers',
title: { value: 'Name' },
description: { value: 'City' }
}
}
7. Use the annotation @UI.hidden in the Metadata Extension Z##_E_CUSTOMER to
prevent the field CustomGuid from being displayed on the UI and in the personalization
dialog. In addition, configure the following properties for the List Report Application:
Use the annotation @UI.lineItem to
a) ID (importance #HIGH)
make the following fields visible as table
columns in the List Report (in the order giv- b) Name (importance #HIGH)
en and with the stated importance):
c) Street (importance #MEDIUM)
d) PostCode (importance #MEDIUM)
e) City (importance #HIGH)
f) Country (importance #MEDIUM)
g) Email (importance #MEDIUM)
h) Telephone (importance #MEDIUM)
Use the annotation @UI.selectionField
to specify the following fields to be displayed as selection fields in the filter bar of
the List Report (in the order given):
a) PostCode
b) Country
Use the annotation @UI.identification a) ID (importance #HIGH)
to define the following fields to be displayed
in the General Information section of the
b) Form (importance #HIGH)
Object Page (in the order given and with
c) Name (importance #HIGH)
the stated importance):
d) Street (importance #MEDIUM)
e) PostCode (importance #MEDIUM)
f) City (importance #HIGH)
g) Country (importance #MEDIUM)
h) Email (importance #MEDIUM)
i) Telephone (importance #MEDIUM)
j) Discount (importance #LOW)
© Copyright. All rights reserved.
151
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
a) Your coding in the Metadata Extension Z##_E_CUSTOMER should look something like
the following:
@UI.hidden: true
CustomGuid;
@UI: {
lineItem: [ { position: 10, importance: #HIGH } ],
identification: [ { position: 10, importance: #HIGH } ]
}
ID;
@UI: {
identification: [ { position: 20, importance: #MEDIUM } ]
}
Form;
@UI: {
lineItem: [ { position: 30, importance: #HIGH } ],
identification: [ { position: 30, importance: #HIGH } ]
}
Name;
@UI: {
lineItem: [ { position: 40, importance: #MEDIUM } ],
identification: [ { position: 40, importance: #MEDIUM } ]
}
Street;
@UI: {
lineItem: [ { position: 50, importance: #MEDIUM } ],
identification: [ { position: 50, importance: #MEDIUM } ],
selectionField: [ { position: 50 } ]
}
PostCode;
@UI: {
lineItem: [ { position: 60, importance: #HIGH } ],
identification: [ { position: 60, importance: #HIGH } ]
}
City;
@UI: {
lineItem: [ { position: 70, importance: #MEDIUM } ],
identification: [ { position: 70, importance: #MEDIUM } ],
selectionField: [ { position: 70 } ]
}
Country;
@UI: {
lineItem: [ { position: 80, importance: #MEDIUM } ],
identification: [ { position: 80, importance: #MEDIUM } ]
}
Email;
@UI: {
lineItem: [ { position: 90, importance: #MEDIUM } ],
identification: [ { position: 90, importance: #MEDIUM } ]
}
Telephone;
@UI: {
152
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
identification: [ { position: 100, importance: #LOW } ]
}
Discount;
8. Go to Metadata Extension Z##_E_BOOKING (## = group number) and make sure that it
annotates view Z##_C_Booking. Assign the Metadata Extension to the layer #CUSTOMER
and insert all the fields from view Z##_C_Booking into the extension.
a) In Metadata Extension Z##_E_BOOKING replace view_name with Z##_C_Booking
(## = group number).
b) In the @Metadata.layer annotation, set the layer to #CUSTOMER.
c) To insert all fields from view Z##_C_Booking into the Metadata Extension, press Ctrl +
Space in the element list and select the template Insert all elements in the dialog box
that appears. Finally, delete the association _Customer from the list of inserted
elements.
9. Use the annotation @UI.headerInfo in the Metadata Extension Z##_E_BOOKING to set
the title of the table in the List Report to Flight Bookings and the title of the Object
Page to Flight Booking. Also, make sure that the booking ID is used as the title and the
order date as the description in the header of the Object Page.
a) In the Metadata Extension Z##_E_BOOKING, add the following annotation before the
annotate view statement:
@UI: {
headerInfo: {
typeName: 'Flight Booking',
typeNamePlural: 'Flight Bookings',
title: { value: 'BookID' },
description: { value: 'Order_Date' }
}
}
10. Use the annotation @UI.hidden in the Metadata Extension Z##_E_BOOKING to prevent
the fields BookGuid and CustomGuid from being displayed on the UI and in the
personalization dialog. In addition, configure the following properties for the List Report
Application:
Use the annotation @UI.lineItem to
make the following fields visible as table
columns in the List Report Application (in
the order given and with the stated importance):
a) BookID (importance #HIGH)
b) CarrID (importance #HIGH)
c) ConnID (importance #HIGH)
d) FlDate (importance #HIGH)
e) Order_Date (importance #MEDIUM)
f) ForCurAm (importance #MEDIUM)
g) ForCurKey (importance #MEDIUM)
h) Cancelled (importance #MEDIUM)
© Copyright. All rights reserved.
153
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
Use the annotation @UI.selectionField
to specify the following fields to be displayed as selection fields in the filter bar of
a List Report (in the order given):
a) CarrID
b) FlDate
Note:
The configured selection fields
are not displayed in the application as the bookings are only displayed on an Object Page
and not via a List Report.
Use the annotation @UI.identification a) BookID (importance #HIGH)
to define the following fields to be displayed
in the General Information section of the
b) CarrID (importance #HIGH)
Object Page (in the order given and with
c) ConnID (importance #HIGH)
the stated importance):
d) FlDate (importance #HIGH)
e) Class (importance #MEDIUM)
f) Order_Date (importance #MEDIUM)
g) ForCurAm (importance #MEDIUM)
h) ForCurKey (importance #MEDIUM)
i) AgencyNum (importance #LOW)
j) Cancelled (importance #MEDIUM)
a) Your coding in the Metadata Extension Z##_E_BOOKING should look something like
the following:
@UI.hidden: true
BookGuid;
@UI.hidden: true
CustomGuid;
@UI: {
lineItem: [ { position: 10, importance: #HIGH } ],
identification: [ { position: 10, importance: #HIGH } ]
}
BookID;
@UI: {
lineItem: [ { position: 20, importance: #HIGH } ],
identification: [ { position: 20, importance: #HIGH } ],
selectionField: [{ position: 20 }]
}
CarrID;
@UI: {
154
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
lineItem: [ { position: 30, importance: #HIGH } ],
identification: [ { position: 30, importance: #HIGH } ]
}
ConnID;
@UI: {
lineItem: [ { position: 40, importance: #HIGH } ],
identification: [ { position: 40, importance: #HIGH } ],
selectionField: [{ position: 40 }]
}
FlDate;
@UI: {
identification: [ { position: 50, importance: #MEDIUM } ]
}
Class;
@UI: {
lineItem: [ { position: 60, importance: #MEDIUM } ],
identification: [ { position: 60, importance: #MEDIUM } ]
}
Order_Date;
@UI: {
lineItem: [ { position: 70, importance: #MEDIUM } ],
identification: [ { position: 70, importance: #MEDIUM } ]
}
ForCurAm;
@UI: {
lineItem: [ { position: 80, importance: #MEDIUM } ],
identification: [ { position: 80, importance: #MEDIUM } ]
}
ForCurKey;
@UI: {
identification: [ { position: 90, importance: #LOW } ]
}
AgencyNum;
@UI: {
lineItem: [ { position: 100, importance: #MEDIUM } ],
identification: [ { position: 100, importance: #MEDIUM } ]
}
Cancelled;
11. Activate the two Metadata Extensions and test your application by starting it from the SAP
Web IDE.
a) To activate inactive ABAP development objects you can use the keyboard shortcut Ctrl
+ Shift + F3.
b) To start the application, proceed as described in the previous exercise.
c) Verify that the application works as expected.
© Copyright. All rights reserved.
155
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
156
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Exercise 12
Deploy a List Report Application
Business Scenario
In this exercise, you deploy the List Report application you developed in the last exercise on
an ABAP server via the SAP Web IDE.
Note:
Login information will be provided by your trainer.
1. Deploy the List Report application you developed in the previous exercise from the SAP
Web IDE to the SAP Front-End Server Development. To do this, create a new application
called Z##_MNG_BOOK (where ## stands for your group number) with the description
Manage Customer Bookings. Assign the application to your package ZS4DEV_##_FES (##
= group number) and to the transport request that already exists for the training course.
Note:
You can track the deployment process in the SAP Web IDE Console. To do this,
select the path View → Console from the SAP Web IDE menu.
Note:
The List Report application cannot be called and tested directly after
deployment on the server. Unlike the SAPUI5 application created in a previous
exercise, the List Report application does not have a start page index.html and
therefore still needs to be integrated with the SAP Fiori Launchpad before it
can be called. This integration will be done later in the course.
© Copyright. All rights reserved.
157
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Solution 12
Deploy a List Report Application
Business Scenario
In this exercise, you deploy the List Report application you developed in the last exercise on
an ABAP server via the SAP Web IDE.
Note:
Login information will be provided by your trainer.
1. Deploy the List Report application you developed in the previous exercise from the SAP
Web IDE to the SAP Front-End Server Development. To do this, create a new application
called Z##_MNG_BOOK (where ## stands for your group number) with the description
Manage Customer Bookings. Assign the application to your package ZS4DEV_##_FES (##
= group number) and to the transport request that already exists for the training course.
Note:
You can track the deployment process in the SAP Web IDE Console. To do this,
select the path View → Console from the SAP Web IDE menu.
Note:
The List Report application cannot be called and tested directly after
deployment on the server. Unlike the SAPUI5 application created in a previous
exercise, the List Report application does not have a start page index.html and
therefore still needs to be integrated with the SAP Fiori Launchpad before it
can be called. This integration will be done later in the course.
a) In the context menu of your SAP Web IDE project sap.training.bookings, choose the
path Deploy → Deploy to SAPUI5 ABAP Repository.
b) Make sure that the option Deploy a new application is selected on the displayed form,
and select the system SAP Front-End Server Development from the list box.
c) If prompted, enter the username and password for the ABAP system used. Confirm
your entries with the Log In button.
d) After successful login, choose the Next button.
e) As the Name of the new application, enter Z##_MNG_BOOK (## = group number) and as
the Description, enter Manage Customer Bookings. Use the Browse button to select
your package ZS4DEV_##_FES (## = group number). Choose Next.
158
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Consuming Business Data using SAP Fiori Elements
f) On the next window, make sure that the transport request belonging to the training
course is selected, and choose Next.
g) To close the wizard, choose Finish.
© Copyright. All rights reserved.
159
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: User Interface
LESSON SUMMARY
You should now be able to:
160
●
Explore SAP Fiori Elements
●
Implement a List Report Application
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Learning Assessment
1. How is the UI of an SAPUI5 application rendered?
Choose the correct answer.
X
A The UI is rendered in the browser using JavaScript.
X
B The UI is rendered in the browser using ABAP.
X
C The UI is rendered on the ABAP server using JavaScript.
X
D The UI is rendered on the ABAP server using ABAP.
2. Which tool can I use to deploy an SAPUI5 application to an ABAP server?
Choose the correct answer.
X
A SAP BUILD
X
B Object Navigator
X
C SAP Web IDE
X
D UI Theme Designer
3. SAP Fiori Elements provide a framework for generating UIs at runtime based on OData
services and annotations requiring no JavaScript UI coding. Just like the data provided via
OData services, the metadata annotations must also be made available via the
corresponding backend.
Determine whether this statement is true or false.
X
True
X
False
© Copyright. All rights reserved.
161
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: Learning Assessment
4. What of the following are floorplans currently available with SAP Fiori Elements?
Choose the correct answers.
162
X
A Overview Page
X
B Create Page
X
C Object Page
X
D Master-Detail Page
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4
Learning Assessment - Answers
1. How is the UI of an SAPUI5 application rendered?
Choose the correct answer.
X
A The UI is rendered in the browser using JavaScript.
X
B The UI is rendered in the browser using ABAP.
X
C The UI is rendered on the ABAP server using JavaScript.
X
D The UI is rendered on the ABAP server using ABAP.
You are correct! SAPUI5 is a JavaScript-based library for client-side UI rendering and
programming. Read more on this in the lesson Overview SAPUI5 of the course S4DEV.
2. Which tool can I use to deploy an SAPUI5 application to an ABAP server?
Choose the correct answer.
X
A SAP BUILD
X
B Object Navigator
X
C SAP Web IDE
X
D UI Theme Designer
You are correct! The SAP Web IDE supports the end-to-end application lifecycle including
deployment. SAP BUILD is a design tool without deployment support for creating
prototypes. The Object Navigator is used for ABAP development, not for SAPUI5
deployment. The UI Theme Designer is a tool without deployment support for theming and
branding SAP’s user interfaces. Read more on this in the Deployment of a Project section
of the course S4DEV.
© Copyright. All rights reserved.
163
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 4: Learning Assessment - Answers
3. SAP Fiori Elements provide a framework for generating UIs at runtime based on OData
services and annotations requiring no JavaScript UI coding. Just like the data provided via
OData services, the metadata annotations must also be made available via the
corresponding backend.
Determine whether this statement is true or false.
X
True
X
False
You are correct! SAP Fiori Elements provide the ability to work with local annotation files
that can be edited in the SAP Web IDE. These files can be used to add annotations to
OData services locally in the web application. You can also override annotations from
back-end sources by editing them locally in these annotation files. Read more on this in
the lesson Creating an application containing a List Report and Object Pages of the course
S4DEV.
4. What of the following are floorplans currently available with SAP Fiori Elements?
Choose the correct answers.
X
A Overview Page
X
B Create Page
X
C Object Page
X
D Master-Detail Page
You are correct! The following floorplans are currently available with SAP Fiori Elements:
Overview Page, Object Page, List Report, and Analytical List Page. The Create Page
floorplan is not available with SAP Fiori Elements. Master-Detail Page is not a floorplan,
but a page layout (the so-called split-screen layout). Read more on this in the lesson
Overview of SAP Fiori Elements of the course S4DEV.
164
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 5
Transactional Processing
Lesson 1
Enabling Change Operations
Exercise 13: Enable Create, Update, and Delete Operations
Exercise 14: Provide Draft Capabilities
166
179
193
Lesson 2
Implementing Additional Functionality
Exercise 15: Expose an Action to the Consumer
Exercise 16: Provide Value Helps
198
209
221
UNIT OBJECTIVES
●
Provide Create, Update, and Delete Functionalities
●
Enable Draft Capabilities
●
Create Determinations, Validations, and Actions
●
Add Value Help
© Copyright. All rights reserved.
165
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Lesson 1
Enabling Change Operations
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Provide Create, Update, and Delete Functionalities
●
Enable Draft Capabilities
Business Object Definition
Figure 114: SAP Fiori Programming Model – BOPF
166
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Figure 115: Transactional Applications
In the programming model for SAP Fiori, BOPF is used for write operations.
At design time, annotations are used in order to let the system generate the according BOPF
artifacts during the activation of the CDS view as indicated in the figure, Transactional
Applications.
At runtime, incoming OData requests (create, read, update, and delete operations (CRUD))
are processed in the SAP Gateway. SAP Gateway uses SADL internally to process these
requests. Read operations are directly executed via "selects" on CDS views. Write operations
are processed via BOPF.
Figure 116: Business Object Processing Framework (BOPF)
© Copyright. All rights reserved.
167
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
The pictured figure displays important elements of the business object metadata model and
their relationship with each other. For each node of a business object, several types of entities
can be defined to describe the specific business logic part of the business object.
●
●
●
●
An action is an entity assigned to an individual node of a business object that is used to
implement a service of the business object. In SAP Fiori, quick actions are "one-click"
actions with optional parameters. They are used for performing an action on each
individual record without the need for the end user to switch to edit mode. For quick
actions, no state needs to be kept on the client or back-end server. A quick action triggers
the business logic in the back end that is immediately executed. Action implementation
and action control requires business logic that is implemented on the basis of the BOPF
API. Therefore, quick actions are implemented as standard BOPF actions that are assigned
to the related business object node. At runtime, a (quick) action can modify a node
instance of the assigned business object or node instance of other associated business
objects.
A determination offers the possibility to execute programmable functionality at a certain
point of time. For example, to automatically calculate a value based on other values and
save this calculated value automatically when saving the dataset. For example, the user
enters a specification ID for a product and the system automatically searches for the
matching material and additionally saves the material ID.
A validation offers you the possibility to validate data at a special configured time and react
on a possible failure of the validation.
An association is used to define a relationship between two nodes. You can use an
association to navigate from a source node to a related target node.
Figure 117: CDS View Modeling for Transactional Applications
As a data source for a business object to be generated, a database table needs to be provided
for each business object CDS view (also referred to as business object view). Generally,
business object views are normalized CDS views that define the hierarchy of entities by using
associations and @ObjectModel annotations. A business object view is defined on top of the
underlying database table or the CDS view and exposes all elements that are defined in the
SELECT list, including the key elements that correspond to the primary keys of the underlying
database table. In the transactional scenario of the programming model for SAP Fiori, the
business object view is required for business object generation on the basis of the BOPF
framework.
168
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
A consumption CDS view (also referred to as consumption view) allows the consumption of a
business object view in a different manner by different OData services. Each service-specific
view is defined on top of a business object view and exposes its fields. A consumption view
enhances the data model with metadata, additional associations, or even with transient fields
that fit to a given consumption use case. In particular, the consumption views are used to
enhance the data model with UI-specific annotations for later consumption in Fiori UIs.
Figure 118: Implementing a Business Object CDS View
Each business object view must contain a specific set of @ObjectModel CDS annotations,
indicating, for example, the root of the given entity. The business object view of the root entity
needs additional CDS annotations in order to trigger the automatic generation of the
respective BOPF business object, which is named after the respective business object view.
The annotation @ObjectModel.modelCategory: #BUSINESS_OBJECT serves for semantic
categorization only (the CDS view represents a business object) in the context of the Virtual
Data Model (VDM). The model category is an optional annotation and has no runtime effect.
SAP recommends adding this annotation to views representing the root node of a business
object.
In addition to those listed in the figure, Implementing a Business Object CDS View, there are
further @ObjectModel CDS annotations, such as the following:
●
●
●
@ObjectModel.semanticKey[ ] can be used for CDS views to identify an instance of an
entity from business perspective using human-readable field values.
@ObjectModel.readOnly can be used for fields within a CDS view. If this annotation has the
value true, the field must not be updated by the consumer.
@ObjectModel.mandatory can also be used to annotate fields within a CDS view. If this
annotation has the value true, the field must be filled by the consumer when executing a
modification.
© Copyright. All rights reserved.
169
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Figure 119: Defining a Compositional View Hierarchy
Relations between CDS views are modeled via associations. These associations work fine for
read-operations. But as soon as the involved entities are writeable, the entities have to be
modeled as hierarchy on view level as described here.
The CDS annotation @ObjectModel.association.type also influences the scope of the OData
auto-exposure (@OData.publish: true): All views that are included in the view hierarchy are
automatically included in the same OData service.
Figure 120: Business Object View Example – Annotated Root Entity
In the example shown, you can see how the @ObjectModel CDS annotations are used in the
CDS view DS4_I_CustomerWD to define a Business Object CDS view. (The data source for the
CDS view DS4_I_CustomerWD is the CDS view DS4_I_Customer.)As root entity, the CDS view
DS4_I_CustomerWD is annotated with the annotations @ObjectModel.modelCategory:
#BUSINESS_OBJECT, @ObjectModel.transactionalProcessing: true, and
@ObjectModel.compositionRoot: true. In addition, the table DS4CUSTOM serves as a storage
170
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
place for business object data changes that result from transactional behavior. Therefore, this
table is specified in the @ObjectModel.writeActivePersistence annotation. The business
object defined here allows create, update, and delete operations.
The compositional association _Booking of the root Business Object view
DS4_I_CustomerWD is annotated appropriately by using the @ObjectModel.association.type
annotation with the appropriate value: #TO_COMPOSITION_CHILD. This annotation defines
which associated Business Object views are to be created as subnodes of the BOPF business
object.
Figure 121: Business Object View Example - Annotated Associated Entity
The CDS view DS4_I_BookingWD is linked to the root CDS view DS4_I_CustomerWD via an
association. (The data source for CDS view DS4_I_BookingWD is the CDS view
DS4_I_Booking.) The CDS view DS4_I_BookingWD specifies the database table DS4BOOK for
storing business object data changes that result from transactional behavior.
This CDS view also allows creating new instances as well as changing and deleting already
existing instances. That is, with this model it is possible to do CRUD operations on the root
entity and on the child entities as well.
The compositional association _Customer of the Business Object view DS4_I_BookingWD is
annotated appropriately by using the @ObjectModel.association.type annotation with
the appropriate values: #TO_COMPOSITION_PARENT and #TO_COMPOSITION_ROOT.
The annotation @VDM.viewType is used to define the type of the view as transactional. This
classification is used only for SAP internal structuring and interpretation of the CDS views. It
has no runtime effect.
© Copyright. All rights reserved.
171
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Figure 122: Generated Business Object – 1/2
As a result of successful activation of the data definitions (as the corresponding development
objects), the BOPF runtime generates a business object DS4_I_CUSTOMERWD (upper case
notation!) that is named after, and is stored in, the same package as the source CDS view, in
our case: DS4_I_CustomerWD (camel case notation!). The decorator within the editor ruler
indicates that the generation process has been successful. If you move the cursor over the
decorator, an info screen informs you that the business object is generated for the CDS view.
In addition, the info screen provides you with a link to the Business Object Editor.
On the entry page of the Business Object Editor, you can identify the Constants Interface that
has been generated together with the business object. The Constants Interface is an ABAP
interface that is dedicated to a specific business object. The interface includes constants for
each business object's entity like nodes, attributes, actions, and so on. We will be using it later
on when we add actions, determinations, and validations to the business object generated.
Figure 123: Generated Business Object – 2/2
In the scenario discussed here, a Business Object named DS4_I_CUSTOMERWD is generated
with the root node DS4_I_CUSTOMERWD, which in turn has a child node named
172
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
DS4_I_BOOKINGWD. Detailed information about the generated business object can be
obtained via the Business Object Editor. Among other things, there you can find the names of
the ABAP Dictionary objects that have been generated together with the business object. You
must know these when you proceed to use the BOPF API – for example, when implementing
actions, determinations, and validations.
Figure 124: Testing CRUD Operations in the BOPF Test Shell
Starting from your ABAP Development Tools (ADT) client, you can test the generated
Business Object in the integrated BOPF test environment. Using the BOPF test environment,
you can test the core services such as creating, updating, or deleting business object
instances without writing any test code.
To create a new node instance, select the corresponding node in the Node Instances
navigation pane and choose Add Node Instance from the toolbar of the editor pane (marked
on the screenshot).
You can either save the changes you have made or discard them. To store your data, choose
Save from the toolbar. The data is saved in the database table that is assigned to the node of
the business object. To finish a test session, close the test environment.
© Copyright. All rights reserved.
173
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Consumption Layer Definition
Figure 125: Implementing the Data Model for Consumption
It is now time to implement the data model for consumption with the help of consumption
views. A Consumption view allows a Business Object view to be consumed in a different
manner by different OData services. Each Consumption view is defined on top of a Business
Object view and exposes its fields. A Consumption view enhances the data model with
metadata, additional associations, or even with transient fields that fit a given consumption
use case.
The @ObjectModel annotations used in the Business Object views are also used in the
Consumption views to enable the transactional-related aspects of the business data model.
Figure 126: Implementing a Consumption CDS View
Each CDS annotation has a scope. In a Consumption view, only the annotations with the
ELEMENT and ASSOCIATION scope are inherited from the underlying Business Object view.
That’s why you have to maintain the @ObjectModel annotations: compositionRoot,
174
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
createEnabled, deleteEnabled, and updateEnabled in both the Business Object view
and the Consumption view as these annotations have the scope VIEW.
The association @ObjectModel.association.type, which is used in the Business Object
view to define the compositional view hierarchy has the scope ELEMENT. Therefore, the
Consumption view inherits this annotation from the Business Object view, and it does not
have to be specified again in the Consumption view.
The annotation @ObjectModel.transactionalProcessingEnabled: true may only be
defined on root view level, that is in views annotated with
@ObjectModel.compositionRoot: true.
Figure 127: Consumption View Example – Annotated Root Entity
In the example shown in the figure, Consumption View Example – Annotated Root Entity, the
Business Object view DS4_I_CustomerWD is the data source of the Consumption view
DS4_C_Customer_S4. The @ObjectModel.transactionalProcessingDelegated:
true annotation indicates that transaction requests to the Consumption view are delegated
to the underlying Business Object view.
As root entity, the Consumption view DS4_C_Customer_S4 is also annotated with
@ObjectModel.compositionRoot: true. The Consumption view allows create, update,
and delete operations using the corresponding annotations.
In the Business Object view DS4_I_CustomerWD, underlying the Consumption view, the
compositional association _Booking is annotated by using the
@ObjectModel.association.type annotation with the appropriate value:
#TO_COMPOSITION_CHILD. Since the Consumption view inherits this annotation from the
Business Object view, it does not have to be listed again here.
© Copyright. All rights reserved.
175
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Figure 128: Consumption View Example – Annotated Associated Entity
The Consumption view DS4_C_Booking_S4 is linked to the root Consumption view
DS4_C_Customer_S4 via an association. The data source for the Consumption view
DS4_C_Booking_S4 is the Business Object view DS4_I_BookingWD.
Since DS4_C_Booking_S4 is not the root Consumption view, the annotations
@ObjectModel.compositionRoot: true and
@ObjectModel.transactionalProcessingDelegated: true are missing.
The booking Consumption view also allows creating new instances as well as changing and
deleting already existing instances. That is, with this model, it is possible to do CRUD
operations on the root entity and on the child entities as well.
In the Business Object view DS4_I_BookingWD underlying the Consumption view, the
compositional association _Customer is annotated by using the
@ObjectModel.association.type annotation with the appropriate values:
#TO_COMPOSITION_PARENT and #TO_COMPOSITION_ROOT. Since the Consumption view
inherits this annotation from the Business Object view, it does not have to be listed again here.
Using the annotation @ObjectModel.semanticKey[ ] the fields CarrID, ConnID, FlDate,
and BookID are defined as semantic key fields. The semantic key can be used to identify a
booking instance from business perspective using appropriate key field values.
Note:
The technical key is the field BookGuid.
The annotation @VDM.viewType is used to define the view as Consumption view. This
classification is used only for SAP internal structuring and interpretation of the CDS views. It
has no runtime effect.
176
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Figure 129: Running the Resulting List Report Application
If you run the resulting list report application in the Fiori Launchpad, you now have the option
to change the data via the UI: The initial list report provides you with a list of available
customers. To create a new customer instance, click the + icon in the table toolbar, fill in the
fields on the displayed object page, and save the entries.
To update individual fields of a customer record, click the relevant row. In the screen that
appears, choose Edit, change the values, and save your entries.
Using the Delete button in the table toolbar, you can delete the customer selected in the list.
Accordingly, create, update, and delete operations are offered for the bookings belonging to a
customer.
The fields of the customer and the booking Consumption view that have been specified as
semantic key fields (annotation @ObjectModel.semanticKey) are highlighted in the
corresponding lists.
© Copyright. All rights reserved.
177
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
178
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Exercise 13
Enable Create, Update, and Delete Operations
Business Scenario
In this exercise, you first examine the already implemented Business Object views that are
required for the transactional scenario. You then adapt your Consumption views so that the
generated List Report Application supports change operations. Lastly, you test the
application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S3 (Customer Consumption View)
DS4_C_Booking_S3 (Booking Consumption View)
DS4_E_CUSTOMER_S3 (Customer Metadata Extension)
DS4_E_BOOKING_S3 (Booking Metadata Extension)
Solution:
DS4_C_Customer_S4 (Customer Consumption View)
DS4_C_Booking_S4 (Booking Consumption View)
1. Open the CDS view DS4_I_CustomerWD in the development environment. In the exercise
scenario, this view is used as a root Business Object view for the change operations:
Which database table is specified in this view for storing Business Object data changes
that result from transactional behavior?
Which fields of the CDS view are defined as semantic key fields?
© Copyright. All rights reserved.
179
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Which change operations are allowed for this Business Object view?
Which annotation is used to ensure that the associated Business Object view
DS4_I_BookingWD is created as subnode of the generated BOPF Business Object?
2. Open the CDS view DS4_I_BookingWD, which is linked to the above investigated root view
DS4_I_CustomerWD via an association:
Which database table is specified in this view for storing Business Object data changes
that result from transactional behavior?
Which fields of this CDS view are defined as semantic key fields?
Which change operations are allowed for this Business Object view?
Which annotation is used in this view to specify the relationship to the root Business
Object view DS4_I_CustomerWD in the view hierarchy?
3. To adapt the consumption layer of the application, open your CDS view Z##_C_Customer
(## = group number) in the development environment and add the following annotations
on view level:
@ObjectModel.transactionalProcessingDelegated: true
@ObjectModel.compositionRoot: true
@ObjectModel.semanticKey: ['ID']
@ObjectModel.createEnabled: true
@ObjectModel.updateEnabled: true
@ObjectModel.deleteEnabled: true
180
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Note:
Don’t forget to activate your changes.
4. Open your CDS view Z##_C_Booking (## = group number) and add the following
annotations on the view level:
@ObjectModel.semanticKey: [ 'CarrID', 'ConnID', 'FlDate', 'BookID' ]
@ObjectModel.createEnabled: true
@ObjectModel.updateEnabled: true
@ObjectModel.deleteEnabled: true
Note:
Don’t forget to activate your changes.
5. Test your application by starting it from the SAP Web IDE. Check if it is possible to change
and delete existing customers and bookings. The creation of new customers and bookings
should now also be supported.
© Copyright. All rights reserved.
181
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Solution 13
Enable Create, Update, and Delete Operations
Business Scenario
In this exercise, you first examine the already implemented Business Object views that are
required for the transactional scenario. You then adapt your Consumption views so that the
generated List Report Application supports change operations. Lastly, you test the
application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S3 (Customer Consumption View)
DS4_C_Booking_S3 (Booking Consumption View)
DS4_E_CUSTOMER_S3 (Customer Metadata Extension)
DS4_E_BOOKING_S3 (Booking Metadata Extension)
Solution:
DS4_C_Customer_S4 (Customer Consumption View)
DS4_C_Booking_S4 (Booking Consumption View)
1. Open the CDS view DS4_I_CustomerWD in the development environment. In the exercise
scenario, this view is used as a root Business Object view for the change operations:
Which database table is specified in this view for storing Business Object data changes
that result from transactional behavior?
DS4CUSTOM
Which fields of the CDS view are defined as semantic key fields?
ID
Which change operations are allowed for this Business Object view?
create, update, and delete
182
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Which annotation is used to ensure that the associated Business Object view
DS4_I_BookingWD is created as subnode of the generated BOPF Business Object?
@ObjectModel.association.type: [ #TO_COMPOSITION_CHILD ]
2. Open the CDS view DS4_I_BookingWD, which is linked to the above investigated root view
DS4_I_CustomerWD via an association:
Which database table is specified in this view for storing Business Object data changes
that result from transactional behavior?
DS4BOOK
Which fields of this CDS view are defined as semantic key fields?
CarrID, ConnID, FlDate, BookID
Which change operations are allowed for this Business Object view?
create, update, delete
Which annotation is used in this view to specify the relationship to the root Business
Object view DS4_I_CustomerWD in the view hierarchy?
@ObjectModel.association.type:
#TO_COMPOSITION_ROOT ]
[
#TO_COMPOSITION_PARENT,
3. To adapt the consumption layer of the application, open your CDS view Z##_C_Customer
(## = group number) in the development environment and add the following annotations
on view level:
@ObjectModel.transactionalProcessingDelegated: true
@ObjectModel.compositionRoot: true
@ObjectModel.semanticKey: ['ID']
@ObjectModel.createEnabled: true
@ObjectModel.updateEnabled: true
@ObjectModel.deleteEnabled: true
Note:
Don’t forget to activate your changes.
© Copyright. All rights reserved.
183
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
a) In the Consumption view Z##_C_Customer, add the following annotations before the
define view statement:
@ObjectModel: {
transactionalProcessingDelegated: true,
compositionRoot: true,
semanticKey: ['ID'],
}
createEnabled: true,
updateEnabled: true,
deleteEnabled: true
4. Open your CDS view Z##_C_Booking (## = group number) and add the following
annotations on the view level:
@ObjectModel.semanticKey: [ 'CarrID', 'ConnID', 'FlDate', 'BookID' ]
@ObjectModel.createEnabled: true
@ObjectModel.updateEnabled: true
@ObjectModel.deleteEnabled: true
Note:
Don’t forget to activate your changes.
a) In the Consumption view Z##_C_Booking, add the following annotations before the
define view statement:
@ObjectModel: {
semanticKey: [ 'CarrID', 'ConnID', 'FlDate', 'BookID' ],
}
createEnabled: true,
updateEnabled: true,
deleteEnabled: true
5. Test your application by starting it from the SAP Web IDE. Check if it is possible to change
and delete existing customers and bookings. The creation of new customers and bookings
should now also be supported.
a) Start the application as described in the exercise Configure a List Report
Application using CDS Annotations (Unit: User Interface). Verify that the
application works as expected.
184
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Draft Concept
Figure 130: Draft Data
SAP's traditional applications are developed using stateful technologies, such as Floorplan
Manager (FPM) for Web Dynpro ABAP or the classic Dynpro technique. In stateful
applications, data entry and data updates work on a temporary in-memory version of a
business entity, which is only persisted once it is sufficiently complete and consistent.
As an application developer, you might need to enable the end user to store changed data at
any time in the backend and continue at a later point in time or to recover this data, even if the
application client has crashed. This kind of scenario requires a replacement for the temporary
in-memory version of the business entity that is created or edited. This temporary version is
kept on the database and is known as a "draft".
Drafts are saved automatically in the background whenever users add or change information
within a business entity while in edit mode (auto-save).
Figure 131: Draft Support when Using BOPF Business Objects
© Copyright. All rights reserved.
185
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
In addition to the standard Business Objects, it is possible to create a specific shape of
Business Objects that is suited for implementing draft qualities.
Applications with draft support can deal with two BOPF Business Object instances:
●
●
The active instance represents the state of the Business Object instance that is stored in
the active persistence (active table).
The draft instance represents the temporary version (transient state) of a Business Object
instance until it is permanently stored in the persistence layer as an active instance. The
draft data is stored in the draft persistence (draft table) until its transition to active data.
In transactional application scenarios that implement drafts, the user can, in principle, enter
arbitrary data as a draft data. This means that inconsistent data can also be stored in a draft
version. However, the application infrastructure automatically prevents draft instances of
Business Objects with inconsistent data from being activated. Consistency validation ensures
that only consistent draft data can be permanently stored in the persistence layer as an active
instance.
The development of transactional apps with draft capabilities requires an SAP NetWeaver AS
for ABAP 7.51 innovation package SP02 or higher. In addition, the key of the data model must
be a UUID-based key.
Figure 132: Visualization of Draft in SAP Fiori UI
Draft versions of Business Objects data are made visible in SAP Fiori UI to the end user in
order to distinguish them from the application's active data.
A List Report allows users to view the editing status of the objects displayed. The editing
status reflects the state of the object or entry in terms of the processing cycle. For example, it
can give the user information about whether the item can be accessed or its level of
completion. The editing status is calculated from the draft administrative data that is added
when using draft-enabled BOPF Business Objects.
New user inputs or data updates for an existing business entity start with the creation of a
draft entity as a copy of the active entity. Together with the draft entity, an exclusive lock with
a configurable timeout is created on the active entity so that no further changes can be made
to the active data. Once the timeout of the exclusive lock has occurred (if the user has been
inactive for a substantial period of time for example), the lock is removed, and the draft is
186
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
operated in an optimistic lock mode. If the same user continues working on draft data, the
draft state must be resumed, that is, the exclusive lock has to be re-acquired. There is no
guarantee however that the resume will be successful, since changes might have been
applied in the meanwhile.
For the statuses Unsaved Changes and Locked, the name of the user who last changed the
object is visible directly in the line item in the List Report.
Note:
If the user's full name is not available in the master data in the back-end system,
only the technical user name displays. If the technical name is also not available,
the message then indicates that the unsaved changes or the lock on the object
belongs to "another user".
Furthermore, for the statuses Draft, Unsaved Changes, and Locked, a link accesses a dialog
box that allows you to view the user who last changed the object, and the time of the change.
Note:
If the user's full name is not available in the master data in the back-end system,
only the technical user name displays.
An Editing Status filter is added to the filter bar of a List Report for all draft-enabled
applications by default. This filter allows users to search for objects or entries in a specific
state. The drop-down values are as follows:
●
●
●
●
●
All: Shows all results except duplicates. This means that in the case of an edit draft, the
draft shall be shown but not the corresponding active version of the same document.
Own Draft: Shows the drafts that the current user can display or edit.
Locked by Another User: Shows the active versions that are locked by other users. The
current user cannot edit these versions.
Unsaved Changes by Another User: Shows the active versions that were edited by other
users, but are no longer locked. The current user can edit and overwrite these versions,
and the previous draft will be overwritten.
Unchanged: Shows active versions that have no corresponding draft.
Besides the user interface design, the user interaction is adapted to draft qualities: User input
is implicitly stored as a draft version. While the user is modifying a business entity, a saving
indicator shows when a draft is saved implicitly. If the application ends in an uncontrolled way,
the draft will be available when the user re-starts the application. The user needs to choose
the Save button to incorporate the changes into an active business document.
© Copyright. All rights reserved.
187
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Transactional Apps with Draft Capabilities
Figure 133: CDS Annotations Specific to Draft Enablement
In the context of draft enablement, the concept of the business objects is (re)used to
generate a draft entity based on the BOPF business object metadata model.
To define a draft Business Object, a Business Object CDS view must include specific
@ObjectModel annotations in addition to the already known annotations for the
transactional processing. The annotation @ObjectModel.draftEnabled is used in the
Business Object CDS view to enable draft capability of the business data model. The
annotation @ObjectModel.writeDraftPersistence defines the ABAP Dictionary
database table name for the draft data. This annotation requires the additional annotation
@ObjectModel.transactionalProcessingEnabled: true. The draft table serves as a
shadow table for intermediate storage.
The annotation @ObjectModel.draftEnabled has to be double-maintained. It is also used
in the Consumption CDS view to allow a consumer to create draft data for a business object
instance.
188
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Figure 134: Draft Enablement in Business Object View – Annotated Root Entity
In the example shown, you can see how the @ObjectModel CDS annotation is used to add
draft capability to the Business Object CDS view DS4_I_CustomerWD.
As the root entity, the CDS view DS4_I_CustomerWD is annotated with
@ObjectModel.draftEnabled: true. For the draft persistence, the draft table
DS4CUSTOMER_D is referenced in the @ObjectModel.writeDraftPersistence
annotation.
Since both annotation @ObjectModel.writeActivePersistence and annotation
@ObjectModel.writeDraftPersistence are used, both the draft and the active data are
written by the transactional runtime.
Figure 135: Draft Enablement in Business Object View – Annotated Associated Entity
The Business Object CDS view DS4_I_BookingWD is linked to the root Business Object CDS
view DS4_I_CustomerWD via an association.
Using the annotation @ObjectModel.writeDraftPersistence, the CDS view
DS4_I_BookingWD specifies the database table DS4BOOK_D for storing draft data. Since
© Copyright. All rights reserved.
189
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
DS4_I_BookingWD is not the root view, the annotation @ObjectModel.draftEnabled:
true is missing.
When activating the shown Business Object CDS views, the following new development
objects are generated:
●
●
Tables DS4CUSTOMER_D and DS4BOOK_D for the draft data
Business Object DS4_I_CUSTOMERWD with draft capabilities (including all requisite
Dictionary objects and further artifacts that define the new Business Object) that is named
after, and is stored in the same package as the underlying root CDS view
DS4_I_CustomerWD
The transition of draft data to the permanent active data persistence is implemented using a
Business-Object-specific draft class. This generated draft class comes with a default
implementation. As an application developer, you do not therefore need to provide any code
to comply with the draft contract.
Figure 136: Draft Enablement in Consumption View – Annotated Root Entity
Based on the Business Object CDS views, the data model for consumption is implemented
with the help of the Consumption CDS views.
The Business Object view DS4_I_CustomerWD is the data source of the Consumption view
DS4_C_Customer_S5. As root entity, the Consumption view DS4_C_Customer_S5 is
annotated with @ObjectModel.draftEnabled: true to enable the draft capability for the
consumer. With regard to the draft enablement, no further annotations are necessary.
190
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
Figure 137: Draft Enablement in Consumption View – Annotated Associated Entity
The Consumption view DS4_C_Booking_S5 is linked to the root Consumption view
DS4_C_Customer_S5 via an association. The data source for the Consumption view
DS4_C_Booking_S5 is the Business Object view DS4_I_BookingWD. Since DS4_C_Booking_S5
is not the root Consumption view, no annotations other than annotations for the transactional
processing are needed to enable drafts for this entity. That is, no additional annotations are
required.
Figure 138: Running the Resulting List Report Application
If you run the resulting List Report application in the Fiori Launchpad, you can now check the
application's draft support. If you, for example, create a new customer, a draft is
automatically created and updated each time you change a value in the form and then leave
the input field. If you don't save your entries, the draft version of the new customer instance is
displayed in the List Report after navigating back from the Object page. Only when the data is
saved, is the draft data transferred to the active data.
© Copyright. All rights reserved.
191
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
192
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Exercise 14
Provide Draft Capabilities
Business Scenario
In this exercise, you combine the transactional processing implemented in the last exercise
with draft capabilities. To do so, you first examine the already-available Business Object views
and check how the draft enablement was implemented in these views. You then adapt your
Consumption views to enable draft capability for the generated List Report Application.
Lastly, you test the application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S4 (Customer Consumption View)
DS4_C_Booking_S4 (Booking Consumption View)
DS4_E_CUSTOMER_S4 (Customer Metadata Extension)
DS4_E_BOOKING_S4 (Booking Metadata Extension)
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
1. Open the CDS view DS4_I_CustomerWD in the development environment. In the exercise
scenario, this view is used as root Business Object view to define the draft Business
Object:
Which database table is specified in this view for storing draft data?
2. Now open the CDS view DS4_I_BookingWD which is linked to the root view
DS4_I_CustomerWD (investigated in step 1) via an association.
Which database table is specified in this view for storing draft data?
© Copyright. All rights reserved.
193
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
3. To enable the draft capability for the consumer, open your CDS view Z##_C_Customer
(## = group number) in the development environment and add the following annotation
on view level:
@ObjectModel.draftEnabled: true
Note:
No additional annotations are required for the booking Consumption view.
Note:
Don’t forget to activate your changes.
4. Test your application’s draft support by starting it from the SAP Web IDE.
Note:
If you, for example, create a new customer, a draft is automatically created
and updated each time you change a value in the form and then leave the
corresponding input field. If you don‘t save your entries, the draft version of
the new customer instance is displayed in the List Report after navigating back
from the Object page. Only when the data is saved is the draft data transferred
to the active data.
194
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Solution 14
Provide Draft Capabilities
Business Scenario
In this exercise, you combine the transactional processing implemented in the last exercise
with draft capabilities. To do so, you first examine the already-available Business Object views
and check how the draft enablement was implemented in these views. You then adapt your
Consumption views to enable draft capability for the generated List Report Application.
Lastly, you test the application in the browser.
Note:
Login information will be provided by your trainer.
Template:
DS4_C_Customer_S4 (Customer Consumption View)
DS4_C_Booking_S4 (Booking Consumption View)
DS4_E_CUSTOMER_S4 (Customer Metadata Extension)
DS4_E_BOOKING_S4 (Booking Metadata Extension)
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
1. Open the CDS view DS4_I_CustomerWD in the development environment. In the exercise
scenario, this view is used as root Business Object view to define the draft Business
Object:
Which database table is specified in this view for storing draft data?
DS4CUSTOMER_D
2. Now open the CDS view DS4_I_BookingWD which is linked to the root view
DS4_I_CustomerWD (investigated in step 1) via an association.
Which database table is specified in this view for storing draft data?
DS4BOOK_D
3. To enable the draft capability for the consumer, open your CDS view Z##_C_Customer
(## = group number) in the development environment and add the following annotation
on view level:
@ObjectModel.draftEnabled: true
© Copyright. All rights reserved.
195
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Note:
No additional annotations are required for the booking Consumption view.
Note:
Don’t forget to activate your changes.
a) In the Consumption view Z##_C_Customer, add the following annotation before the
define view statement:
@ObjectModel.draftEnabled: true
4. Test your application’s draft support by starting it from the SAP Web IDE.
Note:
If you, for example, create a new customer, a draft is automatically created
and updated each time you change a value in the form and then leave the
corresponding input field. If you don‘t save your entries, the draft version of
the new customer instance is displayed in the List Report after navigating back
from the Object page. Only when the data is saved is the draft data transferred
to the active data.
a) Start the application as described in the exercise Configure a List Report
Application using CDS Annotations (Unit: User Interface). Verify that the
application works as expected.
196
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Enabling Change Operations
LESSON SUMMARY
You should now be able to:
●
Provide Create, Update, and Delete Functionalities
●
Enable Draft Capabilities
© Copyright. All rights reserved.
197
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Lesson 2
Implementing Additional Functionality
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Create Determinations, Validations, and Actions
●
Add Value Help
Determinations for CDS-Based Business Objects
Figure 139: Providing Additional Business Logic with BOPF Determinations
As discussed, the BOPF framework provides the basic transactional operations (Create,
Update, Delete). Depending on the scenario, however, it may be necessary to provide
additional application-specific business logic. This additional logic can be implemented via
determinations, validations, and actions.
In the ABAP application infrastructure, a determination is an entity of a business object node
that is used to provide functions that are automatically executed as soon as a certain trigger
condition is fulfilled. As a developer, you can implement your own custom determinations
primarily to compute data that is derived from the values of other attributes. The determined
attributes and the determining attributes of the trigger condition either belong to the same
node or to different nodes.
For example, the following functionality is required for the customer bookings scenario: To
provide data consistency, it must be ensured that the application automatically calculates an
ID for the customer to be created. This requirement can be implemented using a BOPF
198
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
determination, which allows calculation of a new customer ID at the level of the generated
Business Object node.
To create a determination, open the Business Object editor for the desired node (in the
example shown here: DS4_I_CUSTOMERWD) and choose the Determinations tab. Afterward,
choose the New button to launch the New Determination wizard. Here you have to specify the
name of the determination, a short description that describes the purpose of the
determination, the implementation class, and the determination's category.
Figure 140: Determination Configuration
A determination is triggered internally on the basis of changes made to the node instance of a
Business Object.
For each determination, it is therefore necessary to specify both the points in time and the
change operations that form the trigger condition. Change operations ("Triggers") can include
creating, updating, deleting, or loading node instances. A determination time ("Category")
specifies the time within the transaction cycle at which the trigger condition is evaluated.
In the shown example, the category React after modification is selected to process the
determination immediately after creating, updating, or deleting a customer node instance.
However, we do not want the new customer ID to be retrieved after every modification is
performed, but only if customer instances are going to be created. Therefore, it is configured
that only a Create operation triggers this determination.
© Copyright. All rights reserved.
199
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Note:
With the configuration shown here, the determination is only processed after a
new customer node instance has been created. In a non-draft version of the
example scenario, this only happens when the user saves their entries using the
Save button on the Object page. That is, if the user creates a new customer by
clicking the + icon in the table toolbar of the List Report, the customer ID is not yet
displayed on the Object page because the node instance has not yet been created.
Only upon saving is the node instance generated and the ID created. In the draftenabled version of the scenario this behavior changes. Here, the customer node
instance is already created when the + icon is clicked in the table toolbar of the
List Report. Therefore, the determination is already processed at this time and the
customer ID is displayed on the Object page.
Figure 141: Implementing a Custom Determination Class – Example
A determination in BOPF is defined as a global ABAP class that implements the determination
interface /BOBF/IF_FRW_DETERMINATION. This interface defines the method EXECUTE
which is used to implement the main determination logic. It provides modification access to
the node's instance data and is called at runtime depending on the determination
configuration (as shown). The method has (among other things) the following interface
parameters:
●
io_read: Reference that provides read access to the data of the business object instances
●
it_key: Set of node instance keys that are to be processed by the determination
●
io_modify: Reference that provides write access to the data of the business object
instances
The example implementation shown also uses constants from the Business Object's
Constants Interface as well as the combined table type DS4_T_ICUSTOMERWD, which is an
ABAP Dictionary object that was generated for the Business Object.
200
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Validations for CDS-Based Business Objects
Figure 142: Extending an Application with Value Validation
Validations are called at predefined points within the Business Object transaction cycle to
ensure that Business Object nodes are persisted in a consistent state. These points can be
configured for validations for both active and draft business objects. Each validation
configuration contains a trigger condition that is checked by BOPF runtime at several times
during the transaction. If the trigger condition is fulfilled, the consistency validation is
executed.
If there are inconsistent node instances, a consistency validation behaves as follows:
●
●
●
The validation sends messages to the consumer – for both active and draft instances
The validation sends messages to the consumer and prevents the transaction from being
saved until the inconsistency is corrected – for active instances
The validation sends messages to the consumer and changes the draft consistency status
– for draft instances.
Validations never modify any node instance data.
For example, the following validation is required for the customer bookings scenario: It must
be checked if the input field for the customer name is filled. The aim of the validation is to
achieve the following: After the end user presses the ENTER key or clicks into another input
field, the system recognizes an empty customer name field as faulty and marks the field
accordingly in the Fiori UI. In addition, a corresponding error message is displayed to the end
user. The consistency validation prevents the inconsistent draft data from being saved as an
active data version. This ensures that only consistent customer instances can be saved.
To create a validation, open the Business Object editor for the desired node (in the example
shown here: DS4_I_CUSTOMERWD) and choose the Validations tab. Afterward, choose New
to launch the New Validation wizard. Here you have to specify the name of the validation, a
short description that describes the purpose of the validation, the Implementation Class, and
the Validation Category Consistency Check.
© Copyright. All rights reserved.
201
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Figure 143: Validation Configuration
As a developer, you have the option of configuring the trigger condition for a validation. The
trigger condition describes the node (called request node) and the kind of change (create/
update/delete) that should automatically trigger the validation execution by the BOPF
runtime (implicit validation).
For each request node, independently, the triggers are configured to decide on which kind of
change the validation will be automatically executed. For validations, these change operations
are:
●
Create: validation after a node instance is created
●
Update: validation after a node instance is updated
●
Delete: validation after a node instance is deleted
In the example shown, the validation FILLED_NAME is automatically invoked by the BOPF
infrastructure if an instance of the customer node DS4_I_CUSTOMERWD is created or
updated.
The execution of a validation on draft instances is done immediately after the modification. In
the case of a stateless session, the execution of a validation on active instances is delayed
when the transaction is saved (instead of being executed immediately after modification).
In addition to implicit consistency validations, an application may also explicitly run
validations (explicit validation).
202
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Figure 144: Implementing a Custom Validation Class – Example
A validation in BOPF is defined as a global ABAP class that implements the validation
interface /BOBF/IF_FRW_VALIDATION. This interface defines the EXECUTE method which is
used to implement the main validation logic. The EXECUTE method does not provide any
modifying access to the node's instance data but returns the messages and the keys of failed
node instances. It is called at runtime by the BOPF framework depending on the validation
configuration (as shown). The method has (among other things) the following interface
parameters:
●
io_read: Provides read access to the data of the business object instances
●
it_key: Set of node instance keys that should be processed by the validation
●
●
eo_message: Message object used for returning information, or warning or error messages
related to the validation
et_failed _key: Set of node instance keys (subset of it_key) that do not match the validation
criteria
The example implementation shown also uses constants from the Business Object's
Constants Interface as well as the combined table type DS4_T_ICUSTOMERWD, which is an
ABAP Dictionary object that was generated for the Business Object.
The example checks for each customer instance, if the customer name field is filled. If the
field is empty, the corresponding node instance is appended to the parameter et_failed_key.
On node instances that are contained in the parameter et_failed_key, the save action will not
be executed.
To specify the message related to the validation, the method eo_message->add_cm() is
called. This method is passed an instance of the application-specific message-related
exception class CM_CUSTOMER (which inherits from /BOBF/CM_FRW). The constructor of
this class has an interface parameter lifetime which is used to specify the message as
transition message or as state message. Messages with a lifetime value of TRANSITION are
just returned to the consumer; they do not appear again in subsequent round-trips (fire and
forget semantics). Messages with a lifetime value of STATE (valid for draft instances only) are
© Copyright. All rights reserved.
203
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
returned to the consumer and also persisted on the database (durable messages). They are
available in subsequent round-trips (including read operations) without re-executing the
business logic that created the message until the message is invalidated. The constructor's
interface parameter MS_ORIGIN_LOCATION indicates which field is responsible for triggering
the message. It points out the business object, node, instance key, and attribute referred by
the message. This specifies that the referred attribute has a red border on the Fiori UI.
Actions for CDS-Based Business Objects
Figure 145: Extending an Application with Actions
An action is an entity assigned to an individual node of a Business Object that is used to
implement a service (operation or behavior) of the Business Object.
Quick actions are "one-click" actions with optional parameters. They are used for performing
an action on each individual record without the need for the end user to switch to edit mode.
For quick actions, no state needs to be kept on the client or back-end server. A quick action
triggers the business logic in the back end that is immediately executed. In a UI screen, the
detail page (Object page) might show the data as read-only and also offer quick actions
without the need to switch to edit mode.
You have the option to provide quick actions also in non-transactional areas, that is, in purely
list-reporting development scenarios.
Action implementation and action control requires business logic that is implemented on the
basis of the BOPF API. Therefore, quick actions are implemented as standard BOPF actions
that are assigned to the related business object node. At runtime, a (quick) action can modify
a node instance of the assigned business object or node instance of other associated
business objects.
Actions are called actively by one of the following:
●
A service consumer, for example by a user interface
●
Another business object
●
Internally, for example by another action or by a determination
In the sample scenario, the quick action CANCEL__BOOKING is implemented. It is used to
change the status of a flight booking to canceled.
To create an action, open the Business Object editor for the desired node (in the example
shown here: DS4_I_BOOKINGWD) and select the Actions tab. Choose New to launch the New
Action wizard. Here you have to specify the action's name, a short description, and the
204
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
implementation class, as well as the instance multiplicity and the parameter structure as
needed (see the figure, Action Configuration).
Figure 146: Action Configuration
The user can perform an action on one or more node instances, or on no instance at all (static
action). For this purpose, you can assign the Instance Multiplicity to an action. The action's
multiplicity defines how many node instances the action can operate on during one action call.
You can choose the following cardinality types for actions:
●
●
●
Multiple Node Instances – Action operates on one or more node instances. This option
enables the end user to select multiple instances (for example, multiple bookings) of a
business object and trigger an action. The action is then executed sequentially for the
selected items.
Single Node Instance – Action operates on exactly one single node instance. When using
this option, you do not want to allow the end user to execute the action on a set of multiple
node instances.
Static Action (No Node Instances) – The action does not operate on any node instances
and defines a static action. For example, creation procedures are defined as static actions.
In addition, you can configure each action with an exporting type. Using the exporting type
parameter, you can specify whether the action is able to return data to the caller during the
action execution and if so what kind of data. There are three options available:
●
●
●
None – This default option indicates that the action does not return any data to the
consumer, even if a related action can cause changes to the business object.
Type – This option allows the action to return a data table defined by the row type entered
in the Exporting Parameter Structure field and the corresponding table type entered in the
Exporting Parameter Table Type field.
Node – This option allows the action to return instances of a (foreign) node that is defined
by the following two fields:
© Copyright. All rights reserved.
205
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
-
Exporting Parameter BO – name of the Business Object
-
Exporting Parameter Node – name of the Business Object node
Figure 147: Implementing a Custom Action Class – Example
Each action in BOPF must implement the execute method of the action interface /BOBF/
IF_FRW_ACTION. The execution of this mandatory method results in the possible
modification of node data, both of the action's Business Object and nodes that belong to other
Business Objects.
Similar to the create, update, and delete operations of a Business Object, actions can also be
executed in the BOPF Test Shell to check whether they run correctly.
The shown sample implementation is used to carry out the CANCEL_BOOKING action of the
generated business object DS4_I_CUSTOMERWD. A consumer can use this action to mark
the status of a flight booking as canceled.
As in most cases, the first step within the execute method is to retrieve relevant data of those
node instances that are going to be changed. For reading Business Object data, the internal
table lt_bookings is used, which is typed with the combined table type
ds4_t_ibookingwd (ABAP Dictionary object that was generated for the Business Object).
The internal table contains the keys and data of all node instances on which the action should
be applied. This enables you to access the node attribute cancelled and set its value to 'X',
which indicates that the corresponding booking is canceled.
For each relevant node instance, the update method of the access object io_modify is
called. Here the internal table it_changed_fields is populated with the name of the
attribute that is going to be updated. Like all other entity names, the attribute names, too, are
available through the Business Object's Constants Interface. As a result of the method call,
the node instance is updated in the database.
If the flight date is in the past, no update will be performed. Instead, a corresponding error
message is generated and the corresponding node instance is appended to the parameter
et_failed_key.
206
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Figure 148: Exposing Actions to the Consumer
Actions are often directly related to Business Object instances that you can see in a table on
the UI. End users can select line items (that represent Business Object instances) and
execute certain actions on the selected items.
The annotation UI.lineItem.type: #FOR_ACTION is used to expose actions to the client.
This annotation has to be assigned to some arbitrary element. It is thereby irrelevant if the
annotation refers to the element to which it is assigned. The annotation defines an appspecific action for which a button is rendered with the text of UI.lineItem.label.
UI.lineItem.dataAction references the technical name of the BOPF action. The string
pattern for its value is BOPF:<technical name of action in BOPF>.
In the example shown, a button labeled Cancel Booking is added to the UI to trigger the BOPF
action CANCEL_BOOKING. For this purpose, the corresponding UI annotations have been
added to the Metadata Extension.
© Copyright. All rights reserved.
207
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
208
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Exercise 15
Expose an Action to the Consumer
Business Scenario
In this exercise, you examine the BOPF Business Object used in the exercise scenario with
regard to the custom actions, determinations, and validations implemented there. Using a UI
annotation, you expose the available action CANCEL_BOOKING to the List Report Application.
Lastly, you test the application in the browser.
Note:
Login information will be provided by your trainer.
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
DS4_E_CUSTOMER_S5 (Customer Metadata Extension)
DS4_E_BOOKING_S5 (Booking Metadata Extension)
1. Open the BOPF Business Object DS4_I_CUSTOMERWD used in the exercise scenario in
the development environment and navigate to the Overview tab of the determination
CREATE_CUSTOMER_ID that was implemented for the node DS4_I_CUSTOMERWD of this
Business Object.
What is the name of the associated implementation class?
Which operation is configured to trigger this determination?
2. Open the Overview tab of the validation FILLED_NAME, which has been implemented for
the node DS4_I_CUSTOMERWD.
© Copyright. All rights reserved.
209
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
What is the name of the associated implementation class?
Which operations are configured to trigger this validation?
3. Open the Overview tab of the action CANCEL_BOOKING, which has been implemented for
the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
4. Open the Overview tab of the determination CREATE_BOOKING_ID, which has been
implemented for the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
Which operation is configured to trigger this determination?
5. Open the Overview tab of the determination SET_ORDER_DATE, which has been
implemented for the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
Which operation is configured to trigger this determination?
6. To expose the action CANCEL_BOOKING of the Business Object to the List Report
Application, open your Metadata Extension Z##_E_BOOKING (## = group number) in the
210
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
development environment and include the following annotation in the @UI.lineItem
array for the Cancelled field:
{ type: #FOR_ACTION, dataAction: 'BOPF:CANCEL_BOOKING',
'Cancel Booking' }
label:
Note:
Don’t forget to activate your changes.
7. Test your application by starting it from the SAP Web IDE.
In the toolbar to the table with the bookings a button should be displayed with the label
Cancel Booking. Once a booking has been selected in the table, the button should be
active so that the corresponding booking can be canceled. The successful cancelation
should be indicated by an X in the column Cancelation flag.
Note:
Only bookings with a flight date in the future can be canceled. If an attempt is
made to cancel a booking on a flight in the past, an error message is generated
in the associated action implementation. However, this error message is not
displayed when testing the application in the SAP Web IDE. The message is
displayed to the user as a dialog box only after the application has been
integrated as a tile in the SAP Fiori Launchpad (see next unit).
Also check if the determinations and the validation implemented on the Business Object
are processed: When creating a new customer, the customer number should be assigned
automatically (determination CREATE_CUSTOMER_ID). Likewise, the booking number
and the order date should be automatically generated when creating a new booking
(determinations CREATE_BOOKING_ID and SET_ORDER_DATE). In addition, the input
field for the customer name should be validated as a mandatory field and an error
message should be issued if the user does not enter a name (validation FILLED_NAME).
© Copyright. All rights reserved.
211
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Solution 15
Expose an Action to the Consumer
Business Scenario
In this exercise, you examine the BOPF Business Object used in the exercise scenario with
regard to the custom actions, determinations, and validations implemented there. Using a UI
annotation, you expose the available action CANCEL_BOOKING to the List Report Application.
Lastly, you test the application in the browser.
Note:
Login information will be provided by your trainer.
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
DS4_E_CUSTOMER_S5 (Customer Metadata Extension)
DS4_E_BOOKING_S5 (Booking Metadata Extension)
1. Open the BOPF Business Object DS4_I_CUSTOMERWD used in the exercise scenario in
the development environment and navigate to the Overview tab of the determination
CREATE_CUSTOMER_ID that was implemented for the node DS4_I_CUSTOMERWD of this
Business Object.
What is the name of the associated implementation class?
CL_DS4_D_CREATE_CUSTOMER_ID
Which operation is configured to trigger this determination?
Create
a) Use the keyboard shortcut Ctrl + Shift + A to start the Open ABAP Development Object
wizard.
b) Make sure that the project that corresponds to the backend server is selected in the
Project field. Enter DS4_I_CUSTOMERWD in the search field and then choose the
matching item DS4_I_CUSTOMERWD (BOPF Business Object).
c) To open the Overview tab of the determination CREATE_CUSTOMER_ID, select the
determination in the displayed Outline view.
212
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
2. Open the Overview tab of the validation FILLED_NAME, which has been implemented for
the node DS4_I_CUSTOMERWD.
What is the name of the associated implementation class?
CL_DS4_V_FILLED_NAME
Which operations are configured to trigger this validation?
Create and Update
a) To open the Overview tab of the validation FILLED_NAMED, select the validation in the
Outline view.
3. Open the Overview tab of the action CANCEL_BOOKING, which has been implemented for
the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
CL_DS4_A_CANCEL_BOOKING
a) To open the Overview tab of the action CANCEL_BOOKING, select the action in the
Outline view under the node DS4_I_BOOKINGWD.
4. Open the Overview tab of the determination CREATE_BOOKING_ID, which has been
implemented for the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
CL_DS4_D_CREATE_BOOKING_ID
Which operation is configured to trigger this determination?
Create
a) To open the Overview tab of the determination CREATE_BOOKING_ID, select the
determination in the Outline view under the node DS4_I_BOOKINGWD.
5. Open the Overview tab of the determination SET_ORDER_DATE, which has been
implemented for the node DS4_I_BOOKINGWD.
What is the name of the associated implementation class?
CL_DS4_D_SET_ORDER_DATE
© Copyright. All rights reserved.
213
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Which operation is configured to trigger this determination?
Create
a) To open the Overview tab of the determination SET_ORDER_DATE, select the
determination in the Outline view under the node DS4_I_BOOKINGWD.
6. To expose the action CANCEL_BOOKING of the Business Object to the List Report
Application, open your Metadata Extension Z##_E_BOOKING (## = group number) in the
development environment and include the following annotation in the @UI.lineItem
array for the Cancelled field:
{ type: #FOR_ACTION, dataAction: 'BOPF:CANCEL_BOOKING',
'Cancel Booking' }
label:
Note:
Don’t forget to activate your changes.
a) Make sure that the field Cancelled is annotated as follows in the Metadata Extension
Z##_E_BOOKING:
@UI: {
lineItem:
[
{
{
position: 100, importance: #MEDIUM },
type: #FOR_ACTION,
dataAction: 'BOPF:CANCEL_BOOKING',
label: 'Cancel Booking' }
],
identification: [ { position: 100, importance: #MEDIUM } ]
}
Cancelled;
7. Test your application by starting it from the SAP Web IDE.
In the toolbar to the table with the bookings a button should be displayed with the label
Cancel Booking. Once a booking has been selected in the table, the button should be
active so that the corresponding booking can be canceled. The successful cancelation
should be indicated by an X in the column Cancelation flag.
Note:
Only bookings with a flight date in the future can be canceled. If an attempt is
made to cancel a booking on a flight in the past, an error message is generated
in the associated action implementation. However, this error message is not
displayed when testing the application in the SAP Web IDE. The message is
displayed to the user as a dialog box only after the application has been
integrated as a tile in the SAP Fiori Launchpad (see next unit).
Also check if the determinations and the validation implemented on the Business Object
are processed: When creating a new customer, the customer number should be assigned
automatically (determination CREATE_CUSTOMER_ID). Likewise, the booking number
and the order date should be automatically generated when creating a new booking
(determinations CREATE_BOOKING_ID and SET_ORDER_DATE). In addition, the input
field for the customer name should be validated as a mandatory field and an error
message should be issued if the user does not enter a name (validation FILLED_NAME).
214
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
a) Start the application as described in the exercise Configure a List Report Application
using CDS Annotations (Unit: User Interface). Verify that the application works as
expected.
© Copyright. All rights reserved.
215
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Value Helps
Figure 149: Value Help – Overview
To provide a value help, you first need a CDS view that contains the values for the value help.
Then you define the association in the consuming CDS view. Finally, you must annotate the
value help to the relevant field in the consuming view.
The foreign key associations provide important information when modelling business data in
the CDS programming approach. The value help results from foreign key associations as a
kind of side-effect – without further action. As a consequence, the value help is available
automatically in numerous applications through the propagation of corresponding
annotations.
The modeled value help views, however, are very specific to the respective applications.
Compared to a foreign key-based value help view, a modeled view allows you to define
additional display parameters, assign your own access control, and even define specific
WHERE conditions.
216
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Figure 150: Value Help Based on Foreign Key Association – UI Behavior
A foreign key association establishes a relationship to a view, which represents a value list/
check table of an accordingly annotated field. Fiori provides a proper value help for the
corresponding field.
The foreign key association is not comparable to a real database foreign key. It's used for
value helps and not to ensure integrity during write operations. To ensure data integrity BOPF
validations should be used. The CDS view that represents the value list/check table may also
rely on ABAP Dictionary Domains and their value range.
Depending on the option that you have implemented for the value help, the SAP Fiori UI
provides the end user with a specific UI behavior. Value help based on foreign key association
is offered as type-ahead help within the input field and additionally as a separate dialog.
With the foreign key association approach, the display-relevant properties are defined by the
key fields of the associated value help provider CDS view (which usually represents an ID). In
addition, it is possible to display language-dependent texts in the value help. To it, a text
associations between the actual value help provider CDS view and an additional text CDS view
has to be defined, via which the language-dependent texts are made available. If a text
association is defined, the system generates an additional field, which contains the related
language-dependent text information in the value help.
Figure 151: Value Help Based on Foreign Key Association – Implementation
© Copyright. All rights reserved.
217
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
In order to provide an automated value help support, foreign key associations can be used. A
foreign key association establishes a relationship to a CDS view, which represents a value list/
check table. The association's target CDS view serves as a value help provider and is used to
retrieve the values of the value help. The maximum target cardinality of the association has to
be 1. Within the ON-condition of a foreign key association, all key fields of the target CDS view
must be valuated with the EQ operator. Non-key fields of the target CDS view must not be
used in the ON-condition.
To assign the value help to the relevant field of the source CDS view, the annotation
@ObjectModel.foreignKey.association: '<_AssocToValueHelpProvider>' is
used on the field level. The annotation assigns the association
'_AssocToValueHelpProvider' to the given source CDS view field.
Figure 152: Value Help Based on Foreign Key Association – Example (1/2)
In the example shown, the CDS view DS4_I_TravelAgency is used as value help provider
CDS view. It represents a value list for travel agency numbers. The CDS view DS4_I_Booking
defines an association named _TravelAgency to this value help provider CDS view and
exposes it in the select list.
The CDS view DS4_I_BookingWD, which is based on DS4_I_Booking defines the foreign key
association for the field TravelAgency using the annotation
@ObjectModel.foreignKey.association. DS4_I_BookingWD exposes the association in
the select list as well.
218
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Figure 153: Value Help Based on Foreign Key Association – Example (2/2)
Finally, the CDS view DS4_C_Booking_S5, which exposes the Interface view
DS4_I_BookingWD for consumption, also includes the association _TravelAgency in its
select list. Taken together, this causes a value help for the agency number input field to be
generated.
The foreign key-based value help can be redefined by defining a modeled value help CDS view.
The field that should be equipped with the specific value help has to be annotated with
@Consumption.valueHelp.
Figure 154: Value Help Based on Modeled Value Help View – UI Behavior
When using the modeled value help approach, enhanced modeling options are available to
you, in contrast to the foreign key-based value help approach: you can specify a dedicated
DCL, and even define specific WHERE conditions. Furthermore, all the fields that are defined
for the modeled value help view are displayed in the hit list of the value help dialog screen.
If a dedicated value help view is defined, its name should have the suffix ...ValueHelp (or VH,
if an abbreviation is needed).
© Copyright. All rights reserved.
219
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
Figure 155: Value Help Based on Modeled Value Help View – Example
In the sample code, the CDS view DS4_I_FlightVH is used as a modeled value help view. It
selects dedicated fields for the value help from the underlying CDS view DS4_I_Flight.
The source view DS4_C_Booking_S5 in the listing defines an association _FlightVH with the
value help view as target view and exposes it via the select list.
Using the @Consumption.valueHelp annotation, the association _FlightVH defines a
value help for the annotated field CarrID.
220
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Exercise 16
Provide Value Helps
Business Scenario
In this exercise, you enable value helps in your List Report Application to help the end user
find the correct input values.
Note:
Login information will be provided by your trainer.
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
DS4_E_CUSTOMER_S5 (Customer Metadata Extension)
DS4_E_BOOKING_S5 (Booking Metadata Extension)
1. Your CDS view Z##_ C_Customer (## = group number) exposes the Interface view
DS4_I_CustomerWD for consumption. This view is based on the CDS view
DS4_I_Customer, which in turn defines associations to other views.
In the view DS4_I_CustomerWD, associations from the underlying view DS4_I_Customer
are marked as foreign key associations for individual fields using the annotation
@ObjectModel.foreignKey.association.
Check which fields in the view DS4_I_CustomerWD are annotated accordingly, what the
name of the association used is, and which target view is behind it. To do this, fill in the
following table:
Annotated foreign
Name of the used
key field in view
association
DS4_I_CustomerWD
Target view of the
association
1.)
2.)
2. To provide value helps for the two fields in the table in step 1, in the List Report
Application, expose the corresponding association in your Consumption view
Z##_C_Customer (## = group number) by adding it to the select list.
Note:
Don’t forget to activate your changes.
© Copyright. All rights reserved.
221
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
3. Accordingly, your CDS view Z##_ C_Booking (## = group number) exposes the Interface
view DS4_I_BookingWD for consumption. This view is based on the CDS view
DS4_I_Booking, which again defines associations to other views.
Also in the view DS4_I_BookingWD, associations from the underlying view DS4_I_Booking
are marked as foreign key associations for individual fields using the annotation
@ObjectModel.foreignKey.association.
Check here, too, which fields in the view DS4_I_BookingWD are annotated accordingly,
what the name of the association used is, and which target view is behind it. To do this, fill
in the following table:
Annotated foreign
key field in view
DS4_I_BookingWD
Name of the used
association
Target view of the
association
1.)
2.)
3.)
4.)
5.)
4. To provide value helps for the five fields in the table in step 3, in the List Report
Application, expose the corresponding associations in your Consumption view
Z##_C_Booking (## = group number) by adding them to the select list.
5. The foreign key-based value help for the field airline ID shall now be overridden by a
modeled value help view. The already predefined view DS4_I_FlightVH is used for this. It
selects dedicated fields for the value help from the underlying CDS view DS4_I_Flight.
Add an association from your Consumption view Z##_C_Booking to the value help
provider CDS view DS4_I_FlightVH defined as follows:
association [1] to DS4_I_FlightVH as _FlightVH
on
$projection.CarrID = _FlightVH.AirlineID
and
$projection.ConnID = _FlightVH.ConnectionNumber
and
$projection.FlDate = _FlightVH.FlightDate
Include this association in the select list of view Z##_C_Booking and add the annotation
@Consumption.valueHelp: '_FlightVH ' to the field CarrID of view
Z##_C_Booking.
6. Finally, use the predefined view DS4_I_FlightClassVH as appropriate to provide a value
help for the field Class of the Consumption view Z##_C_Booking.
To it, add an association from your Consumption view Z##_C_Booking to the value help
provider CDS view DS4_I_FlightClassVH defined as follows:
association [1] to DS4_I_FlightClassVH as _FlightClassVH
on $projection.Class = _FlightClassVH.FlightClass
Include this association in the select list of view Z##_C_Booking and add the annotation
@Consumption.valueHelp: '_FlightClassVH' to the field Class of view
Z##_C_Booking.
222
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
Note:
Don’t forget to activate your changes.
7. Test your application by starting it from the SAP Web IDE.
Check that the corresponding value helps are available for the following fields:
City (customer)
Country (customer)
Airline ID (booking)
Connection number (booking)
Flight Date (booking)
Currency (booking)
Travel agency (booking)
Flight class (booking)
© Copyright. All rights reserved.
223
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5
Solution 16
Provide Value Helps
Business Scenario
In this exercise, you enable value helps in your List Report Application to help the end user
find the correct input values.
Note:
Login information will be provided by your trainer.
Solution:
DS4_C_Customer_S5 (Customer Consumption View)
DS4_C_Booking_S5 (Booking Consumption View)
DS4_E_CUSTOMER_S5 (Customer Metadata Extension)
DS4_E_BOOKING_S5 (Booking Metadata Extension)
1. Your CDS view Z##_ C_Customer (## = group number) exposes the Interface view
DS4_I_CustomerWD for consumption. This view is based on the CDS view
DS4_I_Customer, which in turn defines associations to other views.
In the view DS4_I_CustomerWD, associations from the underlying view DS4_I_Customer
are marked as foreign key associations for individual fields using the annotation
@ObjectModel.foreignKey.association.
Check which fields in the view DS4_I_CustomerWD are annotated accordingly, what the
name of the association used is, and which target view is behind it. To do this, fill in the
following table:
Annotated foreign
Name of the used
key field in view
association
DS4_I_CustomerWD
Target view of the
association
1.)
2.)
a)
224
Annotated foreign
key field in view
DS4_I_CustomerWD
Name of the used
association
Target view of the
association
1.)
City
_City
DS4_I_City
2.)
Country
_City
DS4_I_City
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
2. To provide value helps for the two fields in the table in step 1, in the List Report
Application, expose the corresponding association in your Consumption view
Z##_C_Customer (## = group number) by adding it to the select list.
Note:
Don’t forget to activate your changes.
a) Include the association _City in the select list of view Z##_C_Customer.
3. Accordingly, your CDS view Z##_ C_Booking (## = group number) exposes the Interface
view DS4_I_BookingWD for consumption. This view is based on the CDS view
DS4_I_Booking, which again defines associations to other views.
Also in the view DS4_I_BookingWD, associations from the underlying view DS4_I_Booking
are marked as foreign key associations for individual fields using the annotation
@ObjectModel.foreignKey.association.
Check here, too, which fields in the view DS4_I_BookingWD are annotated accordingly,
what the name of the association used is, and which target view is behind it. To do this, fill
in the following table:
Annotated foreign
key field in view
DS4_I_BookingWD
Name of the used
association
Target view of the
association
1.)
2.)
3.)
4.)
5.)
a)
Annotated foreign
key field in view
DS4_I_BookingWD
Name of the used
association
Target view of the
association
1.)
AirlineID
_Airline
DS4_I_Airline
2.)
ConnectionNumber
_Connection
DS4_I_Connection
3.)
FlightDate
_Flight
DS4_I_Flight
4.)
ForeignCurrency _ForeignCurr
I_Currency
5.)
TravelAgency
DS4_I_TravelAgency
_TravelAgency
4. To provide value helps for the five fields in the table in step 3, in the List Report
Application, expose the corresponding associations in your Consumption view
Z##_C_Booking (## = group number) by adding them to the select list.
a) Include the associations _Airline, _Connection, _Flight, _ForeignCurr, and
_TravelAgency in the select list of view Z##_C_Booking.
© Copyright. All rights reserved.
225
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
5. The foreign key-based value help for the field airline ID shall now be overridden by a
modeled value help view. The already predefined view DS4_I_FlightVH is used for this. It
selects dedicated fields for the value help from the underlying CDS view DS4_I_Flight.
Add an association from your Consumption view Z##_C_Booking to the value help
provider CDS view DS4_I_FlightVH defined as follows:
association [1] to DS4_I_FlightVH as _FlightVH
on
$projection.CarrID = _FlightVH.AirlineID
and
$projection.ConnID = _FlightVH.ConnectionNumber
and
$projection.FlDate = _FlightVH.FlightDate
Include this association in the select list of view Z##_C_Booking and add the annotation
@Consumption.valueHelp: '_FlightVH ' to the field CarrID of view
Z##_C_Booking.
a) Make sure that your implementation looks similar to the following:
define view ...
as select from DS4_I_BookingWD
/* Association to flight value help provider */
association [1] to DS4_I_FlightVH as _FlightVH
on
$projection.CarrID = _FlightVH.AirlineID
and
$projection.ConnID = _FlightVH.ConnectionNumber
and
$projection.FlDate = _FlightVH.FlightDate
{
//Fields
@Consumption.valueHelp: '_FlightVH'
CarrID,
// Associations
_FlightVH
}
6. Finally, use the predefined view DS4_I_FlightClassVH as appropriate to provide a value
help for the field Class of the Consumption view Z##_C_Booking.
To it, add an association from your Consumption view Z##_C_Booking to the value help
provider CDS view DS4_I_FlightClassVH defined as follows:
association [1] to DS4_I_FlightClassVH as _FlightClassVH
on $projection.Class = _FlightClassVH.FlightClass
Include this association in the select list of view Z##_C_Booking and add the annotation
@Consumption.valueHelp: '_FlightClassVH' to the field Class of view
Z##_C_Booking.
Note:
Don’t forget to activate your changes.
a) Make sure that your implementation looks similar to the following:
define view ...
as select from DS4_I_BookingWD
/* Association to flight class value help provider */
association [1] to DS4_I_FlightClassVH as _FlightClassVH
on
$projection.Class = _FlightClassVH.FlightClass
226
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Implementing Additional Functionality
{
// Fields
@Consumption.valueHelp: '_FlightClassVH'
Class,
// Associations
_FlightClassVH
}
7. Test your application by starting it from the SAP Web IDE.
Check that the corresponding value helps are available for the following fields:
City (customer)
Country (customer)
Airline ID (booking)
Connection number (booking)
Flight Date (booking)
Currency (booking)
Travel agency (booking)
Flight class (booking)
a) Start the application as described in the exercise Configure a List Report
Application using CDS Annotations (Unit: User Interface). Verify that the
application works as expected.
© Copyright. All rights reserved.
227
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 5: Transactional Processing
LESSON SUMMARY
You should now be able to:
228
●
Create Determinations, Validations, and Actions
●
Add Value Help
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
UNIT 6
Application Provisioning
Lesson 1
Exploring SAP Fiori Launchpad Configuration
Exercise 17: Reference SAP Fiori Catalog
230
235
Lesson 2
Configuring Target Mappings
Exercise 18: Create SAPUI5 Target Mapping
239
243
UNIT OBJECTIVES
●
Explore SAP Fiori Launchpad Configuration
●
Configure Target Mappings
© Copyright. All rights reserved.
229
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Lesson 1
Exploring SAP Fiori Launchpad Configuration
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Explore SAP Fiori Launchpad Configuration
SAP Fiori Launchpad Content
Figure 156: Customizing and Configuration Assigning Principles
Providing an SAPUI5 application in the SAP Fiori launchpad is done by defining a target
mapping in an SAP Fiori catalog. Target mappings consist of the ICF-node and the component
ID of the SAPUI5 application deployed as BSP on the FES. Adding a catalog to a user role
allows the user owning this role to access the application in the SAP Fiori launchpad.
Tiles are also defined in the catalogs and allow the user owning the role including the catalog
to access the app by using the app finder in the SAP Fiori launchpad. To make it even easier
for the user, tiles can also be referenced in SAP Fiori groups, which are also assigned to roles.
Groups are displayed directly in the workspace of the SAP Fiori launchpad.
230
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori Launchpad Configuration
Figure 157: SAP Fiori Launchpad Designer
The SAP Fiori Launchpad Designer (FLPD) offers an environment for customizing (per client)
and configuration (per system) of catalogs and groups. It is an SAPUI5 application following
the SAP Fiori design-guidelines but not an SAP Fiori app documented in the SAP Fiori app
reference library. It is part of the central UI of every AS ABAP since 7.40 as well as the SAP
Fiori launchpad.
Figure 158: Accessing SAP Fiori Launchpad Designer
Depending on the host and port as well as on the client for customizing, the FLPD can be
called using the following URI:
https://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sapclient=<client>?scope=CUST
© Copyright. All rights reserved.
231
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
https://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CONF
The FLPD offers the same options for customizing and configuration. It is all about handling
catalogs, groups, tiles, and target mappings.
Catalog Reference
Figure 159: How to Reference Catalogs
Catalogs can be referenced in the Fiori launchpad designer to create a copy of the catalog
consisting of references to tiles and target mappings of the source catalog. It is a good
starting to point when defining own catalogs to start with referencing a catalog shipped by
SAP. If SAP ships a new version of a catalog, all references immediately use the new version.
Figure 160: Role Maintenance
232
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori Launchpad Configuration
Catalogs can be added to user roles using the role maintenance transaction PFCG. In the
Menu tab, use the small triangle beside the Transaction button (or what was last added to the
menu) and choose SAP Fiori Tile Catalog. In the following dialog box, enter the Catalog ID and
continue. Groups can be added to a role in the same way.
Hint:
If a newly created catalog is not available in the dialog box to be chosen, restart
the PFCG.
© Copyright. All rights reserved.
233
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
234
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Exercise 17
Reference SAP Fiori Catalog
Create an SAP Fiori business catalog by referencing an SAP Fiori technical catalog. Add the
business catalog to a user role and test it in the SAP Fiori launchpad.
Template: SAP_S4DEV_TC_FLIGHT_MODEL
Solution: SAP_S4DEV_BC_S_CUSTOMER
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. Start the SAP Fiori launchpad designer for configuring your Front-End Server (FES) in the
Internet Explorer and examine the URL.
2. Assign the transport request provided for your training and your package
ZS4DEV_##_FES in the settings of the SAP Fiori launchpad designer.
3. Create the catalog Z_##_BC_CUSTOMER with the title Customers ## by referencing the
SAP_S4DEV_TC_ FLIGHT_MODEL catalog with the title Manage Customer Bookings in
your Front-End Server (FES).
4. Create the role Z_##_BR_STUDENT in the Role Maintenance (PFCG) of your FES.
5. Add the Z_##_BC_CUSTOMER catalog to the menu of the Z_##_BR_STUDENT role in the
Role Maintenance (PFCG) of your FES and assign the Z_##_BR_STUDENT role to your
user.
6. Test the Manage Customer Bookings app of the Z_##_BC_CUSTOMER catalog in the SAP
Fiori launchpad of your FES.
© Copyright. All rights reserved.
235
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Solution 17
Reference SAP Fiori Catalog
Create an SAP Fiori business catalog by referencing an SAP Fiori technical catalog. Add the
business catalog to a user role and test it in the SAP Fiori launchpad.
Template: SAP_S4DEV_TC_FLIGHT_MODEL
Solution: SAP_S4DEV_BC_S_CUSTOMER
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. Start the SAP Fiori launchpad designer for configuring your Front-End Server (FES) in the
Internet Explorer and examine the URL.
a) In the Windows start menu, choose Internet Explorer.
b) In the Internet Explorer favorites, choose the SAP Fiori Launchpad Designer
Configuration of your FES.
c) Examine the URL.
2. Assign the transport request provided for your training and your package
ZS4DEV_##_FES in the settings of the SAP Fiori launchpad designer.
a) In the SAP Fiori launchpad designer of your FES, choose Settings in the upper right
corner.
b) In the Workbench Request dropdown, choose the request provided for your training.
c) In the Package Name field, enter ZS4DEV_##_FES.
d) Choose OK.
3. Create the catalog Z_##_BC_CUSTOMER with the title Customers ## by referencing the
SAP_S4DEV_TC_ FLIGHT_MODEL catalog with the title Manage Customer Bookings in
your Front-End Server (FES).
a) In the SAP Fiori launchpad designer of your FES, choose Catalogs.
b) In the Search for catalogs field, enter S4DEV.
c) Click and hold the S4DEV Flight Model (SAP_S4DEV_TC_FLIGHT_MODEL) catalog.
d) Drag and drop the catalog in the New Catalog with References area.
e) In the Title field of the Copy Catalog dialog box, enter Customers ##.
f) In the ID field, enter Z_##_BC_CUSTOMER.
g) Choose Copy.
236
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Exploring SAP Fiori Launchpad Configuration
4. Create the role Z_##_BR_STUDENT in the Role Maintenance (PFCG) of your FES.
a) In your FES, open the Role Maintenance by using transaction PFCG.
b) In the Role field, enter Z_##_BR_STUDENT.
c) Choose Create Single Role.
d) In the Description field, enter Student Role ##.
e) Choose Save.
5. Add the Z_##_BC_CUSTOMER catalog to the menu of the Z_##_BR_STUDENT role in the
Role Maintenance (PFCG) of your FES and assign the Z_##_BR_STUDENT role to your
user.
a) Choose the Menu tab.
b) Choose the small triangle in the Insert Node button.
c) Choose SAP Fiori Tile Catalog.
d) In the Catalog ID field, enter z_##* and use the value help.
e) In the dialog box, double click Z_##_BC_CUSTOMER.
f) Choose Continue.
g) Choose the User tab.
h) In the User ID field, enter your user.
i) Choose Save.
6. Test the Manage Customer Bookings app of the Z_##_BC_CUSTOMER catalog in the SAP
Fiori launchpad of your FES.
a) Start or reload the SAP Fiori launchpad of your FES in the Internet Explorer.
b) Choose your user in the upper left corner.
c) In the Me Area, choose App Finder.
d) In the list of catalogs on the left, choose Customers ##.
e) Choose Manage Customer Bookings.
f) Operate the app as you wish.
© Copyright. All rights reserved.
237
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
LESSON SUMMARY
You should now be able to:
●
238
Explore SAP Fiori Launchpad Configuration
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Lesson 2
Configuring Target Mappings
LESSON OBJECTIVES
After completing this lesson, you will be able to:
●
Configure Target Mappings
Catalog Maintenance
Figure 161: Tile Types
There are three different types of tile in Fiori. The App Launcher – Static or just static tile
consists of a title, subtitle, an icon, keywords for search, and general information. The App
Launcher – Dynamic or just dynamic tile has in addition the possibility to show a dynamic
number. This number originates from an OData service request providing a natural number
like a number of data sets. The refresh interval of the number can also be set.
The last tile is the News Tile, which has a special purpose of showing the news of Really Simple
Syndication (RSS) feeds. It is twice the size of the other two tiles and shows a preview of the
feeds listed in its tile definition. When clicking the tile, the news app starts showing all
elements of the underlying RSS feeds.
© Copyright. All rights reserved.
239
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
Figure 162: Catalog Maintenance
Catalogs can be created by clicking the plus symbol in the lower left corner of the catalog
overview. This opens a dialog box asking for a catalog title and technical ID, and asking if the
catalog should be pulled from another system as remote catalog. The catalog title can be
changed later by using the pencil next to the heading of the catalog but not the catalog ID.
Catalogs created by customers should start with Z_ but this is only enforced in configuration.
Figure 163: SAP Fiori Content Model
Technical catalogs (TC) cut tiles and target mappings (TM) by solution area, and are
therefore the technical definition source. Business catalogs (BC) reference tiles and target
mappings (TM) of technical catalogs (TC) according to segregation of duty. Business catalog
groups (BCG) contain apps from various business catalogs (BC) merging a subtopic.
Business roles (BR) combine multiple business catalogs (BC) and business catalog groups
(BCG) to form one topic.
240
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Configuring Target Mappings
Intent-Based Navigation
Figure 164: Intent-Based Navigation
The most important part of a tile is its navigation information containing an intent, which
connects to a target mapping. An intent is short for intention and consists of a semantic
object like sales order and action like display. If the user wants to see the details of a sales
order, their intention is to display a sales order. Fiori adds this intention behind the FLP URL
separated by a # to call a target mapping that has this intent defined. In this way, it is possible
to call an application using HTTP without showing the real URL of the application but instead
mapping the request to an internally-defined target.
Intent-based navigation is highly flexible. It is not important how the intent is created. It can be
a tile in the FLP or any other function in any other app that the user is working with. So apps
just need to start a navigation using an intent, and the target mapping available for the current
user is called. Which intent is called depends on the user role of the user starting the
navigation. That means that the same intent can lead to different results for different users.
© Copyright. All rights reserved.
241
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
Figure 165: Target Mapping
Target mappings contain the information about which app to start, which parameters to use,
and on which device types. They are identified by its intent, the combination of semantic
object and action. If the user clicks a tile, the intent-based navigation defined in the tile is
started. The suitable target mapping then calls the target app defined.
Figure 166: Create Target Mapping for SAPUI5
The target of a target mapping for an SAPUI5 Fiori App consists of a title, URL, and
component ID. The URL is generated as a path in the Internet Communication Framework
(ICF) when deploying the SAPUI5 app as Business Server Page (BSP) to the ABAP
repository. The component ID is defined during the development of the SAPUI5 app in the
SAP Web IDE and can be found in the Component.js file.
242
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Exercise 18
Create SAPUI5 Target Mapping
Create an SAP Fiori technical catalog including a tile and target mapping for an SAPUI5 Fiori
app. Reference the tile and target mapping in a business catalog.
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. Create the catalog Z_##_TC_FLIGHT_MODEL with the title Flight Model ## in your
Front-End Server (FES).
2. Create a target mapping to the Manage Customer Bookings ## app in the
Z_##_TC_FLIGHT_MODEL catalog in your FES using the following values.
Field
Value
Semantic Object
CustomerBooking
Action
manage##
URL
/sap/bc/ui5_ui5/sap/z##_mng_book
ID
student##sap.training.bookings
3. Create the static tile Manage Customer Bookings ## with the subtitle Student ## in the
Z_##_TC_FLIGHT_MODEL catalog in your FES using the semantic object and action from
the previous exercise step.
4. Create a reference for the Manage Customer Bookings ## tile and its target mapping of
your Flight Model ## catalog in your Customers ## catalog.
5. Test the Manage Customer Bookings ## app of the Customers ## catalog in the SAP Fiori
launchpad of your FES.
© Copyright. All rights reserved.
243
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6
Solution 18
Create SAPUI5 Target Mapping
Create an SAP Fiori technical catalog including a tile and target mapping for an SAPUI5 Fiori
app. Reference the tile and target mapping in a business catalog.
Note:
Wherever you see ##, replace it with your group number provided by your trainer.
1. Create the catalog Z_##_TC_FLIGHT_MODEL with the title Flight Model ## in your
Front-End Server (FES).
a) In the SAP Fiori Launchpad Designer of your FES, choose Catalogs.
b) Choose + beneath the list of catalogs.
c) In the Title field, enter Flight Model ##.
d) In the ID field, enter Z_##_TC_FLIGHT_MODEL.
e) Choose Save.
2. Create a target mapping to the Manage Customer Bookings ## app in the
Z_##_TC_FLIGHT_MODEL catalog in your FES using the following values.
Field
Value
Semantic Object
CustomerBooking
Action
manage##
URL
/sap/bc/ui5_ui5/sap/z##_mng_book
ID
student##sap.training.bookings
a) Choose Target Mappings at the top of the page.
b) Choose Create Target Mapping.
c) In the intent pane, enter the following values:
Field
Value
Semantic Object
CustomerBooking
Action
manage##
d) In the Application Type menu, choose SAPUI5 Fiori App.
e) In the Target pane, enter the following values:
244
© Copyright. All rights reserved.
his material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Configuring Target Mappings
Field
Value
URL
/sap/bc/ui5_ui5/sap/
z##_mng_book
ID
student##sap.training.bookings
f) Choose Save.
3. Create the static tile Manage Customer Bookings ## with the subtitle Student ## in the
Z_##_TC_FLIGHT_MODEL catalog in your FES using the semantic object and action from
the previous exercise step.
a) Choose Tiles next to Target Mappings.
b) Choose Create Tile.
c) Choose App Launcher – Static.
d) In the General pane, enter the following values:
Field
Value
Title
Manage Customer Bookings ##
Subtitle
Student ##
e) In the Navigation pane, enter the following values:
Field
Value
Semantic Object
CustomerBooking
Action
manage##
f) Choose Save
4. Create a reference for the Manage Customer Bookings ## tile and its target mapping of
your Flight Model ## catalog in your Customers ## catalog.
a) Choose Target Mappings at the top of the page.
b) Select the Semantic Object CustomerBooking with Action manage##.
c) Choose Create Reference.
d) In the Search for catalogs field, enter ## and press ENTER.
e) Choose your Customers ## catalog.
f) Choose Tiles next to Target Mappings.
g) Select Manage Customer Bookings ## from the list of tiles.
h) Choose Create Reference.
i) In the Search for catalogs field, enter ## and press ENTER.
j) Choose your Customers ## catalog.
© Copyright. All rights reserved.
245
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Unit 6: Application Provisioning
5. Test the Manage Customer Bookings ## app of the Customers ## catalog in the SAP Fiori
launchpad of your FES.
a) Start or reload the SAP Fiori launchpad of your FES in Internet Explorer.
b) Choose your user in the upper left corner.
c) In the Me Area, choose App Finder.
d) In the list of catalogs on the left, choose Customers ##.
e) Choose Manage Customer Bookings ##.
f) Operate the app as you wish.
246
© Copyright. All rights reserved.
This material is for the Exclusive Use of Registered Students in SAP Virtual Classroom Deliveries
Lesson: Configuring Target Mappings
LESSON SUMMARY
You should now be able to:
●
Configure Target Mappings
© Copyright. All rights reserved.
247