5Steps2FIORI
ABAP Programming Model for SAP
S/4HANA
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
2
Table of Contents
TABLE OF CONTENTS ............................................................................................................................................................................. 2
A.
INTRODUCTION ................................................................................................................................................................... 4
YOUR SAP FIORI APP ............................................................................................................................................................................. 5
BUSINESS SCENARIO .............................................................................................................................................................................. 6
DATA MODEL....................................................................................................................................................................................... 6
ARCHITECTURE OVERVIEW ...................................................................................................................................................................... 8
HINTS AND TIPS .................................................................................................................................................................................. 10
STEP 1 – CREATE AN ABAP PROJECT ...................................................................................................................................................... 11
STEP 2 – CREATE A DEVELOPMENT PACKAGE ........................................................................................................................................... 15
B.
DATA DICTIONARY AND DEMO DATA ............................................................................................................................... 19
INTRODUCTION:.................................................................................................................................................................................. 19
STEP 1 – CREATE THE SALES ORDER HEADER TABLE................................................................................................................................... 19
STEP 2 – CREATE THE SALES ORDER ITEMS TABLE ..................................................................................................................................... 23
STEP 3 – FILL YOUR DATABASE TABLES WITH SAMPLE DATA......................................................................................................................... 24
C.
CORE DATA SERVICES ........................................................................................................................................................ 27
INTRODUCTION................................................................................................................................................................................... 27
STEP 1 – CREATE A SALES ORDER HEADER INTERFACE VIEW........................................................................................................................ 28
STEP 2 - CREATE A SALES ORDER ITEM INTERFACE VIEW............................................................................................................................. 35
STEP 3 – ADD ASSOCIATIONS WITHIN THE SALES ORDER HEADER TO NAVIGATE OTHER ENTITIES ......................................................................... 39
STEP 4 - ADD ASSOCIATIONS WITHIN THE SALES ORDER ITEM TO NAVIGATE OTHER ENTITIES .............................................................................. 43
STEP 5 – CREATE A SALES ORDER HEADER CONSUMPTION VIEW ................................................................................................................. 44
STEP 6 – CREATE A SALES ORDER ITEM CONSUMPTION VIEW...................................................................................................................... 46
STEP 7 – ADD AN ASSOCIATION TO THE SALES ORDER HEADER CONSUMPTION VIEW ....................................................................................... 48
STEP 8 – ADD AN ASSOCIATION TO THE SALES ORDER ITEM CONSUMPTION VIEW ........................................................................................... 50
STEP 9 – EXPOSE AN ODATA SERVICE ..................................................................................................................................................... 52
SUMMARY ......................................................................................................................................................................................... 56
D.
CREATE YOUR SAP FIORI ELEMENTS APPLICATION ............................................................................................................ 57
INTRODUCTION................................................................................................................................................................................... 57
STEP 1 – ACCESS THE SAP WEBIDE ....................................................................................................................................................... 58
STEP 2 – CREATE A FIORI ELEMENTS WEB APPLICATION ............................................................................................................................. 60
E.
USING ANNOTATIONS AND METADATA EXTENSIONS ....................................................................................................... 64
INTRODUCTION................................................................................................................................................................................... 64
STEP 1 – CREATE A METADATA EXTENSION FOR THE SALES ORDER HEADER CONSUMPTION VIEW...................................................................... 65
STEP 2 – CREATE A METADATA EXTENSION FOR THE SALES ORDER ITEM CONSUMPTION VIEW .......................................................................... 69
STEP 3 – ADD SEARCH CAPABILITIES TO YOUR SALES ORDER CONSUMPTION VIEW AND UI................................................................................ 74
F.
CREATE ACTIONS, DETERMINATIONS AND VALIDATIONS ................................................................................................. 78
INTRODUCTION................................................................................................................................................................................... 78
STEP 1 – FOREIGN KEY ASSOCIATION – SALES ORDER HEADER – INTERFACE VIEW .......................................................................................... 79
STEP 2 – FOREIGN KEY ASSOCIATION – SALES ORDER ITEM – INTERFACE VIEW............................................................................................... 79
STEP 3 – TRANSACTIONAL PROCESSING - SALES ORDER HEADER INTERFACE VIEW ........................................................................................... 81
STEP 4 – TRANSACTIONAL PROCESSING - SALES ORDER ITEM INTERFACE VIEW ............................................................................................... 83
STEP 5 – TRANSACTIONAL PROCESSING – SALES ORDER HEADER CONSUMPTION VIEW .................................................................................... 87
STEP 6 – TRANSACTIONAL PROCESSING – SALES ORDER ITEM CONSUMPTION VIEW ........................................................................................ 89
STEP 7 – IMPLEMENT A DETERMINATION TO CALCULATE THE SALES ORDER ID ................................................................................................ 94
STEP 8 – IMPLEMENT A DETERMINATION TO CALCULATE THE SALES ORDER ITEM ID ......................................................................................... 99
STEP 9 – IMPLEMENT A DETERMINATION TO CALCULATE THE SALES ORDER ITEM AMOUNT ............................................................................. 104
STEP 10 – IMPLEMENT A VALIDATION TO CHECK SALES ORDER ITEM QUANTITY ............................................................................................. 109
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
3
STEP 11 – IMPLEMENT A CUSTOM ACTION TO SET A SALES ORDER TO DELIVERED STATUS ............................................................................... 113
STEP 12 – IMPLEMENT THE ACTION AS A GLOBAL ACTION OF YOUR LIST REPORT USING THE METADATA EXTENSION ........................................... 118
G.
ADD DRAFT CAPABILITIES TO YOUR APPLICATION .......................................................................................................... 120
INTRODUCTION................................................................................................................................................................................. 120
STEP 1 – DRAFT ENABLING - SALES ORDER HEADER INTERFACE VIEWS........................................................................................................ 121
STEP 2 – DRAFT ENABLING - SALES ORDER ITEM INTERFACE VIEWS ............................................................................................................ 123
STEP 3 – DRAFT ENABLING - SALES ORDER HEADER CONSUMPTION VIEWS ................................................................................................. 125
STEP 4 – DRAFT ENABLING – DETERMINATION – CREATE SALES ORDER ID .................................................................................................. 127
STEP 5 – DRAFT ENABLING – DETERMINATION – CREATE SALES ORDER ITEM ID........................................................................................... 128
STEP 6 – DRAFT ENABLING – VALIDATION – CALCULATE AMOUNT ............................................................................................................. 129
H.
ADDITIONAL INFORMATION ........................................................................................................................................... 131
DOCUMENTATION ............................................................................................................................................................................. 131
SAP COMMUNITY LINKS .................................................................................................................................................................... 131
USEFUL ADT SHORTCUTS ................................................................................................................................................................... 132
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
A. INTRODUCTION
Welcome to the 5Steps2Fiori application development exercise. In this document, you will find exercises
on:
• ABAP Development Tools
• Core Data Services & OData
• SAP Fiori Elements
• Core Data Service Meta Data Extension
• Business Object Processing Framework
• Draft Handling
Before you start, have a look at the technical information you received on the small handout. It contains
information about user, password, etc.
The screenshots for this exercise have been prepared using ABAP application user DEVELOPER. The
explanation in this exercise will remind you to use your group number (indicated by ##), e.g. ABAP
program ZR_HELLO_WORLD_#. Moreover, you’ll be creating ABAP artifacts in package TEST_F00_EX,
while all screenshots show package TEST_S4H_EX_999 for illustration purposes.
4
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
5
Your SAP Fiori app
This document will guide you through the development of a transactional SAP Fiori application with draft
capabilities, based on the ABAP RESTful programming model in SAP S/4HANA, making use of some of the
latest and greatest technologies available in the ABAP platform and the SAP Fiori Elements in SAP Cloud
Platform.
The screenshot below shows the resulting SAP Fiori app.
The development guide is built in a bottom-up approach, i.e. you’ll start with the ABAP backend
implementation using Core Data Services with a lot of annotations, CRUD (Create, Read, Update, Delete)
operations, draft enablement and OData exposure. Then you’ll switch to the SAP Web IDE for building a List
Report application based on SAP Fiori Elements and finally test it.
A lot of new buzzwords for you? No reason to panic, we’ll do all that step by step. Just buckle up and enjoy
this end-to-end trip ☺.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
6
As this is a hands-on exercise, some of the steps require a certain amount of code. However, since we want
to focus on the “getting to know the end-to-end story”, you won’t need to type all that code yourself but
rather uncomment the relevant sections in your templates.
Business Scenario
The SAP Fiori app you are going to implement is based on the NetWeaver Enterprise Procurement Model
(EPM) which covers procurement and sales business scenarios.
The scenario underlying the app is as follows: The department responsible for the sales order processing
and management in your company is requesting a new app - of course based on SAP Fiori – for processing
(i.e. creating, updating and deleting) sales orders. The Team lead has heard about advanced capabilities in
the ABAP programming model for SAP S/4HANA like draft handling which are available as of SAP NetWeaver
AS ABAP 7.51 SPS 02 innovation package and want them to be integrated in the app.
You are working in the IT department and have been appointed responsible for the development of the
sales order processing app.
Data Model
Underlying EPM data model
Sales Order
Sales Order Item
Customer
Product
Root node of the composition hierarchy. Its only child is the sales order
item.
(short: Item) Sub-node of the composition hierarchy. Sales order represents
its parent and root.
Information about the business partner. It is an association to the sales
order.
Information about the product. It is an association to the sales order item.
The table below contains technical information like name of the data dictionary entity behind each business
entity of the data model, and the name of the fields relevant for the current application. Their respective
primary keys are specified as such.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
7
The development objects ZS4H_I_SLSORDER_TP_#, ZS4H_I_SLSORDERITEM_TP_# (where # is your group
number), SEPM_I_BusinessPartner_E and SEPM_I_Product_E are CDS views representing the data model.
Beneath those CDS views are the tables ZS4HSO_# for storing sales orders and ZS4H_SOI_# for storing sales
order items.
Sales Order Header
<ZS4H_I_SLSORDR_TP_
#>
Customer
<SEPM_I_BusinessPartner
_E>
Sales Order Item
<ZS4H_I_SLSORDRITEM_TP
_#>
Product
<SEPM_I_Product_
E>
SalesOrderUUID [key]
SalesOrder
Customer
OverallStatus
Customer [key]
SalesOrderItemUUID [key]
SalesOrderUUID
SalesOrderItem
Product
CurrencyCode
GrossAmount
Quantity
Product [key]
The illustration below gives a brief overview of the simplified data model underlying today’s scenario. Due to
time restrictions, we’ve already created the different basic objects and you’re going to enhance them in the
different exercises.
From bottom to top, you see the so-called interface views which are CDS views are selecting from the
respective database table. On top of the interface views are the so-called consumption views which are
CDS views with their respective CDS metadata extension (in short: MDE).
The different view categories and naming conventions are used within SAP S/4HANA to best manage the data
model of complex business applications. These are CDS views with no technical limitations in functionality
and syntax.
The interface views can contain model information like CRUD (Create, Read, Update and Delete) and Draft
enablement, text associations, value helps and many more non-UI-specific metadata.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
8
The consumption views, as you can assume from its name, represent the data model layer where to define
scenario-specific data model and consumption-specific information. This is for example the appropriate layer
for exposing a given data model as OData service. Each scenario can have its own consumption views if
needed, whereas the interface views are common to different scenarios.
Finally, the metadata extensions are used to enrich a given consumption data model with UI-specific
metadata (using CDS annotations), thus separating them from the data model (i.e. separation of concerns).
Architecture Overview
The figure below illustrates the high-level architecture components in our scenario. It shows the main
technologies needed to build a SAP Fiori Elements app based on the new ABAP application programming for
SAP S/4HANA.
Figure 3: High-level architecture overview
Here is a short introduction about the major technologies that are involved during the process of developing
a SAP Fiori application based on the ABAP programming model for SAP S/4HANA.
ABAP Core Data Services (CDS)
ABAP CDS provides a data modeling infrastructure for defining and consuming semantically rich data models
in the ABAP platform starting with AS ABAP 7.4 SPS 05. CDS advanced data modeling capability like field
computation using a rich set of functions, building views on views, associations and table functions. CDS data
models can be enhanced at data model using CDS view extensions, but also at metadata level using CDS
metadata extensions. ABAP CDS is a core technology within SAP S/4HANA, and the ABAP development for
SAP HANA in general. Read more >>
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
9
CDS Metadata Extension (MDE)
MDEs are used to define CDS annotations for a CDS view outside of the corresponding data definition. A CDS
metadata extension is always assigned to a layer such as core, industry, partner or customer. MDEs allow a
separation of concerns by separating the data model from domain-specific semantics – e.g. UI-related
information for Fiori Elements. Read more >>
Business Object Processing Framework (BOPF)
BOPF is a framework that provides a set of generic services and functionalities to speed up, standardize, and
modularize your development. BOPF manages the entire life cycle of your business objects and covers all
aspects of your business application development. Instead of expending effort for developing an application
infrastructure, the developer can focus on the individual business logic. Using BOPF, you get the whole
application infrastructure and integration of various components for free. This allows you to rapidly build
applications on a stable and customer-proved infrastructure. Read more >>
Following options are offered to add application-specific business logic:
•
BOPF determinations which are used to calculate side-effects (automatically triggered by changes)
•
BOPF validations which are consistency checks raising messages (automatically triggered by
changes)
•
BOPF actions which are named operations that can be called (usually by a button on the UI)
Service Adaptation Description Language (SADL)
SADL plays the role of request dispatcher. It enables fast read access to data by directly pushing queries down
to the database (i.e. direct handling of Selects). In case of transactional behavior, it calls the corresponding
BOPF implementation. SADL also joins the texts to the proper fields (associated texts).
There is an annotation interpreter between SADL and SAP Gateway which reads the annotations in the CDSbased models, provides a metadata service for the UI and generates necessary artifacts. Examples for the
latter is the annotation @OData.publish: true which triggers the generation of an OData service.
SAP Gateway
It is an integral part of ABAP platform which allows the connection of devices, environments, and platforms
to SAP systems. It uses the Open Data Protocol (OData) so you can use any programming language or model
to connect to SAP and non-SAP applications.
SAP Fiori Elements
SAP Fiori Elements (formerly known as Smart Templates) allows the automatic generation of SAP Fiori apps
based on UI-specific annotations which can for example be specified in a CDS view or in locale annotations
within the SAP Web IDE. The set of predefined domain-specific CDS annotations has been enhanced with such
UI annotations with ABAP 7.5x. The development of Fiori Elements apps take place in the SAP Web IDE.
Read more >>
In the perspective of an application developer, you are in touch various objects as displayed in the graphic:
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Figure 4: Involved development objects for transactional apps
Hints and Tips
-
You can easily open an object with the shortcut Ctrl+Shift+A
Speed up the typing in ADT by making use code completion feature (shortcut Ctrl+Space)
Now, enjoy the exercises!
10
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
11
Step 1 – Create an ABAP Project
Time estimate: 10 minutes
Step-by-step procedure
In this exercise, you'll:
• Create an ABAP Project for all your developments related to a specific ABAP system/client
NOTE: If you have already executed exercise “Introduction to ABAP Development in Eclipse” from the previous
document you can skip this exercise.
Explanation
1. Start Eclipse
2. After the first launch, you
will see the Welcome Page.
Just close it.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
3. Switch to the ABAP
perspective by clicking the
Open Perspective button
or via the Menu Window >
Open perspective > Other
4. Choose the ABAP
perspective and press OK
5. The ABAP perspective
opens and you’re
welcomed by the ABAP
Feature Explorer.
The layout is as described
in the introduction of this
exercise, so you know
already, why there are so
many views in this
perspective.
12
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
6. Okay, let’s start with the
first step – create an ABAP
Project, the central
interface between the IDE
and the ABAP backend
system.
7. In the New ABAP Project
dialog, choose your
S/4HANA system
8. You are asked to provide
the logon information for
system S4H:
• Client: 100
• User: 5STEPS2FIORI
In principle, your project is
ready to use and you could
finalize the project creation.
Yet, it’s quite helpful to
define favorite package,
therefore, please continue
with Next.
13
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
9. Add favorite packages to
for your project via the
Add button.
**This image is a reference
10. Add the ABAP packages
• TEST_S4H_SOLUTIONS
(containing the
suggested solutions for
all exercises).
11. The ABAP Project is
created and you can see it
as a new (well, the only)
entry in the Project
Explorer view.
12. Now, let’s explore a bit the
views in the ABAP
perspective, e.g. set the
focus to the Problems
view.
13. Initially, there should be no
problems (hope this status
continues ☺).
You’ll later understand the
purpose of the Problems
view.
14
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
15
Step 2 – Create a Development Package
Time estimate: 10 minutes
Step-by-step procedure
In this exercise, you'll:
• Create a development package to hold all the development objects you will create during the rest of the
workshop
Explanation
14. Select your project in ADT
and select New → ABAP
Package
15. Enter the following values
Name:
TEST_FXX_EX
Description:
FXX: Exercises Package for
WP05
(where FXX should be replace
with your system ID)
Package Type
Development
Press Next.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
16. In the screen “Select basic
package properties” enter:
Software component:
LOCAL
Press Next.
17. In the screen “Selection of
Transport request” just press
Finish
18. Expand the Transport
Properties and activate the
check box “Record Changes
to all Objects of the Package
in Transport Requests”
16
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
19. If you have missed to mark
the package accordingly to
record changes in transport
requests you have to maintain
this setting afterwards using
SAPGUI.
20. Add the newly created
package to your Favorite
Packages.
Right click on the newly
created package that is
shown in the System Library
and choose Add to Favorites
21.
Now, let’s expand the
ABAP project in the Project
Explorer view, using the +
indicators.
Besides the manually
added packages, your
$TMP package is added by
default to the list of
Favorite Packages. As you
complete the exercises you
will notice that content is
17
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
being added to your
TEST_F00_EX package.
18
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
19
B. DATA DICTIONARY AND DEMO DATA
Introduction:
In this exercise, we will create the tables for sales orders and sales order items that will later be used as a data source
for the Core Data Services that will be created in the next exercise.
As of SAP NetWeaver 750 it is possible to create tables using the new table editor that we thus want to showcase
here.
To fill the tables with demo data we will develop a small report that uses the latest ABAP language features.
Time estimate: 20 minutes
Step-by-step procedure
In this exercise, you'll:
• Create two Database Tables for your Sales Order Headers and Sales Order Items
Step 1 – Create the Sales Order Header Table
Explanation
1. Do a right click on your
package TEST_F00_EX
(where # is your group
number).
Select New → Other ABAP
Repository Objects.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
2. Search for Database Table.
Continue with Next.
3. Enter
Package:
TEST_F00_EX
Name:
zs4h_so
(where # is your group
number)
Description:
ZS4H Sales Order
Header Table
Click Next.
20
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
4. Create a new transport
request
(this should be marked by
default) and press Finish.
21
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Define the table like this:
@EndUserText.label : 'Salesorder header'
@AbapCatalog.enhancementCategory : #NOT_CLASSIFIED
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #L
@AbapCatalog.dataMaintenance : #LIMITED
define table zs4h_so {
key client
: mandt not null;
key salesorderuuid : snwd_node_key not null;
salesorder
: snwd_so_id;
customer
: snwd_partner_id;
overallstatus
: snwd_so_oa_status_code;
}
5. Save and activate.
22
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
23
Step 2 – Create the Sales Order Items Table
Explanation
Screenshot
1. Now create the table
zs4h_soi in your package
TEST_F00_EX like
previously.
2. Select the transport request
that you have just created.
3. Define the table like this:
define table zS4h_soi {
key client
: abap.clnt not null;
key salesorderitemuuid : snwd_node_key not null;
salesorderuuid
: snwd_node_key;
salesorderitem
: abap.int4;
product
: snwd_product_id;
currencycode
: snwd_curr_code;
@Semantics.amount.currencyCode : 'zs4h_soi.currencycode'
grossamount
: snwd_ttl_gross_amount;
quantity
: abap.int4;
}
Save and activate.
4. Save and activate.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
24
Step 3 – Fill your Database Tables with sample data
Time estimate: 10 minutes
Step-by-step procedure
In this exercise, you'll:
• Write an ABAP Program that fills your database tables
• Have a look in your Data Preview of your tables to check what data is there
Explanation
1. Create an ABAP Program
zr_fill_tables in your
package.
2. Enter the code that you can
find in the exercise solutions.
Package:
TEST_S4H_SOLUTIONS
Path: Source Code Library >>
Programs
Name: ZR_FILLTABLES_999
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
3. Replace the following text in
the copied report compared to
the original:
Replace
ZR_FILL_TABLES_999
with ZR_FILL_TABLES
Replace ZS4H_SO_999 with
ZS4H_SO
Replace ZS4H_SOI_999 with
ZS4H_SOI
4. Data is selected into internal tables that are have been created via inline declarations.
In addition navigation to other CDS views is leveraged.
5. Second insert will use workarea_so_2
* Single line INSERT in second syntax variant.
INSERT zapw_so_# FROM workarea_so_2.
Ensure # is your group number.
6. Data is moved between internal tables using the CORRESPONDNIG operator
.
7. Last will be an insert of an internal table
Ensure to use your group number
25
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
8. Save and activate. Then
execute to fill your tables with
SalesOrders (zs4h_so) and
SalesOrderItems.(zs4h_soi
)
9. Verify the result set in the
Data Preview. You can either
right-click on the
Database Table zs4h_so
respective zs4h_soi Select
Open With and click on
Data Preview.
Alternatively, you can press
Alt+F8, type zs4h_so or
zs4h_soi and then OK.
Or open the editor with the
table definition and choose
F8.
10. By pressing the button “SQL
console” you can check the
SQL statement that was
issued to retrieve the data
26
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
27
C. CORE DATA SERVICES
Introduction
The SAP Fiori application you’re going to build shows the list of customers including their category on the
left-hand side and address information on the first icon tab filter. The customer classification list is
provided by means of a Core Data Services (CDS) view.
This exercise introduces the CDS view definition capabilities of the AS ABAP 7.51. In particular, you will
learn about the features provided by ABAP CDS like aggregation functions in the SELECT list, JOINs,
UNIONs, the view-on-view capabilities, etc. The exercise is not designed to give you a complete list, but
only a peek into the long list of available features in ABAP CDS. Learn more about ABAP Core Data
Services in the ABAP language documentation.
As you will see in the following, the ABAP Development Tools will be used. CDS views, or more precisely
Data Definition Language sources (DDLS), can only be created and maintained using ADT, which is one of
the reasons why we introduced the ABAP Development Tools in detail in the previous exercise.
Throughout the exercise, you’ll see several useful tips and tricks when working with the CDS editor.
In this exercise, you’ll
• create a CDS view with (aggregated) sales order invoice information
• create a CDS view
o as “view-on-view” on an existing CDS view
o that provides a customer classification based on sales order invoice information
• use the Data Preview on CDS views
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
28
Step 1 – Create a Sales Order Header Interface View
This Interface View will provide the data extract from the Sales Order Header table.
Explanation
1. First step is to create an
ABAP repository object
called Core Data Services –
Data Definition
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
2. Enter the name of the Data
Definition source (DDLS)
ZS4H_I_SLSORDER_TP
and the description
3. Choose a transport request
you have previously
created
29
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
4. Select a Define View
source code template
5. Enter the SQL View Name
ZV_SO the Data Definition
Source Name
ZS4H_I_SLSORDER_TP and
the Data Source Name
zs4h_so
6. Use the Content Assist
to insert all elements into
the select list
Activate the Data
Definition
30
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
7. Open the data preview
8. Simple use built in
functionality like Sorting
31
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
9.
Quick Filtering
10. Distinct Values
32
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
11. Number of Entries
12. SQL Console
13. Now let’s rename the fields
by using some aliases
14. Save, activate and open the
data preview again
33
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
15.
Well done ☺
34
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
35
Step 2 - Create a Sales Order Item Interface View
This Interface View will provide the data extract from the Sales Order Items table.
Explanation
16. Second step is to create
another Core Data Services
– Data Definition
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
17. Enter the name of the Data
Definition source (DDLS)
ZS4H_I_SLSORDERITE
M_TP and the description
18. Choose the transport
request you previously
created
36
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
19. Select a Define View
source code template
20. Enter the SQL View Name
ZV_SOI the Data
Definition Source Name
ZS4H_I_SLSORDERITEM_TP
and the Data Source Name
zs4h_soi
21. Use the Content Assist
to insert again all elements
into the select list
37
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
22. Rename the fields by using
some aliases again
23. Save and activate the Data
Definition
and open the data preview
38
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
39
Step 3 – Add associations within the Sales Order Header to navigate other entities
Creating an association between the Sales Order Header Interface View and the Sales Order Item Interface View will
make it easy to navigate from the header to the items. We will also use associations to navigate from:
• Sales Order Header to Customer
• Sales Order Header to Overall Status code
Explanation
24. Open source
ZS4H_I_SlsOrder_TP
25.
Third step is to create an
association to navigate
from the SalesOrder to the
SalesOrderItem and vice
versa
Therefore add the
association [0..*] to
ZS4H_I_SLSORDERITEM_TP
and publish the navigation
path
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
26. Save and activate the Data
Definition.
and open the data preview
Right-click an entry and
choose Follow Association
27. Navigate to the _Item
28. Voila ☺
40
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
29. Add the association
ZS4H_I_SlsOrder_TP
to navigate from the Item
to the Header node
30. Save and activate the Data
Definition
and open the data preview
Right-click an entry and
choose Follow Association
31. Let’s add another two
associations within the
ZS4H_I_SlsOrder_TP
source to get an navigation
path to the Customer and
to the Overallstatus
Info: These two
associations will be used
later in the UI to get a
value help
41
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
32. Add an association to the
SEPM_I_BusinessPar
tner_E
and to the
SEPM_I_SalesOrdOve
rallStatus
view and publish them in
the projection list
33. Save and activate the Data
Definition
and open the data preview
Right-click an entry and
choose Follow Association
42
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
43
Step 4 - Add associations within the Sales Order Item to navigate other entities
Creating an association between the Sales Order Header Interface View and the Sales Order Item Interface View will
make it easy to navigate from the items to the header. We will also use associations to navigate from:
• Sales Order Item to Product
• Sales Order Item to Currency code
Explanation
34. Let’s add another two
associations within the
Zs4h_I_SlsOrderItem_Tp
source to get an navigation
path to the Product and to
the Currency
Info: These two
associations will be used
later in the UI to get a
value help
35. Therefore add an
association to
SEPM_I_Product_E and
SEPM_I_Currency and
release the navigation path
within the projection list
36. Save and activate the Data
Definition
and open the data preview
Right-click an entry and
choose Follow Association
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
44
Step 5 – Create a Sales Order Header Consumption View
The Sales Order Header Consumption View will later be used to expose an OData Service. By separating the
Consumption View that will be exposed from the internal Interface View that provides the data, you can control what
information is exposed and how it is exposed.
Explanation
37. Create a new Core Data
Services – Data Definition
ZS4H_C_SLSORDER_TP
view
Info: This view will
later be used to
expose an OData
Service
38. Enter the SQL View Name
ZV_C_SO
the Data Definition Source
Name:
ZS4H_C_SLSORDER_TP
and the Data Source Name
ZS4H_I_SLSORDER_TP
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
39. Use the Content Assist
And add following
elements
key SalesOrderUUID,
SalesOrder,
Customer,
OverallStatus,
/* Associations */
_Customer,
_OverallStatus
40. Save, activate
and open the data preview
45
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
46
Step 6 – Create a Sales Order Item Consumption View
The Sales Order Item Consumption View will provide a sub entity of the Sales Order OData Service. By separating the
Consumption View that will be exposed from the internal Interface View that provides the data, you can control what
information is exposed and how it is exposed.
Explanation
41. Create a new Core Data
Services – Data Definition
ZS4H_C_SLSORDERITE
M_TP view
42. Enter the SQL View Name
ZV_C_SOI
the Data Definition Source
Name:
ZS4H_C_SLSORDERITEM_TP
and the Data Source Name
ZS4H_I_SLSORDERITEM_TP
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
43. Use the Content Assist
And add following
elements
key SalesOrderItemUUID,
SalesOrderUUID,
SalesOrderItem,
Product,
CurrencyCode,
GrossAmount,
Quantity,
_Currency,
_Product
44. Save, activate
and open the data preview
47
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
48
Step 7 – Add an association to the Sales Order Header Consumption view
Associations are needed to link the parent Sales Order Header Consumption View to the child Sales Order Items
Consumption View. This association will make it easy to navigate from the Header to the Items in the Fiori app you will
create.
Explanation
45. Open source
ZS4H_C_SLSORDER_TP
46. Add an association to the
ZS4H_C_SLSORDERITE
M_TP
view and publish the
association
47. Save, activate
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
and open the data preview
To check that the view is
working properly
49
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
50
Step 8 – Add an association to the Sales Order Item Consumption View
Associations are needed to link the child Sales Order Item Consumption View to the parent Sales Order Header
Consumption View.
Explanation
48. Open source
ZS4H_C_SLSORDERITE
M_TP
49. Add an association to the
ZS4H_C_SLSORDER_TP
view and publish the
association
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
50. Save, activate
and open the data preview
51. To check that the view is
working properly
51
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
52
Step 9 – Expose an OData Service
You will formally expose your Consumption View as an OData Service so that it can be called via a URL and later by
your Fiori app.
Explanation
52. Last but not least we will
create an OData service
definition by simply using
the annotation
@OData.publish:
true
53. Open source
ZS4H_C_SLSORDER_TP
54. Add the annotation:
@OData.publish:
true
To your Sales Order Header
Consumtion view
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
55. After activating the view
You will see the warning
that the generated OData
service is not yet registered
(active) in the system
56. So let’s register the service
to the system alias by
executing transaction
/IWFND/MAINT_SERVICE
57. Navigate to the Add Service
Dialog
53
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
58. Choose LOCAL as the
System Alias Name and
ZS4H* for your service
name
Select your service and
press
Add Selected
Service
59. Select your exercise
package and press Enter
Confirm the selection of the
transport request you
previously created.
60. The service should be
successfully created.
54
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
61. Navigate back to
ZS4H_C_SLSORDER_TP
And hover over the “G”
icon and open the OData
Service Definition
document
62. Open the browser of your
choice (Google Chrome,
Mozilla Firefox, Internet
Explorer or any other).
63. Enter you logon credentials
64. And the service document
is opened
55
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
56
65. Please feel free to navigate
to the
Zs4h_C_Slsorder_Tp
entity set
66. Well done! ☺
Summary
You created a CDS view from scratch.
You used the annotation @OData.publish:true to expose an OData service. As result of using this annotation,
the frameworks have mapped your CDS view with all its fields and associations to the generated OData service in
the background. Even the complete mapping of types and associations is taken over by the framework.
Then you registered the generated OData service in the SAP Gateway‘s editor Activate and Maintain Services
(transaction /IWFND/MAINT_SERVICE).
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
57
D. CREATE YOUR SAP FIORI ELEMENTS APPLICATION
Introduction
In the previous step you prepared an OData service.
Now it's time to build a SAP Fiori UI based using the SAP Fiori Elements (template-based approach). Initially
the app will be very simple. You will add to the app in the following exercises.
In this exercise you’ll
• create a SAP Fiori Master Detail application using the Full Stack Web IDE service on SAP Cloud
Platform (SAP CP)
• preview and test the application
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
58
Step 1 – Access the SAP WebIDE
In this step we will explain how to access SAP WebIDE.
Explanation
1. Open your cheat sheet and
check the section “SAP
Cloud Platform”.
You can find:
URL of the WebIDE
User for the authentication
The password is the same
available in the User
Information part (at the
top).
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
2. Use the URL available in
the cheat sheet to access
the WebIDE login page
3. Login using the user from
the cheat sheet and the
password at the top.
4. Welcome to SAP Web IDE
(maybe it’s the first time
for some of you ☺).
59
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
60
Step 2 – Create a Fiori Elements Web Application
In this step you will create a very simple Fiori elements List Report & Object Page app based on your Sales Order
OData Service. You will add to this app later by adjusting your ABAP code.
Explanation
5. Create a new Project from
Template
6. Select List Report
Application from the SAP
Fiori Elements Category
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
7. Enter a
Project Name (it
needs to contain
your system ID)
and a
Title
and press
Next
NOTE: You can enter a
namespace & description if
you wish. The namespace
is typically used to indicate
your company.
8. Select your S/4HANA
system from the list.
Provide user 5STEPS2FIORI
and password to login
Choose your exposed
OData Service
ZS4H_C_SLSORDER_TP
_CDS
and press
Next
61
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
9. The service document and
the annotation file is
loaded from the backend.
Select all the entries.
Press Next
10. Select the OData Collection
ZS4H_C_SLSORDER_TP
From the drop down list
11. The OData Navigation
property
to_Item
is filled automatically
Press Finish.
12. Select the project and
press the green play
button to test the app.
62
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
13. The FIORI Launchpad will
be executed.
Click on the tile related to
your project to test the
application.
14. The application is launched
15. Press the Go Button to
display the data from the
backend system
16. You now see the sample
data you previously loaded
in the sales order tables.
Congratulations, you created a SAP Fiori Elements Application using the Fiori WebIDE.
63
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
64
E. USING ANNOTATIONS AND METADATA EXTENSIONS
Introduction
After you’ve successfully created a basic SAP Fiori Elements app.
You’ll define the default layout of the list report (i.e. fields visibility and position), defining a proper detail
page and add a search area including a fuzzy search to your app using the corresponding domain-specific CDS
annotations.
To separate all UI semantics from the so-called core semantics specified in a consumption view, you will
specify the UI-specific annotations into its associated metadata extension (MDE).
Metadata extensions allow a layering of the annotations. A customer for example can overwrite annotations
in the underlying metadata extension within his workspace so he doesn't have to make a correction nor repair
the CDS views and metadata extensions delivered by SAP.
You will end up with following UIs:
In the exercise you’ll
• Create and use Metadata Extension (MDE) to control the UI of your SAP Fiori Elements application
• Add further semantics (search capabilities) to enhance the behaviour of your SAP Fiori Elements
application
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
65
Step 1 – Create a Metadata Extension for the Sales Order Header Consumption View
You will use this metatdata extension to add annotations that control what information is shown in the List
Report, and what information is shown when a row of the List Report is expanded.
Explanation
1. Create a new Core Data
Service – Metadata
Extension
ZS4H_E_SLSORDER_TP
2. Enter your package the
Name
ZS4H_E_SLSORDER_TP and
a Description.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
3. Use the Annotate View
template and press Finish
Replace the view with
ZS4H_C_SLSORDER_TP.
Use the Content Assist
to insert following
elements:
SalesOrderUUID
SalesOrder
Customer
OverallStatus
4. Use the Quick Fix shortcut
66
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
To add the Allow
Extensions to the base
view
5. Data Definition
ZS4H_C_SLSORDER_TP
is opened and the
necessary changes are
automatically applied.
Save and activate the Data
Definition
ZS4H_C_SLSORDER_TP
6. Navigate back to the
Metadata Extension
ZS4H_E_SLSORDER_TP
And add following UI
annotations:
@UI.hidden: true
To suppress UUID on the
screen by default
67
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
7. Add the UI annotations
@UI.lineItem
@UI.identification
With the appropriate
attributes to the
SalesOrder,
Customer,
OverallStatus
fields
Use the content assist
to get help from the editor
8. Last step is to add some
header information:
Use the content assist
to get help from the editor
9. Save and activate the
Metadata Extension
68
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
69
Step 2 – Create a Metadata Extension for the Sales Order Item Consumption View
You will use this metatdata extension to add annotations that control how Order Items are displayed is
shown when a single row of the Sales Order List Report is expanded, and what information is shown when
expanding an individual Sales Order Item.
Explanation
10. Create a new Core Data
Service – Metadata
Extension
Enter your package the
Name
ZS4H_E_SLSORDERITE
M_TP
and a Description.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Replace the view with
ZS4H_ C_
Use the Content Assist
to insert following
elements:
SalesOrderItemUUID
SalesOrderUUID
SalesOrderItem
Product
CurrencyCode
GrossAmount
Quantity
11. Use the Quick Fix shortcut
To add the Allow
Extensions to the base
view
70
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
12. Data Definition
ZS4H_C_SLSORDERITEM_TP
is opened and the
necessary changes are
automatically applied.
Save and activate the Data
Definition
13. Navigate back to the
Metadata Extension
ZS4H_E_SLSORDERITEM_TP
And add following UI
annotations:
@UI.hidden: true
@UI.hidden: true
To suppress UUIDs on the
screen by default
71
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
14. Add the UI annotations
@UI.lineItem
@UI.identification
With the appropriate
attributes to the
SalesOrderItemUUID
SalesOrderUUID
SalesOrderItem
Product
CurrencyCode
GrossAmount
Quantity
fields
Use the content assist
to get help from the editor
15. Add the UI header
information.
72
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
16. Last step is to add some
header information:
Use the content assist
to get help from the editor
Save and activate the
Metadata Extension
17. Navigate back to your
browser and refresh your
app.
Checkout your app to see
the changes to your layout
73
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
74
Step 3 – Add Search capabilities to your Sales Order Consumption View and UI
Before you can add search filters to your List Report, you need to ensure your OData Service provides
filterable fields. Default Search fields can also be assigned to the default keyword search option of the UI.
You will also add explicit search fields to the filter area of the UI.
Explanation
18. Open the data definition
ZS4H_C_SLSORDER_TP
to add some full blown
search capabilities to our
SAP Fiori App
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
19. Add the @Search
@Search.searchable: true
annotation to the header
and to the SalesOrder and
Customer fields.
20. Save and activate and
refresh the SAP Fiori
Elements app and you’ll
get a Search field out of
the box.
21. Search for example for 501
and you’ll get only results
for this search pattern.
75
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
22. Last step is to add a so
called Selection Field to the
SAP Fiori Elements App to
get a well-known “F4” help
23. Open source
ZS4H_E_SLSORDER_TP
24. Add the
@UI.selectionField
annotation to the fields
SalesOrder
Customer
25. Save and activate the
Metadata Extension
and refresh the SAP Fiori
Elements App
76
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
26. You’ll see two new full
functional F4 helps
Please feel free to play around
77
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
78
F. CREATE ACTIONS, DETERMINATIONS AND VALIDATIONS
Introduction
Your application is currently fully functional for read-only use cases. But now, let’s come to the real challenge:
Imagine you want to delete a sales order or sales order item entity or create a new one. This is covered in the
following exercise.
You will enhance your application to a so-called CUD service – i.e. Create, Update and Delete enabled. With
only a few @ObjectModel annotations, you will get an automatically generated and fully functional Business
Object Processing Framework (BOPF) business object (in short: BO). BOPF will already provide you with basic
functionality and business logic encapsulation. With additional annotations, you’ll be also able to control the
input fields, e.g. mark them as mandatory or as read-only fields.
Keep the data model in mind: It contains a root node (i.e. sales order) and a sub-node (i.e. sales order item).
It's important to represent the same in your BO.
At the end of this chapter your SAP Fiori Elements application will look like displayed in the screenshot below.
The create and delete operations are marked by the red box.
List Report
Object Page (editable)
In this exercise, you'll:
•
Generate a BOPF business object for the CUD processing
•
Mark some fields as mandatory or write protected (i.e. read-only)
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
79
Step 1 – Foreign Key Association – Sales Order Header – Interface View
You will use foreign key associations to provide:
• Text descriptions of codes
• Value helps
Explanation
Screenshot
1. Open source
ZS4H_I_SLSORDER_TP
2. Add the
@ObjectModel.foreign
Key.association
annotation to the fields
Customer
OverallStatus
3. Save and activate the Data
Definition
and refresh the SAP Fiori
Elements app
Step 2 – Foreign Key Association – Sales Order Item – Interface View
You will use foreign key associations to provide:
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
•
•
80
Text descriptions of codes
Value helps
Explanation
4. Open source
ZS4H_I_SLSORDERITE
M_TP
5. Add the
@ObjectModel.foreign
Key.association
annotation to the fields
Product
Currency
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
81
6. Save and activate the Data
Definition
Switch to your browser
and refresh the SAP Fiori
Elements App
Step 3 – Transactional Processing - Sales Order Header Interface View
Now you will associate a business object with your Sales Order Header to add transactional processing capability.
Explanation
Screenshot
7. Open source
ZS4H_I_SLSORDER_TP
8. Add the following
annotation to the header
of the Data Definition:
@ObjectModel:{
modelCategory: #BUSINESS_OBJECT,
semanticKey: ['SalesOrder'],
transactionalProcessingEnabled: true,
compositionRoot: true,
@ObjectModel:{
...
}
createEnabled: true,
deleteEnabled: true,
updateEnabled: true,
writeActivePersistence: 'ZS4H_SO'
}
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
9. Add the annotation
@ObjectModel.associa
tion.type
to the association
_Item
82
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
83
10. Add the annotation
@ObjectModel.readOnl
y: true
to the fields
SalesOrderUUID
SalesOrder
and the annotation
@ObjectModel.mandato
ry: true
to the field
Customer
Please do NOT activate the source yet!
We must first annotate the Sales Order Item Data Definition and activate them together because we
have a parent – child relationship.
Step 4 – Transactional Processing - Sales Order Item Interface View
You will add the capability to create, update, and delete the Sales Order Items when creating, editing, or deleting the
Sales Order Header.
Explanation
11. Open source
ZS4H_I_SLSORDERITE
M_TP
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
12. Add the following
annotation to the header
of the Data Definition:
@ObjectModel:{
...
}
13. Add the annotation
@ObjectModel.readOnl
y: true
to the fields
SalesOrderItemUUID
SalesOrderUUID
CurrencyCode
GrossAmount
@ObjectModel.mandato
ry: true
to the field
Product
@ObjectModel.associa
tion.type
to the association
_SalesOrder
@ObjectModel: {
semanticKey: [ 'SalesOrderItem' ],
transactionalProcessingEnabled: true,
createEnabled: true,
deleteEnabled: true,
updateEnabled: true,
writeActivePersistence: 'ZS4H_SOI'
}
84
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
14. Now Activate
both data definitions
S4H_I_SlsOrder_TP
S4H_I_SlsOrderItem_
TP
15. Make sure that both
checkboxes are selected
and press activate
85
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
16. Refresh
17. the Project Explorer view
18. Open the generated BOPF
object.
19. Please feel free to conquer
the BOPF object
86
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
87
Step 5 – Transactional Processing – Sales Order Header Consumption View
Now that the Interface View supports transactional processing, you can expose these transactional capabilities as part
of your Sales Order OData Service.
Explanation
Screenshot
20. Open source
ZS4H_C_SLSORDER_TP
21. Add the following
annotation to the header
of the Data Definition:
@ObjectModel:{
...
}
@ObjectModel: {
semanticKey:
['SalesOrder'],
transactionalProcessingDelegated: true,
compositionRoot: true,
createEnabled: true,
deleteEnabled: true,
updateEnabled: true
}
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
88
22. Add the annotation
@ObjectModel.associa
tion.type
to the association
_Item
Please do NOT activate the source yet!
We must first annotate the Sales Order Item Data Definition and activate them together because we
have a parent – child relationship.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
89
Step 6 – Transactional Processing – Sales Order Item Consumption View
You will expose the transactional capabilities for the Sales Order Items as well as for the Sales Order Header.
Because of the association between Sales Order Header and Sales Order Items, these will also be exposed as part of
your Sales Order OData Service.
Explanation
Screenshot
23. Open source
ZS4H_C_SLSORDERITE
M_TP
24. Add the following
annotation to the header
of the Data Definition:
@ObjectModel:{
...
}
@ObjectModel:{
semanticKey:['SalesOrder', 'SalesOrderItem'],
transactionalProcessingDelegated: true,
createEnabled: true,
deleteEnabled: true,
updateEnabled: true
}
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
25. Add the annotation
@ObjectModel.readOnl
y: true
to the field
SalesOrderItem
and the annotation
@ObjectModel.associa
tion.type
to the association
_SalesOrder
26. Now Activate
both data definitions
S4H_C_SLSORDER_TP
S4H_C_SLSORDERITEM
_TP
90
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
27. Make sure that both
checkboxes are selected
and press activate.
28. Switch back to your SAP
Fiori Elements App and
reload the page.
You now added
transactional behavior to
your app.
29. Congratulations ☺
30. If you navigate you will
also get an Edit button
enabled.
91
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Please feel free to edit any
instance or create a new
instance.
But be careful: Your SAP
Fiori Elements application
is not yet fully working.
If you create a new object
You will see that e.g. the sales
order number is not
calculated.
92
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
93
Also the Sales Order Item ID
and the amount is missing and
you are able to enter a
negative quantity
So let’s fix these issue by implementing some Actions, Determinations and Validations
upon our BOPF object.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
94
Step 7 – Implement a determination to calculate the Sales Order ID
You will automatically determine the Sales Order ID of any new Sales Order that is created via the Fiori elements app.
Explanation
31. Open your BOPF object
ZS4H_I_SLSORDER_TP
And navigate to the ROOT
node …
32. … further to the
Determinations
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
33. Press New to create a New
Determination and rename
the class accordingly to
ZCL_S4H_D_CREATE_SO
_ID
34. Navigate to the
Determination
35. Make sure that only
“Create” is selected
95
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
36. Press “New” to create the
ABAP class for your
determination
37. Your class is created and
opened in the editor.
96
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
38. Now let’s implement the
BOPF determination.
Call the
io_read->retrieve
to get the node instance
data.
39. Implement a simple select
statement to calculate the
next available sales order
number.
40. Loop over the internal
table, Increase the sales
order id, assign it to the
instance and update the
result into the BOPF
framework.
Please refer to the Coding App to get the code snippets!
97
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
41. Save and activate
the ABAP class and the
BOPF object
42. Navigate back to your
browser, refresh your SAP
Fiori Elements app and
create a new Sales Order
and save it.
Result: the sales order id is
generated
98
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
99
Step 8 – Implement a determination to calculate the Sales Order Item id
You will automatically determine the Sales Order Item ID of any new Sales Order Item that is created via the Fiori
elements app.
Explanation
43. Open your BOPF object
ZS4H_I_SLSORDER_TP
and go to the nodes of the
BO
44. Navigate further the to
ZS4H_I_SLSORDERITEM
_TP
Note: If using Mac you need
to press COMMAND key
to activate the link
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
45. Go to the Determinations
and create a new
Determination
46. Press New to create a New
Determination and rename
the class accordingly to
ZCL_S4H_D_CREATE_IT
EM_ID
47. Navigate to the triggers
100
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
48. Make sure that only
“Create” is selected.
49. Press “New” to create the
ABAP class for your
determination
101
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
50. Your class is created and
opened in the editor.
51. Now let’s implement the
BOPF determination.
Call the
io_read->retrieve
to get the node instance
data.
102
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
52. Implement a simple select
statement to calculate the
next available sales order
number.
Loop over the internal
table, Increase the sales
order item id, assign it to
the instance, assign the
line item to sales order
header and update the
result into the BOPF
framework.
Please refer to the Coding App to get the code snippets!
53. Save and activate
the ABAP class and the
BOPF object
54. Navigate back to your
browser, refresh your SAP
Fiori Elements app and
create a new Sales Order
Item and save it.
Result: the sales order item
id is generated
103
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
104
Step 9 – Implement a determination to Calculate the Sales Order Item Amount
You will automatically determine the Amount of any new or changed Sales Order Item by multiplying the quantity by the
price. .
Explanation
55. Open your BOPF object
ZS4H_I_SLSORDER_TP
and go to the nodes of the
BO
56. Navigate further the to
ZS4H_I_SLSORDERITE
M_TP
Note: If using Mac you need
to press COMMAND key to
activate the link
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
57. Go to the Determinations
58. Press New to create a New
Determination
59. Rename the class
accordingly to
ZCL_S4H_D_CALC_AMO
UNT
and press Finish.
60. Navigate to the triggers
105
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
61. Make sure that the
“Create” and the “Update“
are selected.
Why? We have to
recalculate the amount in
case the quantity is
changed.
62. Press “New” to create the
ABAP class for your
determination
63. Your class is created and
opened in the editor.
106
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
64. Now let’s implement the
BOPF determination.
Call the
io_read->retrieve
to get the node instance
data.
65. Implement a select to get
all products.
Loop over the internal
table, calculate the price
and update the result into
the BOPF framework.
Please refer to the Coding App to get the code snippets!
107
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
66. Save and activate
the ABAP class and the
BOPF object.
67. Navigate back to your
browser, refresh your SAP
Fiori Elements app and
update a Sales Order Item
and save it.
Result: the amount is
calculated
108
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
109
Step 10 – Implement a Validation to check sales order item quantity
You will validate that the quantity entered by the user is a positive quantity. A negative quantity might not make much
sense on a Sales Order!
Explanation
68. Open your BOPF object
ZS4H_I_SLSORDER_TP
and go to the nodes of the
BO
69. Navigate further the to
ZS4H_I_SLSORDERITE
M_TP
Note: If using Mac you need
to press COMMAND key to
activate the link
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
70. Go to the Validations
71. Press New to create a New
Validation
Rename the class
accordingly to
ZCL_S4H_D_POSITIVE
QTY
and press Finish.
72. Navigate to the triggers
73. Make sure that the
“Create” and the “Update“
are selected.
Why? We have to check
the it if the quantity is
changed.
110
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
74. Press “New” to create the
ABAP class for your
determination
75. Your class is created and
opened in the editor.
76. Now let’s implement the
BOPF validation.
Call the
io_read->retrieve
to get the node instance
data.
Loop over the sales order
items and raise a message
if the quantity is negative.
111
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Please refer to the Coding App to get the code snippets!
77. Save and activate
the ABAP class and the
BOPF object
78. Navigate back to your
browser, refresh your SAP
Fiori Elements app and
enter a negative quantity.
Result: You will receive an
error message.
112
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
113
Step 11 – Implement a custom action to set a Sales Order to Delivered status
You will create a custom action to release the Sales Order. You will add this action as a global action button on your
List Report. Global actions appear just above the List Report and can act on no, 1 or many rows of the List.
Explanation
79. Open your BOPF object
ZS4H_I_SLSORDER_TP
And navigate to the ROOT
node …
80. … further to the Actions
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
81. And create a new Action
82. Enter a name and
description and rename
the class accordingly to
ZCL_S4H_A_SET_TO_DE
LIVERED
and press Finish.
83. Navigate to the action
Note: If using Mac you need
to press COMMAND key to
activate the link
114
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
84. Enter the following
properties:
Instance Multiplicity
Single Node
Instance
Implementation Class
ZCL_S4H_A_SET_TO_D
ELIVERED
Exporting Type: Node
Exporting Parameter BO
ZS4H_I_SLSORDER_TP
Exporting Parameter Node
ZS4H_I_SLSORDER_TP
Exporting Multiplicity: 1
85. Press “New” to create the
ABAP class to implement
the business logic for the
BOPF action.
115
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
86. Your class is created and
opened in the editor.
87. Now let’s implement the
BOPF action.
Call the
io_read->retrieve
to get the node instance
data.
88. Loop over the internal
table and set the delivery
status to “DELIVERED” and
update the result into the
BOPF framework with the
io_modify->update.
116
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
Please refer to the Coding App to get the code snippets!
89. Save and activate
the ABAP class and the
BOPF object
117
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
118
Step 12 – Implement the Action as a Global Action of your List Report using the Metadata Extension
You will add the “Set to Delivered” action as a global action button on your List Report. Global actions appear just
above the List Report and can act on no, 1 or many rows of the List.
Explanation
90. Open your Metadata
Extension
ZS4H279_E_SLSORDER
_TP
91. Add an action into the
@UI.lineItem annotation
92. type: #FOR_ACTION,
dataAction:
'BOPF:SET_TO_DELIVERED',
label: 'Set to
Delivered'
93. Navigate back to your
browser, refresh your SAP
Fiori Elements app.
Result: you will an action
on the List Page.
Execute the action and the
overall status will be
changed to delivered.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
119
Congratulation! You now have a full-blown transactional application.
You have just learned how to add and trigger application logic using determinations, validations and
actions, and how to add the button to the UI.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
120
G. ADD DRAFT CAPABILITIES TO YOUR APPLICATION
Introduction
Looking back at the previous exercise, your application has grown to a fully transactional one.
But consider following situation: Most online shops support that shopping carts and orders are saved in all
stages, so that end-users can resume them at a later time. To achieve this, they store a so-called draft state.
Unfortunately, a sales order in your application must have all fields already filled out to be saved correctly.
Also, you might not want to trigger the processes, which are executed when you save your sales order
already.
Now you'll learn how to enhance your application to support draft capabilities. Like the shopping card, you'll
be then able to keep an inconsistent state of your sales orders (and items) and process them later (also from
other devices).
Another aspect that comes along with the draft enablement is that your draft is locked by you.
This chapter will teach you how to enable the draft feature in your transactional application.
In this exercise, you’ll:
•
•
enable the draft capabilities in your SAP Fiori Elements application
Adjust your custom ABAP logic for the draft handling
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
121
Step 1 – Draft Enabling - Sales Order Header Interface Views
You will add draft capability to the Sales Order Header Interface View.
Explanation
94. Open Data Definition
ZS4H_I_SLSORDER_TP
95. Add the annotation
draftEnabled: true
writeDraftPersistence:
'ZS4H_SODRFT_999'
within the header
@ObjectModel area
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
122
Do NOT activate the source!
We first need to adjust the Sales Order Item Interface view and activate it together.
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
123
Step 2 – Draft Enabling - Sales Order Item Interface Views
Explanation
96. Open Data Definition
ZS4H_I_SLSORDERITE
M_TP
97. Add annotation
writeDraftPersistence:
'ZS4H_SOIDRFT_999'
within the header
@ObjectModel area
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
98. Activate now both data
definitions
99. Refresh the Project
Explorer View and you will
find the generated Draft
Tables.
124
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
125
Step 3 – Draft Enabling - Sales Order Header Consumption Views
Explanation
100.
Open Data Definition
ZS4H_C_SLSORDER_TP
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
101.
Add annotation
draftEnabled: true
within the header
@ObjectModel area
102. Save and activate the
data definition.
126
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
127
Step 4 – Draft Enabling – Determination – Create Sales Order ID
Explanation
103.
Open ABAP class
ZCL_S4H_D_CREATE_S
O_ID
104. Comment the select
statement or you can of
course change the existing
one.
Implement a Common
Table Expression (CTE) and
select all sales order from
the sales order table and
union from the draft table
and implement a OpenSQL
to get the MAX sales order
id from the result set.
105. Save and activate your
source.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
128
Step 5 – Draft Enabling – Determination – Create Sales Order Item ID
Explanation
106.
Open ABAP class
ZCL_S4H_D_CREATE_I
TEM_ID
107. Adjust the loop group
by statement and add the
group by
isactiveentity =
ls_group_itemisactiveentity
108. Comment the select
statement (of course you
can also adjust it) and
implement an if-statement
to consider the
isactiveentity to distinguish
if you are in a Draft node
or not.
Based on that either select
from the sales order table
or from the draft table.
109.
Save and activate
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
129
the source.
Step 6 – Draft Enabling – Validation – Calculate Amount
Explanation
110.
Open the ABAP class
ZCL_S4H_V_POSITIVE
_QTY
111. Adjust the coding to
whether the message is of
type lifetime or of type
transition.
112.
Save and activate
the source.
Screenshot
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
113. Refresh your SAP Fiori
Elements application and
you are done
Congratulations!
You made it!
You built an SAP Fiori Elements Application with
transactional and draft capabilities from scratch
130
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
H. ADDITIONAL INFORMATION
Documentation
About ABAP Programming Model for SAP Fiori in the online SAP Help portal:
https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.51.2/enUS/3b77569ca8ee4226bdab4fcebd6f6ea6.html
About ABAP Programming Model for SAP Fiori in the ABAP Development Tools in Eclipse:
Select ADT menu Help > Help Contents. The Help will open and you can find all related content and E2E
Guides under SAP About ABAP Programming Model for SAP Fiori.
Detailed information about BOPF and about CDS is also available in the documentation.
About CDS Views: ABAP CDS Development User Guide
About BOPF: BOPF Development User Guide
About SAPUI5 and SAP Fiori Elements: Developing apps with SAP Fiori Elements
About SAP Web IDE: SAP Web IDE Developer Guide | SAP Web IDE Personal Edition
SAP Community Links
Getting started with ABAP Programming Model for SAP Fiori:
https://blogs.sap.com/2016/04/04/getting-started-abap-programming-model/
131
5Steps2FIORI: ABAP for SAP HANA with SAP FIORI
About SAP NW EPM data model: http://scn.sap.com/docs/DOC-31458
Useful ADT shortcuts
https://blogs.sap.com/2012/07/02/adt-quick-reference-card/
132