openSAP

Developing and Extending SAP Fiori Elements

Apps
Week 1 Unit 1

00:00:06 Hello and welcome to week one, unit one, of our openSAP course Developing and Extending
SAP Fiori Elements Apps.
00:00:13 My name is Stefanie Hager and I'm a product manager for SAP Fiori elements and SAP Fiori
tools.
00:00:19 And I'm Peter Spielvogel, another product manager for SAP Fiori elements and SAP Fiori
tools.
00:00:26 Together, Stefanie and I will give you an introduction to Fiori elements in this unit. Over the
next four weeks, you will learn how to create
00:00:34 an SAP Fiori elements app and also how to extend a standard SAP Fiori app. In week one,
we'll cover some foundational material, such as the architecture,
00:00:45 and we'll explain how OData services power your SAP Fiori elements apps. In weeks two and
three we will build several different types of apps
00:00:54 and will use a variety of tools. The intent here is to cover most of the technologies
00:00:59 that you will encounter during your development projects. Week four is then dedicated to
extending a standard SAP Fiori app using SAPUI5 flexibility.
00:01:11 This introduction will now focus on weeks one to three, week four will be introduced later. Now,
this is a development course, so obviously it's for developers,
00:01:22 but it's also for anyone who's interested in learning how easy it can be to build an SAP Fiori
elements app.
00:01:30 So we will build several different types of apps together and we have some optional exercises
where we encourage you to follow along with us.
00:01:39 The exercises also contain some additional material because we simply couldn't cover all the
great stuff we want to show you in the lectures.
00:01:47 So the apps that we are going to build are for our travel desk clerk, Jay. And Jay needs to
manage his travels and his bookings.
00:01:55 And he can get an overview of his most important business data using the travel overview.
00:02:00 From here he can navigate to the travel list and further to the travel details. And he can also
analyze his bookings using the bookings analysis app.
00:02:09 You'll build one additional app outside the travel scenario, that's the foods and beverages app.

00:02:14 And here we will use an external OData service, so one that's not connecting to an SAP back
end.
00:02:22 To give you a short overview of what you can expect, I'll do a quick demo in a sneak preview
style
00:02:28 to show you the finished apps that we will build together in this course. This is Jay's travel
overview.
00:02:37 His most important business data has been summarized using cards. So, for instance, you
have some analytics information here.
00:02:44 You have a list with his most important quick links. And via this list card, he can see at a
glance which travels need his attention.
00:02:52 That's the ones that are coming up soon and that have not yet been approved. By clicking on
the header of this card, he can also navigate to the travel list.
00:03:02 The travel list is based on our floor plan list report, and we provide a lot of functionality out of
the box,
00:03:10 for instance, variant management, or generic search capabilities, or table personalization.
00:03:20 The filter fields in the table columns are provided by the app developer by means of metadata.
You can also navigate to the travel details page,
00:03:30 that's again standard SAP Fiori elements functionality. And also this floorplan, based on object
page,
00:03:38 provides a lot of stuff out of the box, in particular added capabilities, including travel
management.
00:03:47 This map that you see here is an SAPUI5 geo map control. That is something we don't support
in standard SAP Fiori elements.
00:03:56 So you will also learn how to enhance your app beyond what we offer out of the box. I had
mentioned the that Jay can also analyze his bookings via the booking analysis app.
00:04:09 And this is based on the floorplan type analytical list page, and this provides additional
analytics capabilities for slicing and dicing the data.
00:04:19 In particular, these interactive charts here and the visual filters. So much for the quick demo,
00:04:27 now Peter will explain the technologies behind user experience consistency and also why user
experience consistency is so important.
00:04:39 Thanks, Stefanie. Your demo showed the value of SAP Fiori elements
00:04:43 to deliver a consistent experience across all the apps. UX consistency is very important to SAP

00:04:50 because we hear this from customers and partners at user group meetings, SAP conferences,
and in e-mails that you send us.
00:04:59 For this reason, UX consistency is a board-level priority, as you can see in this quote from
Thomas Saueressig
00:05:07 that is pulled from a blog he posted on LinkedIn. Our development efforts are focused on
delivering a consistent user experience.
00:05:16 SAP Fiori elements plays a major role in this. It's one of the main tools we use for building
apps for SAP S/4HANA.
00:05:24 If you use Fiori elements, the apps that you build will look and feel the same as the ones that
we ship.
00:05:32 Let's talk a little bit more about why consistent user experience is so important. One of the
challenges of enterprise-scale development
00:05:41 is getting all your developers to follow the same user experience standards. UX consistency
includes the fonts and colors, the layout of information on the screen,
00:05:52 and all the interaction patterns. A great UX delivers measurable benefits,
00:05:58 which is why this is such an important topic for SAP. At the heart of a great user experience is
consistency.
00:06:06 A great UX means people love your app. There's little more frustrating than writing an app that
no one uses.
00:06:14 Knowing where to find the information in your screen and how to navigate through the app
makes people more confident and more productive using it.
00:06:23 Consistency promotes a rapid learning curve for users as they already know where to click and
how the menus work.
00:06:30 Simple and consistent screens also mean that people make fewer errors so that data is
cleaner in the system.
00:06:37 The sum of all these measurable benefits means your users will be much happier using the
apps that you build them.
00:06:44 Using Fiori elements gives you all these things, along with keeping development and
maintenance costs in check.

2
00:06:51 That is why we rely on it so much internally. SAP Fiori elements uses SAPUI5 technology.
00:07:02 This is a modern Web framework that makes it easy to create a cross-platform apps with a
single code line.
00:07:09 Using SAPUI5 for your Web apps has several key advantages. It gives you the SAP Fiori
experience today
00:07:17 and as the designed system evolves. It includes built-in support for SAP's enterprise-grade
product standards
00:07:24 such as security, integration, and accessibility. Since SAPUI5 is a Web-based technology,
00:07:33 it runs on all platforms, browsers, and devices. So you can write once and have both desktop
and mobile apps.
00:07:42 It also gives you the ability, using SAPUI5 flexibility, to extend SAP standard applications and
customize the UI without any coding.
00:07:52 We'll talk more about the advantages of SAPUI5 in the next unit on architecture. The final
week of the course is focused exclusively
00:08:01 on using SAPUI5 flexibility to extend a standard app. At this point, you've seen some SAP Fiori
apps in the demo
00:08:12 and learned a little bit about SAPUI5 technology that powers Fiori elements. So what exactly is
SAP Fiori elements?
00:08:22 SAP Fiori elements is a UI library that provides several standard floorplans. SAP Fiori
elements uses metadata so you can create Fiori apps with minimal coding.
00:08:34 Metadata determines the appearance and behavior of your app. This metadata-driven
approach has several key benefits.
00:08:43 You start with enterprise-ready code that is engineered to perform in a variety of common
layouts.
00:08:49 This low-code approach boosts your development efficiency since you focus only on the
business logic
00:08:56 and don't need to write anything for the user interface. The floor plans already contain Fiori
design,
00:09:03 so everything looks consistent across all the apps that you write. Since SAP provides the UI,
we also maintain that.
00:09:12 As the Fiori design evolves, your Fiori elements apps can inherit these updates.
00:09:18 Now Stefanie will discuss the different floorplans. Developer productivity is boosted
significantly by providing standard floorplans.
00:09:28 Most scenarios in the enterprise involve some variation of providing an overview on business
relevant data,
00:09:34 various types of lists of this data, and managing the data. And the five SAP Fiori elements
floorplans were designed
00:09:41 to cover the majority of these use cases. Overview pages provide an overview on the data for
a certain business area or role.
00:09:50 They are also the jumping off point for a business process, like when we jumped from the
travel overview to the travel list.
00:09:58 The travel list was based on the floorplan list report. And this is made for filtering and sorting a
large set of items
00:10:08 and also allows the user to navigate to an object page to provide further details on a specific
item. There's also two variations of the list report,
00:10:19 this analytical list page with additional analytics capabilities, so the charts and the visual filters
you saw in the booking analysis app earlier,
00:10:28 and there is the worklist, which is optimized for processing the list of tasks. This one we won't
have time to cover in this course.
00:10:39 Apps built using SAP Fiori elements are automatically enterprise-ready apps. Our framework
provides high quality, stable, optimized UI code out of the box.

3
00:10:51 And that means a lot of complex UI code that you don't have to write, test, or maintain. Now,
you heard earlier that also SAPUI5 freestyle gives you the ability
00:11:05 to write enterprise-ready apps. Now, which approach to use for which use case?
00:11:11 Can you please take us through that decision process? Of course.
00:11:17 Both SAP Fiori elements and SAPUI5 freestyle development are great methods for creating
SAP Fiori apps.
00:11:25 The approach that's best for you depends on your situation and unique business needs. So
how do you decide when to use which?
00:11:34 The quick answer is that with Fiori elements, you're exchanging flexibility for efficiency.
00:11:40 If you're in a situation where your needs are mostly covered by the SAP floorplans, you can
use SAP Fiori elements to build your applications efficiently.
00:11:50 You are responsible for the annotations, but the UI, including the logic, is already handled by
SAP.
00:11:57 This streamlined process reduces the time and cost of development and maintenance. If
you're in a scenario that's not covered by these floorplans
00:12:07 or extending them would be too time consuming, SAPUI5 freestyle development is likely to be
a better choice for you.
00:12:15 While you'll be fully responsible for the GUI development, you have complete flexibility with
your designs.
00:12:22 Obviously, this leads to higher development and maintenance costs. In this course, we'll give
you everything you need
00:12:29 to build SAP Fiori elements apps with confidence. There are separate openSAP courses for
SAPUI5 freestyle development.
00:12:40 Again, in the final week, you'll use SAPUI5 flexibility to modify a standard app. I hope you're
excited to join us on this journey to develop several SAP Fiori elements apps.
00:12:55 In this unit, we talked about why a consistent user experience is good for your business. We
covered how the combination of SAPUI5 and SAP Fiori elements drives
00:13:05 developer productivity, UX consistency, and building enterprise grade apps at scale. Finally,
we discussed when SAP Fiori elements makes sense
00:13:15 and when it might be better to go with an SAPUI5 freestyle approach. In the next unit, we'll talk
about the architecture
00:13:24 and how all the different underlying technologies combine to power SAP Fiori elements.

4
Week 1 Unit 2

00:00:04 Welcome to week one, unit two, of our openSAP course, Understanding the Architecture.
00:00:10 My name is Marcel Waechter and I am a development architect. Today I will talk about the
architecture behind Fiori elements.
00:00:17 Let’s get started. The most important thing you need to know is that
00:00:24 SAP Fiori elements generates the application you see at runtime by combining five building
blocks.
00:00:30 The first one is a floorplan, like an analytical list page or an object page. This one is provided
by the Fiori elements framework.
00:00:39 It takes care of how content is displayed and how the application behaves. The second and
third ones are to be provided by you,
00:00:47 an OData service and OData annotations. With both, you define what content is displayed on
the screen.
00:00:54 So there is no longer a need to code the UI with JavaScript. Instead, you provide an abstract
description of the semantics and the behavior.
00:01:04 This means you can now focus on the business functionality, how it behaves, and how it
should be consumed.
00:01:10 Of course, we also provide flexibility if you want to change behaviors or introduce additional
controls.
00:01:16 There are two optional means of adopting and enhancing the application, no-code
configuration and custom code extensions.
00:01:23 I will now explain to you those five building blocks in more detail. Let’s start with the floorplans
provided by the framework.
00:01:34 You could imagine a floorplan like a blueprint. It has many placeholders for controls,
00:01:39 like for a filter bar and filter fields inside, or a table with columns inside. And it also describes
all the possible behaviors.
00:01:47 So, for example, what happens if the user clicks on a table row. He could navigate to a detail
page,
00:01:54 or he could navigate to an external application. Once your application is started, the Fiori
elements processor kicks in,
00:02:01 and with the metadata and configuration provided by you, it turns this blueprint into a real UI5
view.
00:02:08 Having the place holders replaced by actual controls. The floorplans and the controls contain
many features.
00:02:16 To give you some examples, the user can personalize the controls and can create different
variants.
00:02:22 Or they can share or bookmark pages. Or they can use Excel export and import.
00:02:29 And as long as your service supports it, users can also change data, or can create or delete
entries, or they can trigger actions.
00:02:39 The floorplans are also responsive, which means depending on your device or screen size, we
show different content.
00:02:46 There’s one last important thing to mention, the full support of product standards.
00:02:51 As long as your application doesn’t contain code extensions, your application is enterprise
ready out of the box
00:02:59 which means a huge saving of costs. Now have a look at the building blocks you need to
provide.
00:03:07 The first thing every SAP Fiori elements app needs is an OData endpoint. So, what is OData?

5
00:03:14 OData is a protocol that sits on top of standard HTTP and defines how you exchange data with
the back end.
00:03:22 It contains a meta description of your data model. It describes your model in entities and
properties and the relationship between them.
00:03:30 OData supports not only the so-called CRUD operations, which stands for create, read,
update, and delete,
00:03:38 but also actions and functions. And it has a powerful built-in query language.
00:03:43 This one allows clients to query optimized read requests, and to filter data or to search data.
00:03:51 And also to aggregate data. And with capabilities and restrictions,
00:03:57 it tells the client about the supported operations but also about the ones which are currently
restricted.
00:04:05 On top of the standardized OData, SAP built the draft concept, which is also fully supported by
Fiori elements.
00:04:13 With draft, you can build professional and dynamic applications with features like you can keep
a draft and can continue later
00:04:21 or you can switch to a different device. There are currently two major versions available, which
are supported by Fiori elements,
00:04:30 V2 and V4. V4 is the evolution of V2 and it not only contains new features
00:04:37 but it also is an ISO approved OASIS standard. While Fiori elements take advantages of
OData V4,
00:04:44 we take care to keep the patterns and layout stable and consistent with both versions. OData
also allows you to annotate metadata.
00:04:56 And this is really cool, because if you annotate metadata, you describe how the data is to be
interpreted.
00:05:03 I want to give you some examples. With annotations, you can specify
00:05:08 that an amount field and a currency field belong together. Or that a field does not contain only
a string, but it's actually an e-mail address.
00:05:16 Based on this annotation, the framework knows how to render the field. Annotations can also
define the behavior,
00:05:24 for example whether a business object is editable or not. And they can give consumption hints
like if a field is clickable or not.
00:05:36 You might ask yourself how to create an OData service and how to provide annotations. First
of all, I want to emphasize that Fiori elements works with
00:05:45 every compliant OData service, which can be provided by any back end. But if you can, use
the power of SAP’s back ends
00:05:53 and create an OData service with a few clicks only. Both the Cloud Application Programming
Model, called CAP,
00:06:00 and the Restful Application Programming Model, called RAP, provide an auto-exposure from
your CDS view to an OData service.
00:06:08 Both stacks allow you to annotate your model in CDS directly next to its definition. But also
with the classic ABAP programming model
00:06:17 you can still create OData services with SAP Gateway and annotation provider classes. If
annotations are part of the OData service, we talk about back-end-driven annotations.
00:06:30 Nevertheless, back-end annotations are optional. You could also provide all annotations in
local annotations file.
00:06:38 Or you can provide both. The local annotations will then override the back- end annotations on
a term level.
00:06:46 Those local annotations are created in your application project and follow your application
lifecycle.

6
00:06:53 You can use them to implement features that are not yet supported by your back-end version
or if you want to implement different variants of an application with one common OData
service.
00:07:04 Or you make usage of an OData service provider that couldn’t provide annotations at all.
00:07:13 As you learned, the floorplans make use of your metadata and annotations to decide which
controls are to be rendered.
00:07:21 But not only this, they also consider configuration that can be, optionally, provided by you.
00:07:29 I want to give you one example. In the list report we show a table.
00:07:33 And as you might know, we have a few tables in UI5 implemented for different use cases. But
according to our current UX design, we use the responsive table.
00:07:44 That’s what you get once you generate and start the application the first time. But if you decide
that another table would be the better choice,
00:07:53 you can provide this configuration to your list report page, which you can easily do with Fiori
tools.
00:08:00 We have many of those configuration settings. They are not treated as semantical,
00:08:05 and they are tied to this specific application. So that’s why they are not stored as annotations
but as configuration.
00:08:14 We even provide a so-called layering for this configuration. So let’s imagine you decided to
change the table to a grid table,
00:08:22 but one user group runs your application on a tablet or on a mobile, on which the responsive
table works better.
00:08:30 The administrator or key user can then switch it back to a responsive table. I already
mentioned, Fiori elements provides a huge set of UI patterns and features
00:08:44 which are commonly used and are fit for most use cases. But for sure, Fiori elements as a
framework can’t provide every kind of
00:08:52 behavior and design as a built-in feature. To not stop you from using Fiori elements,
00:08:58 code extensions allow you to write your own code and inject it into Fiori elements applications.

00:09:04 This can be your own controls added in certain place, so, to give you some examples, a new
section in the object page,
00:09:11 or a new column in the table, or new actions into any toolbar. By using building blocks that are
provided by SAP Fiori elements,
00:09:20 like the field or the table, you can rapidly build your extensions while still keeping a consistent
look and feel.
00:09:29 But you won't have the full flexibility to add controls at every place in the UI. This ensures your
custom content is still available in case of layout changes
00:09:40 due to SAP Fiori design evolutions. And it doesn’t break the UI after an upgrade.
00:09:47 The same also applies to code, which can run at certain hooks, for example whenever the user
attempts to save a document.
00:09:55 In those hooks, we provide you a so-called ExtensionAPI with a set of methods you can use in
your custom coding,
00:10:03 for example to get a list of selected items in a table. Please note, extensions also come at a
cost.
00:10:11 You own the code you have to ensure functional correctness and UX consistency, especially
after upgrades.
00:10:19 And you have to fulfil all product standards. We are nearing the end of this presentation
00:10:28 so let me summarize and give you an outlook on the next sessions to learn more about SAP
Fiori elements and tools.
00:10:35 You learned about the building blocks that are required to build an enterprise-ready application
with Fiori elements.

7
00:10:43 The floorplans, which are provided by the framework, define how content is shown and
behaves .
00:10:50 An OData service and annotations, which are to be provided by you, define what is shown and
which feature shall be enabled.
00:10:58 Optionally, you can fine tune your application with configuration or can even extend it with
custom code.
00:11:06 In the next session, you will get more insight into OData services and annotations. Thanks for
joining.

8
Week 1 Unit 3

00:00:04 Welcome to unit three of week one, Introducing OData Services and Annotations.
00:00:09 My name is Stefan Engelhardt and I am a development architect for SAP Fiori elements. In the
previous unit, Marcel already briefly introduced OData.
00:00:20 Most importantly, every SAP Fiori elements app needs an OData endpoint. The back-end
stack doesn’t matter, as OData fully abstracts it.
00:00:30 I will now dig a bit deeper and explain the essential parts of an OData service. Let’s begin with
the meta description of the data model.
00:00:40 Every OData service has a meta description of the data model. On the right you see an
example of it.
00:00:47 You can see the meta description when you take the root URL of an OData service and
append $metadata.
00:00:53 At the bottom here is a link to a full metadata document. The meta description defines the
entities and its properties.
00:01:03 In the OData V4 example on the right, you can see among others it defines persons. The
persons have properties like UserName, FirstName, and so on.
00:01:14 The properties also got further qualified, for example with their data type, for example
Edm.String, if they are nullable or if they have a max length.
00:01:25 Relations to other entities are specified as navigation properties. They have a name, and the
type indicates the cardinality and target.
00:01:35 The trips navigation property relates to the trips entity and that there can be many, as it’s a
collection.
00:01:42 Additionally, the meta description can contain things like definitions of complex types, actions,
singletons, and many more.
00:01:53 Marcel told you already in the last unit, that OData supports CRUD operations. Let’s have a
look at some examples.
00:02:00 I will use the OData Web site for it. Here you can see HTTP requests to an OData service and
their responses.
00:02:15 The first scenario is to retrieve all "People". “People” is of type “Person”, from which we saw
the meta description before.
00:02:24 The response contains all the corresponding data sets. The first result in the list is Russell
Whyte.
00:02:35 You can also ask for a specific person by adding their key, like in step two here. The key
"russellwhyte" was added in brackets
00:02:44 and in the response you can see it only returned this one person. In step three, there is a more
complex query.
00:02:56 First, I only want to get the first two entries with $top and only get back the first and last name
by using $select.
00:03:06 The result should be filtered by persons who have a relation to at least one trip that costs more
than 3,000.
00:03:13 As you can see, you can create complex queries quite flexibly. When I want to create a new
person like in step four,
00:03:26 I do a POST request with the person's data in the body. The response returns an HTTP 201 as
it was successful.
00:03:41 To improve the user experience, SAP defined a standardized way of working with draft
versions of documents.
00:03:48 For the user it has some benefits, like that the editing can be interrupted and resumed later.
Only when the user has completed the editing will it be saved to the original data base tables.

9
00:04:00 In SAP Fiori elements, drafts are automatically saved whenever users add or change
information in the edit state.
00:04:08 The response of this auto-save request can include, for example, messages, for example that
a sold-to party is not maintained for a sales area.
00:04:18 Also it’s possible, for example, when the sold-to party gets changed, the response contains all
its data like address and contact information to show it on the UI.
00:04:29 So the draft pattern enables dynamic interaction patterns. Note, that draft handling should be
implemented using a framework
00:04:37 that supports that out of the box. Implementing the whole draft choreography on your own
would be quite a big effort.
00:04:48 Marcel also introduced OData annotations. As a recap, they can define behavioral aspects and
give consumption hints.
00:04:56 I will now explain to you how it works and show you some examples to explain it in more detail.
OData Annotations are additional metadata, exposed as XML
00:05:09 and are defined in vocabularies from OData and SAP. They are abstract enough so that they
are long living
00:05:17 and can be interpreted by everyone, not only by SAPUI5. SAP Fiori elements understands the
annotations
00:05:25 and generates the UI based on them. Let’s have a look at a concrete example.
00:05:31 You may have recognized the total price in the travel app. There is an ISOCurrency annotation
defined in the measures vocabulary of OData.
00:05:41 The "TotalPrice" got annotated with this annotation which points to the "CurrencyCode" field.
00:05:46 So it’s now machine readable, that "TotalPrice" is an amount and "CurrencyCode" contains the
currency.
00:05:53 SAP Fiori elements then always shows the currency next to the price. This information is also
leveraged to show decimals according to the currency
00:06:03 and that amounts are correctly aligned in tables. But annotations can also define more
complex UI elements.
00:06:15 These can be, for example, tables, with the UI.LineItem annotation, forms, with the
UI.FieldGroup annotation,
00:06:23 and charts, with the UI.Chart annotation. Furthermore, annotations can describe behavioral
aspects of the application.
00:06:35 One example is the availability of the create/edit/delete functionality. With an annotation, it can
be specified that the travel entity can be edited.
00:06:46 SAP Fiori elements then shows an Edit button on the UI. Similar to that, also other actions can
be enabled/disabled or shown/hidden.
00:06:57 Another use case is the definition of side-effects. For example, when a price on an item table
gets changed,
00:07:04 the UI needs to request the new total price of the header entity from the back end. SAP Fiori
elements apps can be built using back-end annotations,
00:07:18 either in ABAP CDS or CAP CDS. Alternatively, you can use local XML annotations.
00:07:24 It does not matter to the UI whether you use back-end or local annotations. The annotations in
CDS views get translated to XML annotations
00:07:34 by the corresponding back ends and the UI then always consumes the XML format. XML
annotations can be used with any back end,
00:07:43 for example, SAP back ends leveraging previous ABAP programming models, SAP Business
Warehouse, or non-SAP back ends.
00:07:52 On the right, you can see an example of ABAP CDS annotations. Your preferred tooling can
affect your choice of annotation type.
00:08:04 In SAP Fiori tools, you can use the guided development, which assists you to create the right
annotations for your use case.

10
00:08:12 Both XML and CAP CDS annotations are supported by SAP Fiori tools. If you work in ABAP
Development Tools,
00:08:20 you can maintain the annotations directly in ABAP CDS. Lifecycle management and feature
availability
00:08:32 can also influence your choice of annotation type. XML annotations in the UI project follow the
lifecycle of your app.
00:08:41 CDS annotations follow the lifecycle of your OData service. If you are implementing on an old
ABAP version
00:08:49 some annotations might not be available in ABAP CDS. If in doubt, check the documentation.
00:08:57 Let’s wrap up this unit. We covered the essentials of an OData service,
00:09:02 its meta data description, what requests look like, and what the draft pattern is. Also you
learned what annotations are, how they affect your app,
00:09:11 and how you can define them. Now you can look forward to the next unit, in which I will show
you
00:09:17 how you set up your development environment for the hands-on part.

11
Week 1 Unit 4

00:00:04 Welcome to unit four of week one, Preparing your ABAP Development Environment.
00:00:11 In this course, we will use the ABAP environment on SAP Business Technology Platform, in
short, BTP.
00:00:18 The reason for this is that the majority of OData services for SAP Fiori elements apps get
created on an ABAP stack.
00:00:26 We use SAP BTP as it’s very easy to set up an ABAP environment. Also, you're always
working on the latest version of ABAP platform,
00:00:36 which gives you access to the latest features and improvements. One of the cool new features
is the ABAP RESTful Application Programming Model,
00:00:45 in short RAP, which was already mentioned by Marcel in unit two. It makes it very easy to
create OData services for OData V2 and V4.
00:00:55 If the system landscape has a lower release, there's still the ABAP Programming Model for
SAP Fiori available,
00:01:01 which already offers the creation of OData services with CDS views. If you are on a release
version 7.4 or lower,
00:01:11 you can use classic ABAP programming to expose OData services. But it comes with
significant higher efforts.
00:01:19 If your system landscape doesn’t allow you to use RAP, ABAP environment on SAP BTP
might be a great alternative for you.
00:01:27 Apart from RAP you can also use Cloud Application Programming Model, in short CAP, in SAP
BTP, which also makes it easy to create powerful OData services.
00:01:40 If you don't have an SAP BTP trial account yet, the first step is to create one. Then, if not done
yet, use the booster to set up the ABAP environment.
00:01:51 Please mind that the trial environment is for educational purposes only, not for productive
usage.
00:01:57 Also, the lifetime is limited. Trial users share the same back-end system
00:02:02 and there is no content separation between different users. Let me show you now how you can
use SAP BTP trial and the booster
00:02:13 to set up the ABAP environment if you haven't set it up before. If you don't have an SAP BTP
trial account yet,
00:02:22 you can click here to create one for free. I already registered before, so I can directly log on.

00:02:40 On the welcome page, I click on Enter Your Trial Account. The ABAP environment we need
can be easily set up using a booster.
00:02:54 To use it, I simply need to click Start at the tile Prepare an Account for ABAP Trial. When the
provisioning is finished, I click on Go to Service Key.
00:03:18 This key is needed when I later add the system to the ABAP Development Tools, in short ADT.
In this course, we will use ABAP CDS annotations
00:03:37 for the list report object page exercise. To maintain them you need ADT on your machine
00:03:41 and ADT needs to be connected to SAP BTP ABAP environment. On this page you can find all
the required information
00:03:50 to install and run ADT on your machine. First, make sure you meet the prerequisites with
regards to Java,
00:03:58 and if you're using Windows, the Microsoft VC runtime. Now I go through the installation
procedure.
00:04:08 The first step is to download Eclipse. I already did this and opened it.
00:04:12 The next step is to install ADT in Eclipse. To do so, I take the URL from step three.

12
00:04:25 I choose Help, Install New Software, I click here Add, enter name, for example ADT, and paste
a URL.
00:04:41 I tick the check box for ABAP Development Tools and click Next. Again, I click Next, I accept
the terms,
00:04:54 and click Finish. I accept the certificate.
00:05:10 When the installation process is complete, I need to restart Eclipse. I switch now to the ABAP
perspective.
00:05:22 I go to Window, Perspective, Open Perspective, Other,
00:05:29 and I choose ABAP. Then I click on Create an ABAP Cloud Project.
00:05:40 I select Service Key and click Next. Now I need to go back to SAP BTP Trial.
00:05:52 I copy the service key and paste it into the text area.
00:05:59 I click Next. Now you need to authenticate.
00:06:05 Click on Open in Browser. If you get asked for credentials it's the SAP BTP travel credentials
00:06:13 I go back to Eclipse, I click Next and Finish.
00:06:22 Now, ADT is connected to ABAP environment on SAP BTP Trial. To wrap it up now,
00:06:32 you learned how to set up ABAP environment on SAP BTP Trial. Also how to install ADT and
connect to the ABAP environment.
00:06:41 In the next unit, you will use ADT to generate the required OData services for the exercises in
just a few seconds.

13
Week 1 Unit 5

00:00:04 Welcome to unit five of week one, Creating an OData Service with ABAP RESTful Application
Programming Model.
00:00:12 Before we generate the OData services, I will briefly explain to you the important underlying
RAP artifacts.
00:00:19 I will start from the bottom. The data is stored in database tables.
00:00:24 On top we define the data model. The CDS-based data model describes the business object to
be exposed,
00:00:31 its fields, its relations, and its behavior. The projection is an ABAP-native approach to project
and to alias
00:00:39 a subset of the business objects for a specific business service. The projection enables flexible
service consumption
00:00:47 as well as role-based service designs. For large chunks of annotations, usually metadata
extensions are used.
00:00:56 The service definition describes which CDS entities of a data model are to be exposed so that
a specific business service,
00:01:04 for example to deal with travels, can be enabled. It is an ABAP Repository object that
describes the consumer-specific
00:01:12 but protocol-agnostic perspective on a data model. The service binding is used to bind a
service definition
00:01:20 to a client-server communication protocol such as OData. RAP can expose both OData V2
and V4 services.
00:01:33 As this openSAP course focuses on SAP Fiori elements and not the creation of the OData
service,
00:01:40 a generator was developed for the course, which creates all the required RAP artifacts for you.

00:01:46 You can then use this OData service and enhance it. However, if you’re interested in how to
build such an OData service from scratch using RAP,
00:01:56 check out the openSAP course Building Apps with the ABAP RESTful Application
Programming Model.
00:02:05 We will build or generate the OData services for the travel-related apps in this unit. You will get
an OData V2 service,
00:02:14 which will be used for the travel overview and the booking analysis. Second, an OData V4
service, which also will be used for the travel overview.
00:02:24 You can use more than one OData service there. The OData V4 service will also power the
travel list and details app.
00:02:36 So I’m back in Eclipse. The first thing I do is to open the console view.
00:02:41 I click on Window, Show View, Other, and choose Console. You can see it here at the bottom.

00:02:56 Next up I open the generator class. I choose Navigate, Open ABAP Development Object.
00:03:07 The generator class is called /dmo/cl_fe_travel_generator. I right-click in the code editor
window and choose Run As, ABAP Application (Console).
00:03:34 It takes a little over a minute until the generation is completed. Once the generation is done,
you can see it in the console.
00:03:46 In the output, you can also find your personal package name. This needs to be added to the
favorite packages so that you can remember it.
00:03:56 To do so, I copy the package name and click on Favorite Packages, Add Package, and paste
the package name, and click OK.

14
00:04:19 When you have a look at the contents of the package, you can see the artifacts I mentioned
earlier,
00:04:27 the database tables, the CDS views, the service definitions, and the service bindings. The last
thing is to publish the OData services.
00:04:44 I start with the V2 service and click on Publish. Publish is completed, now I do the same for the
V4 service.
00:04:55 I open the service binding and click Publish. And that’s it.
00:05:05 In this unit, you learned the important ABAP artifacts that are used in our RAP-based services.

00:05:11 Also, you generated the two OData services that you will use in the next units.
00:05:17 This week ends in the next unit with the definition of the annotations for the list report.

15
Week 1 Unit 6

00:00:03 Welcome to week one, unit six, of our openSAP course, Creating a List Report.
00:00:09 In this unit, I will use ABAP CDS annotations and the list report floorplan to create our first SAP
Fiori elements app.
00:00:18 A list report allows users to view and work on a large set of items. It offers powerful features
for finding and acting on relevant data sets.
00:00:29 And typically, users can navigate from an item in the list to more item details, which are then
shown on an object page.
00:00:37 And the object page we will cover in the next unit. Let's take a quick look at the key features of
the list report.
00:00:45 Here's an overview for your reference. However, I will cover these features by showing you a
real list report app
00:00:54 from an SAP S/4HANA cloud system. This app allows the purchaser to view
00:01:01 and work with a large set of requests for quotations, RFQs. The header contains the filter bar
00:01:07 with several selection fields that the app developer has created via annotations. Also, the
value helps can be provided with standard SAP Fiori elements functionality.
00:01:19 Variant management is available out of the box so users can store custom views. The filter bar
is expanded initially,
00:01:27 but when I scroll down, it collapses to make best use of the screen size. The user can also pin
the filter bar if he doesn't want it to collapse.
00:01:38 The table toolbar contains the title with a number of items in parentheses on the very left and
on the right, we have the standard export functionality as well as table personalization
00:01:50 to let the user decide which columns he wants to see, how they should be sorted and grouped.

00:01:56 There are also the standard create and delete actions, and there can be app-specific actions,
like here, this Copy action.
00:02:05 But this is optional, of course. The table that we're using here is a responsive table,
00:02:13 but the list report supports also other table types, like, for example, the grid table. So much for
the quick introduction of the list report floorplan,
00:02:24 let's now do a quick recap of the technical artifacts that we need to build the list report.
00:02:32 In the last unit, we briefly covered these RAP artifacts, which are required to generate an
OData service.
00:02:39 In this unit, we will maintain the ABAP CDS annotations, that define the content of our list
report.
00:02:48 Most of them will be defined in the CDS metadata extension, we call it the MDE. And MDEs
allow us to keep UI-related annotations in one place and also to layer them.
00:03:02 Some annotations will also be maintained in the CDS data model projection view, which we
will refer to as the projection view or the C view going forward.
00:03:12 That's predominantly labels or value helps that we want to reuse in multiple pages. So I hope
you're all excited about actually building our first SAP Fiori elements app.
00:03:27 In this unit, we will build the travel list. And we will use the OData V4 service that we generated
in the last unit
00:03:34 and enhance it with meta data. I'm back in ADT where you left off in the previous unit.
00:03:41 ADT offers a preview for a list report generated based on our OData service. Simply select the
entity you want your list to be based on and click on the Preview button.
00:03:54 This is what a skeleton SAP Fiori elements list report looks like when no annotations have
been provided to populate it with content.
00:04:02 Even without any coding, you already have the standard UI functionality provided by our
framework.

16
00:04:08 But now we want content, and for that we need the metadata extension file where we can
create our annotations.
00:04:17 Find the travel projection view and via the context menu, trigger the metadata extension
creation wizard.
00:04:26 The name should be the same as that of the projection view. You need to provide a
description,
00:04:33 a transport request should already be assigned. And if it isn't, you select one.
00:04:40 And in the newly created MDE, the first thing you need to do is to specify the metadata.layer
00:04:49 and we want to set it to #CORE. MDEs support a layering concept, which allows a partner or
customer
00:04:55 to overwrite or complement UI-related annotations. The layer determines the priority of the
metadata.
00:05:02 #CORE has the lowest and #CUSTOMER has the highest priority. Next, we want to add
columns to the table using line item annotations.
00:05:16 Within the curly brackets, trigger code completion with Ctrl + Space on Windows or Cmd +
Space on Mac.
00:05:23 And now you can either choose to insert all available fields from the projection view or you can
choose to insert a specific field.
00:05:32 I will insert the travel ID. Now comes my annotation.
00:05:39 I start typing "@UI" and trigger the code completion again to find the line item annotation. I
need to specify the position,
00:05:53 because the position determines where on my table this column shall be placed. And we go
from left to right with ascending numbers.
00:06:03 And typically this is done in increments of ten. I can format with Shift + F1 on Windows
00:06:10 and I activate with Ctrl + F3 or Cmd + F3 on Mac. After refreshing my preview, I have my first
column in my list report table.
00:06:26 Now there's another eight columns that I want for my final list report. So I go back to my MDE.

00:06:34 Now, I just need to repeat that same process eight more times, and I have prepared a code
snippet for this.
00:06:48 So now I have added the other columns, I activate again. And after refresh, my list report
shows all the columns I want to have.
00:07:04 Next, I want to have some additional selection fields. So again, I need an annotation, this time
the UI selection field annotation.
00:07:16 The fields I want to have are the agency, the customer, and the overall status. So again, code
completion helps me complete the syntax properly.
00:07:29 I again have to specify the position. And because I have to repeat this three times, I used copy
and paste.
00:07:49 I activate again. And now my list report has three additional selection fields.
00:08:07 Next step is to get a title for my table. The annotation for my title is the "headerInfo
typeNamePlural" annotation,
00:08:21 and it's maintained above the annotate view statement. And I want my table to be called
"Travels".
00:08:42 I activate. And now my table has a title with the number of items in parentheses.
00:08:58 But the data in my table doesn't look very nice yet. Instead of plain IDs, I want the names or
the descriptions,
00:09:07 combined with the IDs, which should be displayed in parentheses. I also want better labels and
this I will do on a global level
00:09:16 so that the labels can also be applied to the object page. Both of these are done in the
projection view for the travel.

17
00:09:28 So I open it. And I find the "TravelId" field.
00:09:36 The annotation I need to get the label in is the "EndUserText.label" annotation. And I want to
call this field "Travel".
00:09:47 Now, to get the description in, I need the "ObjectModel.text.element" annotation. And I will use
the field description.
00:10:03 Now, I want to repeat the same thing for the agency. First, the "EndUserText.label" annotation
for the column heading,
00:10:13 which shall be "Agency". Now to get the agency name in,
00:10:18 I first have to pull the field agency name into my projection view. And now I can maintain the
corresponding "ObjectModel.text.element" annotation
00:10:44 and use that new field "AgencyName". Now, I'll do the same thing for the customer,
00:10:53 and I will also add the labels for all the other columns, again via a code snippet. So now I have
the "EndUserText.label" annotations for all my columns,
00:11:05 and I've also added the "ObjectModel.text.element" annotation for the customer, so it displays
the name in the columns.
00:11:13 I activate. And after refreshing my preview, I now have decent labels for my column headers
00:11:34 and I also see the agency names and the description for the travel in my data. One thing that's
missing is the semantic key.
00:11:45 The semantic key identifies an item in the list uniquely, and in my case that semantic key is the
travel ID
00:11:53 and I want this to be highlighted in bold and this can be done with the semantic key annotation.
So back in my travel projection view, I navigate to the very top.
00:12:06 And here I add the "ObjectModel.semanticKey" annotation. And my semantic key is the travel
ID.
00:12:17 Activate again. And after refreshing, my semantic key is in bold.
00:12:36 Okay, quite a bit better. But let's go back to my filter bar and let's take a look at the value
helps.
00:12:44 The agency has a pretty good value help, it's being pulled from the CDS data model for the
agency.
00:12:52 But when I look at the customer, that value help is not much use. Same for the status.
00:12:59 So let's fix that. Back in my projection view,
00:13:05 I can see that for the agency, I have maintained this "valuehelpdefinition" annotation and it
points to the agency table.
00:13:14 And I need the same thing for the customer and also for the status. When I now activate again

00:13:39 and my preview has refreshed, my customer value help is now also useful.
00:13:47 Let's see if it works. Okay, that already looks good.
00:13:53 Let's apply it and see, great, only travel items for the customer Benz are being shown. What
about the status?
00:14:06 Status seems to also have worked, but actually, I don't want this pop-up. I much rather want to
have a dropdown list.
00:14:14 So let's fix that too. A dropdown list for the status value help
00:14:25 can be achieved by telling the CDS view of the status that this is a limited result set. So we
need to find the CDS view for the status, that's here.
00:14:38 And now we need to add that "ObjectModel.resultSet.sizeCategory" annotation.
00:14:49 "resultSet.sizeCategory". That's it, and we need to set it to extra small.
00:14:56 All right, let's activate. And after I have refreshed, I now have a nice dropdown list for my
status value help.
00:15:20 Okay, now our list report already looks pretty good, but the status field here, that still needs a
couple of improvements.

18
00:15:28 First, it should be populated with the status text. So, for example, it should say "open" instead
of "O".
00:15:35 And, well, it's a status, so I also want semantic coloring.
00:15:39 Let's first start with a status text. So we again need that "ObjectModel.text.element" annotation
00:15:45 in the trial projection view that you've already seen before. It's the same syntax that you
already saw when we annotated the customer ID field.
00:16:00 I'm back in my travel entity projection view. And I need to repeat that ObjectModel.text.element
annotation,
00:16:08 but before I can do that, I first need to pull the status text into the projection view again.
00:16:13 And this... Underscore... can be done again by using the content assistant.
00:16:25 And I will call this "StatusText". And now I can add my "ObjectModel.text.element" annotation
00:16:45 with the field "StatusText". I activate.
00:17:04 And after I have refreshed, I can now see the status value with the status text displayed and
the code is still in parentheses.
00:17:12 Now let's get rid of that code in parentheses as well. And this I again do in the travel MDE.
00:17:20 So I'm back in my travel MDE and I need to specify the "@UI.textArrangement: #TEXT_ONLY"
annotation for the overall status.
00:17:43 After activation and refresh, the status field now shows text only. All right, last thing, we want
the color coding.
00:17:52 Now this requires three steps. It requires that we add a field that stores the criticality for the
color coding
00:17:58 based on the status value. And this needs to be done in the travel CDS view
00:18:03 and because it's in the CDS view, we also need to regenerate the draft tables.
00:18:08 Then this field needs to be added to the projection view. Now I've already prepared these two
steps for you,
00:18:14 but of course the exercises will give you the detailed descriptions. So here I'm in the CDS data
model for the travel entity,
00:18:25 and I have added the new field "OverallStatusCriticality" based on the overall status value.
00:18:34 And in the projection view, I have added the "OverallStatusCriticality" field. So now I can use it
in my MDE, and if I enhance the UI line item annotation
00:18:46 for the overall status with the criticality, and I can now, of course use my
"OverallStatusCriticality" field and I activate.
00:19:01 Let's go back to the preview. And voila, now the status has a nice color coding.
00:19:18 So we have completed building our first SAP Fiori elements floorplan, and we did this without a
single line of JavaScript.
00:19:30 But before we wrap up, I want to show you how you can look up more details in our
documentation.
00:19:36 The best entry point to learn more about a specific SAP Fiori elements floorplan is via the
interactive infographics.
00:19:43 You can hover over the different parts of the infographic, and when you click on the highlighted
area, you navigate to more details.
00:19:53 So here you can find information on adapting the filter bar. And when I scroll down, I can find
the XML annotation syntax
00:20:02 or also the ABAP CDS annotation syntax or even the CAP CDS annotation syntax. Note that
providing ABAP and CAP CDS syntax is currently still a work in progress.
00:20:16 Let me do a quick recap. In this unit you learned when to use a list report and also how it is
structured.
00:20:23 Furthermore, you learned how to create a list report using ABAP CDS annotations. See you in
the next unit where we will build the corresponding object page.

19
www.sap.com/contactsap

© 2021 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary softwar e components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality
mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliate d 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 e xpectations. Readers are
cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. See www.sap.com/trademark for additional trademark information and notices.