-
openSAP Build Your Own SAP Fiori App in the Cloud
WEEK 3, UNIT 1
00:00:13 Hello again and welcome to Unit 1 in Week 3 of Build
Your Own Fiori App in the Cloud.
00:00:17 In this session we'll talk about the Anatomy of SAP
Fiori Transaction Applications. We'll try to
dissect a Fiori application and understand exactly how it's
built.
00:00:28 This will help you understand not only how to use Fiori
applications but how to better design
them
00:00:33 and definitely how to better build them, so they have
much the same look and feel as well as
the same behavior as any other Fiori application.
00:00:43 There are very strict guidelines on how Fiori
applications should be built and they are all
documented online,
00:00:48 and I'll show you later where you can find the latest
information on how to design and build
those applications.
00:00:56 In Week 1 of this course you already played with
several Fiori applications. So we are already
familiar with the two main design layouts that we have:
00:01:04 The Master Detail layout and the Full Screen layout.
Those are the most common layouts that
we have.
00:01:10 From time to time we can see other layouts but they are
quite rare, so I assume or we can
safely assume that most applications that you are going to
built
00:01:19 are going to match either the Master Detail or the Full
Screen. If we look at those two layouts,
we see that there is much communality between the two.
00:01:27 On the top part of the screen of both layouts we have
the page header. The page header, the
top header is coming from the launchpad itself.
00:01:36 It usually contains the search engine, the log-in or
the user management and the Home button.
00:01:43 Below that top header we have the actual application
header. In a Full Screen application the
header is from side to side,
00:01:53 and in the Master Detail application we have actually
two headers, one for the list of value and
one for the detail area.
00:02:00 In the middle of the application, usually where all the
action is happening, we have a place for
the floorplan.
00:02:08 A floorplan is a design template, and most people who
are familiar with WebDynpro
applications are familiar with floorplans.
00:02:17 It is the design template for applications that
represent a specific task. We are trying to make
sure that we are doing repeatable actions in a similar way.
00:02:25 So, if I need to create a business object, I need to
edit a business object, I want to remove a
business object, I can do it in a similar way
-
2
00:02:33 and have a similar layout of the graphical elements on
the screen. Those layouts are the
floorplans, and I'll show you that in a second.
00:02:41 If we look at the Master Detail template in slightly
more detail, you see that at the top, as I
mentioned, we have the Launchpad Header.
00:02:48 Below that we have two separate headers: The Master
List Header on the left side and the
Details Header on the right side.
00:02:57 Under the Details Header we have the actual application
content or the floorplan itself.
00:03:01 And under the Master List Header we can usually find
another search engine for the
application itself which is different from the search engine we
have on the top,
00:03:11 and the actual list of value. At the bottom part of the
application we'll find the footer.
00:03:18 The footer can also be split into two, depending on the
template. If it's a Master Detail, we
have actually two footers, if it's a Full Screen, we have
one.
00:03:27 If we look at some of the floorplans that we can see,
they represent different activities that the
user might want to do inside the application.
00:03:38 We have a floorplan for the creation of a page, for the
editing of a page or an business
element. We have a floorplan of list,
00:03:46 we have a floorplan that actually shows all the
information about an object and that specific
floorplan has two versions:
00:03:53 One with several tabs and one that we called a flat
object view that actually shows all the
elements on one screen that you can scroll in order to get more
information.
00:04:02 Those floorplans can actually behave differently if we
show them on a tablet, a desktop, and
mobile.
00:04:11 Usually when we have tablet and desktop screens, you
can see both, the list of value on the
left side and the floorplan on the right side.
00:04:21 But if we switch to a mobile view and on a small screen
of a mobile device, I can't actually
show both, the list of the values and actually floorplan.
00:04:30 And then the floorplan actually fills the screen. I
will have the list of value on one screen, and
once I click on an item, I will have the details with the
floorplan shown on the next screen.
00:04:43 I can always go back using the back arrow. So, how do I
actually use the application on
navigating the application?
00:04:53 In order to navigate in a Fiori application we are
using the header. The header appears always
on the top part of the screen
00:05:02 and is used primarily for navigation and for some user
information. The header can actually
change depending of the level of drill-down
00:05:11 I'm doing as a user inside the application. The top
level of the header is coming from the
launchpad and includes the search field as well as my company
logo,
00:05:20 the user log-in and log-out and things like that. Once
I start to work with the application, I click
on an item in the list or I click on something in the
floorplan,
00:05:32 I'm actually drilling down and getting more and more
data. Then the header changes. The
header provides me with navigation elements:
-
3
00:05:40 I have a back arrow, if I want to go back one level. I
can have paging arrows if I want to see
more information that I need to scroll down.
00:05:49 And if I'm having a Master Detail element, I might have
a split header in which I have one
arrow that takes me back to the launchpad
00:05:58 and one arrow that takes me back one level from a
detail screen back to the list of value, and I
will show you a demo of that later.
00:06:08 At the bottom part of the screen we have the footer.
The footer is not used for navigation like
the header, but the footer is used to trigger all kind of
activities.
00:06:19 In other words, that's where I'm going to put my
buttons. If I have an action button, I want to
approve, I want to reject, I want to go, I want to see more
information,
00:06:28 I want to aggregate content, I want to filter content -
all those activity buttons appear in the
footer. They should not appear anywhere else in the
application.
00:06:37 The footer, like the header, can have different looks
depending if I'm running it on a mobile
device or if I'm using a different layout.
00:06:46 In a Master Detail, like the header, the footer might
be split. But, in other cases I will try to
make sure that in the footer
00:06:55 the user should be able to always find the most
appropriate and relevant buttons for the
activity that they are trying to achieve at that specific
moment.
00:07:04 If I have too many buttons in the footer, I can put
them in an overflow menu, and then the user
can press on that and see the list of buttons.
00:07:20 It's not always a good idea to have too many buttons.
We are trying to make the Fiori
applications as simple as possible.
00:07:26 So, try to make sure that you don't have too many
buttons in the footer of the Fiori app. If you
do find yourself in a case like that, either think again:
00:07:36 Is that the right design? Or put it inside the menu.
Another important graphical element that
we've seen in many Fiori applications are tabs.
00:07:45 If I have a lot of information that I need to
distribute across multiple pages, I can put them in
different tabs and the users just click on different tabs
00:07:55 to get more and more information. Tabs can also be used
to create a process. If I have several
steps that need to be fulfilled in a certain order, I can also
represent them with tabs.
00:08:06 And in this case I usually put arrows between the tabs
to show the user that you need to move
from this tab to this tab to that tab in a certain
direction.
00:08:16 Tabs have a different look and feel. I can create tabs
in different colors, trying to represent
semantic meaning somehow,
00:08:26 like blue for information, red for activities that
still needs to be fulfilled, green for activities that
were successfully fulfilled.
00:08:34 I can do it all in one color if I want to match my
brand color or things like that. It's up to you to
do it, and everything is allowed if you want to change and play
with the color.
00:08:43 But try to make sure that it makes some sense if you
play with colors there.
00:08:51 Part of the floorplan is usually a form. And forms are
very important. If you are familiar with
-
4
SAP applications, most of them are either tables or forms.
00:09:00 So, when we look at those forms, we are trying to make
sure that they are simple and that the
same form layout is used over and over again in a repeated
way.
00:09:09 And that's why we have those floorplans, which in many
cases represent different layouts of
forms. A form can have one column, forms can have two
columns.
00:09:17 If you have more information, you can create a
multi-form that you can scroll down. But try to
make sure that you don't have 200 input fields in one form.
00:09:25 Because that is usually not a Fiori application.
Another important and very interesting graphical
element that we have in Fiori is the responsive table.
00:09:37 Responsive tables, and as I mentioned, most of the
information we present is either in form or
table. Responsive table is a graphical element
00:09:46 that enables me to show information in a tabular way.
But I can also configure the table and
decide what happens when the screen size changes.
00:09:58 So, if the user is actually reducing the screen size or
if that specific table is going to be
presented once on a tablet and once on a mobile device,
00:10:07 I can decide that either certain columns in the tables
are going to disappear or that the
information is going to appear in one cell.
00:10:16 Like what you see on the right side that actually I can
stack the information into one cell and
show all that information. It's not really a tabular format,
00:10:25 but it's at least that the information is there. So,
the responsive table is a configurable graphical
element that enables you to create or present information
00:10:34 in a tabular way, that can also be adapted to different
screen sizes. And this is a very, very
useful UI control.
00:10:47 Buttons are also important. And as I mentioned, buttons
usually appear at the footer. We try to
stick to a certain color scheme here.
00:10:55 So if it is something that the user should press, it
should be in green. If it is something that the
user might not want to press or it is something negative,
00:11:03 like you want to reject an action or disapprove
something, it is usually in red. And if I want to
get more information about something, than it is usually in
blue.
00:11:11 One exception is that we can sometimes have buttons
that are not in the footer when I want to
switch between different views in a calendar.
00:11:21 I can have a calendar of a year, a month and a day.
That can be inside the floorplan and not at
the footer. And usually I want to have them as informative
buttons,
00:11:32 and then they should appear in blue. You can play with
the colors, but try to make sure that
you have a consistent experience that the user can actually
guess
00:11:41 what to do with each and every button. And of course,
if we are mentioning color, try to make
sure that the colors match the overall look and feel
00:11:52 of either your brand or the Fiori look and feel out of
the box. We are trying to avoid very bright
colors, neon colors, something that might be distracting.
00:12:02 We want to make sure that the overall look and feel is
professional, is easy on the eye. We are
-
5
using lots of white, light shades of blue, light shades of
grey.
00:11:12 So, try to keep to that color scheme. And if you want
to change the color scheme, try to make
it, again, something that is very easy to consume
00:12:21 and not something that is actually too chillful and too
gamy if we can say that, to make sure
that we actually match the look and feel of other Fiori
applications.
00:12:31 So, let's try and look at some Fiori applications and
see how these come to action. I'll start with
looking at the Fiori Demo Cloud Edition.
00:12:41 And here we can actually look at certain applications.
Let's start from My Benefits application.
And My Benefits application is a very simple application,
00:12:50 but you can identify immediately that this is a Master
Detail layout. I have a list of value on the
left side, and when I click on a certain value,
00:13:00 I have the details of that specific item appear on the
right side. So this is the most simple
template that I have.
00:13:09 I can see that I have a back button, back arrow button
here and that takes me back to the
launchpad.
00:13:18 Let's look at the Leave Request. The Leave Request is a
different template. The Leave
Request is a Full Screen.
00:13:22 So, I don't have a list of value on the right side. I
still have the back button or back arrow that
takes me back to the launchpad,
00:13:31 and if we look at that application, I can see that we
have a toolbar. In this case in the toolbar I
don't have a search field input,
00:13:40 because this is a demo system. But I still have the
Home button, I still have the user menu. So,
that is something that we have in every Fiori app.
00:13:50 Let's go back to the home screen and look at the
Approved Purchase Orders. The Approved
Purchase Orders is another Master Detail application,
00:14:00 but it's slightly more complex than My Benefits. Here I
can actually go and look at different
purchase orders and look at different items that they have in a
purchase order.
00:14:11 I have tabs that show me more information about a
specific purchase order. But in each
purchase order, I have multiple items.
00:14:20 So when I click on a specific item, I have another
screen. So in this case, I will have a back
arrow, both on the detail section and on the Master section.
00:14:30 That arrow on the Master section will take me back to
the launchpad, while this one will
actually take me back one level.
00:14:38 Since I have multiple items here, I also have the
ability to switch between them with those
paging arrows. So this is another example.
00:14:46 And let's look at the last example the Order Form
Requisition. And in this case, this application
is another Full Screen application.
00:14:58 But in this application we can see several tabs with
arrows between them, because here I
have a process.
00:15:07 I need to start with the approval of the requisition,
then I need to assign the purchase
-
6
requisition, then I need to simulate the purchase order, then I
need to create a purchase order,
00:15:17 and those tabs need to be fulfilled in a certain order.
So I have several tabs that actually
represent a linear workflow that needs to be fulfilled.
00:15:28 If you want to learn more about the Fiori design, there
is an online site for the Fiori Design
Guidelines.
00:15:35 Here you can actually find all the information on the
Fiori Design Principles. You can actually
go and find information about typography for Fiori
applications,
00:15:46 about the different color schemes that we can use, the
different icons and any other
information that is related to the design,
00:15:52 as well as information about the different templates
and layouts that we have: How to plan the
Full Screen, how to use the Master Detail template,
00:16:01 how to use different graphical controls. That site is
constantly updated and I highly recommend
you, before you start designing an application or building an
app,
00:16:09 to go and look at the latest information to make sure
that you actually use the latest Fiori
design. Thank you.
-
7
WEEK 3, UNIT 2
00:00:11 Hello and welcome to Week 3 Unit 2 of the Build Your
Own SAP Fiori App in the Cloud.
00:00:18 Now, that you know what Fiori is all about, in this
unit I will introduce you to the SAP Web IDE,
which is the recommended tool of SAP to develop and extend Fiori
applications.
00:00:30 My name is Asi Messica and I'm a Product Manager for
SAP Web IDE.
00:00:37 Before getting into the details of the SAP Web IDE, I
would like to share with you the key
market trends that we took into account when planning the SAP
Web IDE.
00:00:48 By 2020 at least 70 % of new app development will
happen in the cloud. This is comparing to
less than 10 % today.
00:00:58 Additional key trends which are associated with these
trends are the collaboration between
developers, which is easier in the cloud,
00:01:09 the need for professional programmers to deliver the
applications faster and with less cost and
with less need for a complex infrastructure.
00:01:21 In addition, in order to reduce the cost and speed up
the delivery of applications, business
users and non-developers
00:01:32 will be empowered to develop with no coding simple
applications that do not require the
assistance of professional programmers.
00:01:41 All these trends we took into account in the vision and
the design of the SAP Web IDE.
00:01:50 You may have been familiar with different tools by SAP
to develop Fiori applications and
specifically UI for SAP applications.
00:02:00 The SAP Web IDE is a successor of all these products
and is the tool which SAP invested in
00:02:09 in order to simplify and accelerate the development of
UI for SAP applications. Our vision is to
speed up the development by reducing the effort.
00:02:22 And we do so by covering the end-to-end application
development lifecycle with one tool.
00:02:31 And when we refer to the end-to-end application
lifecycle development, we start from the
prototyping of the application,
00:02:40 then the development, the testing on the different
devices of course, the packaging and the
deployment into different application landscape
00:02:49 and then later on after we released the application,
also the extension of the application in
order to customize it
00:02:58 and make it suitable for the different scenarios and
customers.
00:03:07 So, what is the Web IDE in a nutshell? The Web IDE is a
web-based development tool which
is designed to simplify the end-to-end application
lifecycle,
00:03:18 and it is optimized for the development of SAPUI5 and
SAP Fiori applications. It is running on
SAP HANA Cloud Platform and SAP HANA.
00:03:31 For SAP HANA it's integrated into the HANA Web-Based
Development Workbench.
00:03:39 Having said that, the Web IDE is running on the HANA
Cloud Platform and the HANA
Development Workbench, but the deployment of the
applications
-
8
00:03:50 created with the Web IDE can be deployed to the
different SAP landscapes, like the HANA
Cloud Platform,
00:03:59 like the ABAB repository on premise, mobile devices and
more. Who are the target users for
the SAP Web IDE?
00:04:10 We target with the SAP Web IDE developers - both,
internal developers who are using the
SAP Web IDE to develop the Fiori applications and SAPUI5
application
00:04:21 as well as, of course, external developers we're
targeting to use the SAP Web IDE.
00:04:28 We also target non-developers with some WYSIWYG
capabilities, which we plan to improve
over time,
00:04:36 and in the future we also plan to target designers. How
often do we release the versions of the
SAP Web IDE?
00:04:47 Since the SAP Web IDE is a cloud product, we release a
new version on a monthly basis on
SAP HANA Cloud Platform.
00:04:58 With this release cycle you can enjoy the latest
innovation from the SAP Web IDE.
00:05:07 On the other hand for this course, you will see that
there is a gap between what we record,
what exactly we show now in the recordings,
00:05:20 and the actual product which you will use for your
exercises when the course will take place.
00:05:29 So, please take it into account and understand the
benefit for that. So, this is in a nutshell the
SAP Web IDE.
00:05:39 What are the key use cases where you can leverage the
SAP Web IDE? So, the first and most
relevant use case for this course
00:05:50 is the development of new Fiori applications and new
SAPUI5 applications. The second use
case is extending SAP Fiori applications.
00:06:03 SAP is investing a lot in order to make it easier for
the customers and partners to extend the
SAP applications and customize it to their own needs.
00:06:13 You can use the SAP Web IDE to develop SAPUI5 mobile
hybrid applications,
00:06:22 and the SAP Web IDE is building with an extensible
architecture which enables internal and
external developers to extend the SAP Web IDE with new plug-ins
and templates.
00:06:38 What are the benefits for you to use the Web IDE?
00:06:43 So in a nutshell, the benefit is really to reduce the
effort for the development of SAPUI5 and
Fiori application and extending the SAP Fiori applications.
00:07:00 You develop the application once, and then you can
deploy it on a different SAP landscape
and run it on any device, mobile, tablet or desktop.
00:07:10 You reduce the cost and complexity involved in setting
up the infrastructure for a development
environment with leveraging a cloud-based IDE.
00:07:22 You increase developer productivity by simplifying the
development process. Both things will
cover the whole application development process
00:07:33 from the development to the testing, the deployment and
the extension later on.
-
9
00:07:39 And we also invest on many rapid development tools,
like templates and the WYSIWYG editor,
which I'll present later during this course.
00:07:50 You improve the team productivity and the collaboration
with integrated GIT offering. What are
the key features of the SAP Web IDE?
00:08:05 I will not get into the details, we will get into the
detail in the next units and as we develop
some Fiori applications using the Web IDE.
00:08:17 But just a high-level overview of the key features: So
first of all, the SAP Web IDE is a
development environment
00:08:25 and it includes a source code editor with a
SAPUI5-specific code completions. One of the rules
of the SAP Web IDE is that code always comes first.
00:08:38 And with code you can do everything and change all the
automatically generated code that we
enable with templates and with WISYWIG editor.
00:08:49 So, the source code editor. We invest in the source
code editor and we provide a powerful
source code editor with specific SAPUI5 code completion.
00:09:01 We provide project persistency via integration with
GIT. We provide a layout editor with
WYSIWYG capabilities for non-developers
00:09:10 and also to accelerate the development of developers
who know the code but want to save
time and do some UI development with WYSIWYG.
00:09:25 The layout editor is, in this version of the recording,
1.7. It's still an experimental feature, but
we plan to release it for productive reasons.
00:09:35 Mock data support for testing purposes. So it provides
a mock data service for OData built in,
which you can use for testing during your development.
00:09:48 Instant preview in the browser with different screen
resolutions, powerful search capability,
interactive extension mechanism, especially for the SAP Fiori
applications.
00:10:02 But also other developers who develop the applications
according to the SAPUI5 extension
directions can leverage the extensibility capabilities of the
SAP Web IDE.
00:10:16 And you can import and deploy the applications you
develop with the Web IDE into the SAP
on-premise ABAP repository or HANA Cloud Platform.
00:10:27 In addition, as I mentioned, we invest a lot in
templates and extensibility in order to accelerate
the development process.
00:10:37 There are different templates that are provided out of
the box with the SAP Web IDE to
simplify the application development.
00:10:46 So, we provide many templates for SAP Fiori application
development like Master Detail,
Master Master Detail, Fact Sheet application creation and
more.
00:10:59 And we're continue adding templates, SAPUI5 application
templates for both, basic projects
but also mobile hybrid applications with Kapsel support.
00:11:14 We provide a template to develop Web IDE plug-ins and
templates, and there are different
SAP groups which extend the basic SAP Web IDE,
00:11:28 which we provide, with additional capabilities like
cloud portal template and visualization.
00:11:35 The extensibility, there are different options to
extend SAPUI5 applications in general and Fiori
-
10
applications specifically,
00:11:49 and here I list the different capabilities that you
have for extending the applications.
00:11:55 We will cover this the extensibility capabilities and
how to do it with the SAP Web IDE in the
next units of this course.
00:12:12 I would like to introduce you also to the different
plug-ins that we have in the SAP Web IDE,
which are provided by other SAP groups.
00:12:23 The first one is the Hybrid Application Toolkit, which
enables you to create, test and build
Apache Cordova hybrid applications
00:12:33 and using templates, code completions and all the rapid
development mechanism that we
provide for the other SAPUI5 and Fiori applications.
00:12:44 You have an OData Model Editor that enables you to
develop your own OData Model using
the OData Model Editor within the SAP Web IDE framework;
00:12:58 Fact Sheet to enable you to develop Fact Sheet
application; VizPacker to create visual
extensions for Analytics;
00:13:08 and the SAP HANA Cloud Portal , also a plug-in that
enables you to easily create an
OpenSocial widget for use in Cloud Portal sites.
00:13:20 Before we complete this unit, I would like to give you
a system context from a technical point of
view.
00:13:28 How is the SAP Web IDE related to the SAP environment?
So you see here, the SAP Web
IDE, as we said, it is running on the HANA Cloud Platform.
00:13:41 The architecture includes plug-ins and templates that
can come either from our group itself or
other SAP stakeholders and also external developers.
00:13:56 We rely on Orion, GIT and SAPUI5 and applications which
are developed with the SAP Web
IDE, either SAPUI5 applications
00:14:08 or Fioris applications, can be deployed to the
different SAP deployment landscape like HANA
Cloud Platform,
00:14:16 ABAP repository on-premise, mobile devices and, in the
future, additional SAP landscape like
SMP and more. Thank you.
-
11
WEEK 3, UNIT 3
00:00:11 Hello and welcome back. In this unit you will learn how
to access the SAP Web IDE from your
SAP HANA Cloud Platform free-trial account
00:00:22 and the capability it provides you through the
different phases of the end-to-end application
development process.
00:00:31 Before we start, this slide provides an overview of the
development process with the SAP Web
IDE.
00:00:40 So with the SAP Web IDE we the support two types of
project, either a new project or an
extensibility project,
00:00:49 which is an extension of an existing application
without changing the original code of the
application.
00:00:56 The extensibility concept is very powerful for changing
or customizing applications from SAP,
for example, but also internal applications or partner apps
00:01:11 and without changing the original code of the
application.
00:01:16 This can be useful when you want to upgrade later on
the application with new innovation and
with supportability of the original application.
00:01:28 The extensibility project is based on the SAPUI5
extensibility concept and SAP Web IDE
actually implements its principals within the IDE,
00:01:41 and it will be discussed in details during the later
weeks, Week 5 of this course.
00:01:50 So first we create the project, either a new project or
an extensibility project.
00:01:57 The next phase is the development. For development we
provide different capabilities.
00:02:04 The first one of course is coding. As we said, the SAP
Web IDE is intended for both,
professional the developers and rapid developers.
00:02:17 And for the cording we provide a powerful source code
editor with code completion, dynamic
API reference, and so on, specifically optimized for SAPUI5.
00:02:31 Then we provide different templates that you can
actually start the project with different
templates
00:02:39 that are provided either by SAP or you can develop your
own template.
00:02:44 And the template is actually a wizard that guides you,
guides the user who develops the
application,
00:02:51 with a step-by-step process and automatically generates
the needed files and code for the
app.
00:02:59 You can use the template either to create the
application if it exactly fits your needs, or you can
use it as a starting point to generate an original code and then
enhance it.
00:03:13 We provide a Layout Editor for 'what you see is what
you get' UI creation.
00:03:23 And the goal of the layout editor is really to simplify
and accelerate the UI development.
00:03:33 This feature is currently an experimental feature. So
it is available only on your trial account,
not in the productive environment, and we plan to release it
soon.
-
12
00:03:48 We are looking for feedback from users before we
release it for the productive version
00:03:56 Then for extension projects, we provide a visual
extensibility that makes it really easy for the
developer to extend SAPUI5 or SAP Fiori applications
00:04:10 and select the right element that you want to extend
and choose the different extension
options that the SAPUI5 provides.
00:04:20 The first step of the development process after the
development is the preview. And of course
this is an iterative process.
00:04:30 So you can go back and forth, and we will see it as we
go along in the next days' units.
00:04:37 We have a preview or a simulator integrated within the
SAP Web IDE where you can test the
applications in different screen sizes
00:04:50 that fit into the different devices, of course, where
the application should run.
00:04:59 You can also test it with different languages if you
have translations.
00:05:05 And for those who use it for a hybrid application
development, you can also have a preview in
a companion app or in a mobile device.
00:05:17 When you are happy with the application you created,
you can deploy it to different SAP
environments.
00:05:29 And deployment is also part of the development process,
and we provide integrated the
deployment to various environments.
00:05:38 And we add new environments with time so stay
tuned.
00:05:44 The focus for this course is the deployment to SAP HANA
Cloud Platform and to the ABAP
repository on premise.
00:05:52 We also provide with the Hybrid Application Toolkit
deployment to iOS and Android devices.
00:05:59 You can manually deploy to the SMP or HCP mobile
services and also to other... Manually you
can also deploy the application to other SAP environments
00:06:12 We use, as we will show later, we use the Git on a SAP
Hana Cloud Platform for version
control management.
00:06:27 Okay, so let me now show you how you access the SAP Web
IDE from your HANA Cloud
account which you opened in Week 2, Unit 5.
00:06:44 So this is the HANA Cloud Platform cockpit and here
under Subscriptions you will have the
SAP Web IDE.
00:06:57 Once you click the link here, it will be opened.
00:07:06 Okay, this screen will be opened, and now you have here
the application URL.
00:07:16 Okay and this is the SAP Web IDE. I recommend you, for
your convenience through this
course,
00:07:24 to add this URL to your favorites or add a bookmark so
it will be easier for you to access it later
on doing the different exercises of this course.
00:07:40 With the SAP Web IDE we support different browsers like
Chrome, Firefox, Internet Explorer
version 10 and 11.
-
13
00:07:56 But I will use Chrome for showing the exercises
throughout this demonstration. Okay.
00:08:10 So, this is the SAP Web IDE. You have here, as a
reference, the description of the different
areas of the IDE.
00:08:25 But I will show it here on my SAP Web IDE account. So
I'm using also my free trial account. So
it will be the same as yours.
00:08:40 So you can see these are the menus. Here you can see my
user name. This is the toolbar with
different options.
00:08:53 Here you can see, this is like the tree for the
projects that I am developing with SAP Web IDE.
00:09:03 Here you have like your preferences and you can see
that there are some customization and
preferences that you can choose and select.
00:09:17 We have... This is like where you have the code
editor.
00:09:26 Let me, just as an example, open a file. So you can see
it.
00:09:36 And here on the right side, I have the different
panes.
00:09:42 This is the VizPacker, a quick preview. It's external,
like, it's a plug-in preview. It's not one of
the core panes of the SAP Web IDE.
00:09:56 This is Search and Replace. So you can search for
content from your whole product tree as
well as within the file that you are working on.
00:10:06 You have here a Git. The Git is integrated with the SAP
Web IDE, and you can use it to
manage your version and collaborate with your team.
00:10:20 We have here a Git History, some Collaboration using
the SAP Jam, API Reference which will
be very useful,
00:10:32 and we will show it when we go into the more advanced
units of development with the SAP
Web IDE.
00:10:44 And this is the Outline editor which is more useful
with the WYSIWYG layout editor, and we will
show how to use it later on.
00:10:56 Okay. So we move to the next.
00:11:03 Here you have like the description of all the different
areas that I just showed.
00:11:08 You have various options to create a new project with
the SAP Web IDE, and here in these
slides you see the different options.
00:11:18 In this course we will focus more on creating a new
project from a template but you can also
import a project from different repositories
00:11:29 and, of course, clone a Git repository to start with a
project. Let me show how it looks here.
00:11:40 So when you open a new project, you can either open a
project from a template or from
sample applications, which we'll refer to in the next unit, or
we can open an extension project.
00:11:53 We can import it from different sources and we can
clone a repository from the Git.
00:12:04 Okay. We have different capabilities with the SAP Web
IDE. Let me show you the different
templates that we have.
00:12:15 By the way, something that you can already see, we have
the Available Plugins are all the core
-
14
plug-ins which are provided with the SAP Web IDE.
00:12:24 In the External Plugins, you can see all the plug-ins
which are provided by SAP but from
additional groups within the SAP.
00:12:36 And you can mark yourself these plug-ins as enabled so
you can use them through your
development and leverage the capabilities.
00:12:48 So now I will show all the different templates that we
have. So this is when we create the
project from a template.
00:12:59 You can see here all the templates that are provided
out of the box with the SAP Web IDE,
either internal or external plug-ins.
00:13:11 And external developers can also create their own
templates and enhance the capabilities of
the Web IDE or create some new templates.
00:13:25 We will not get into the details of that in the scope
of this course. So, here you can see the
different categories of templates that we have.
00:13:32 So we have SAPUI5 project templates to simplify the
creation of SAPUI5 applications, either
basic applications or hybrid mobile applications with Kapsel
support.
00:13:48 We have a template, of course, for SAP Fiori
Application development, Plugin Development,
HANA Cloud Portal Widgets and Visualization Extension Project
for Analytics.
00:14:01 We will get into more details of the templates and how
to use them later on during the more
advanced units of this course.
00:14:13 So the goal of the templates is really to accelerate
the development process and to provide
you with a good starting point to develop the application with
no coding.
00:14:29 Okay. As we said, we have also all the coding once you
create the application from template,
either a template that provides you some visualization of the
application
00:14:42 or a simple template that just provides like the
infrastructure and the file structure and the
connectivity for developing an application.
00:14:53 You have the code editor with code completion for
JavaScript, XML and specifically for
SAPUI5.
00:15:02 You have code snippets and the very useful API
Reference pane. And we will see how to use
it later on.
00:15:12 We also have the layout editor for WYSIWYG development
of the UI.
00:15:20 With the layout editor we support XML views, and we
recommend to work with the XML views
when you develop the application.
00:15:30 If you use only the code editor, you can use different
other types of views as well.
00:15:36 But if you want to leverage the layout editor, you need
to work with the XML views and you can
switch between the code editor and the layout editor during your
development.
00:15:47 So, let me just show you, with the layout editor, the
components of the layout editor. So here I
have an application that I created from a template.
00:16:03 So if we want to open, for example, the Master view.xml
here, you can see the code editor,
and we can now open it also with the layout editor.
-
15
00:16:23 Okay. And here you can see the different areas of the
layout editor. So we have the pallet here
00:16:30 which contains the different SAPUI5 controls that you
can drag and drop into the canvas area.
00:16:37 This is the canvas area which actually displays the
application in the way that corresponds to
how it will appear in the finished application.
00:16:49 We have here the Properties, the data pane that shows
you the properties and the data for a
marked control.
00:17:00 And then here we have the Outline pane that provides
you an outline of the XML view and
enables you to see the specific element that you are changing in
the XML view.
00:17:21 And here, again, we will get into the details and we
will see how to use it later on in the more
advanced units.
00:17:35 Okay. When you completed the development stage, you can
run the application and you have
an integrated preview within the SAP Web IDE.
00:17:51 You have here various options and we will show it later
on.
00:17:57 Maybe specifically for Fiori it is important to mention
that you can run the application either in
the preview,
00:18:06 and you can use the SAP Fiori launchpad sandbox to
actually run the application in the
preview in the same way that it will run on the Fiori
Launchpad.
00:18:18 You can also later on deploy and run the application
either from the HANA Cloud Platform or
from the ABAP server.
00:18:32 After the application is ready and you used the preview
to test it, you can deploy the
application.
00:18:42 You have various options as we described before, and we
will focus in this course on two
options.
00:18:53 One is to deploy to SAP HANA Cloud Platform, and then
from there you can also register to
the Fiori Launchpad in the cloud,
00:19:02 which is now not available yet in productive
environment, but I hope that... Sorry, it's available
in productive but not yet in the free trial environment.
00:19:13 And this is also something that is planned. And you can
also deploy the application from the
ABAP repository, and in this course we will focus on these two
specific options.
00:19:24 The other options will be probably covered in other
courses. The SAP Web IDE uses the Git
on SAP HANA Cloud Platform for version control.
00:19:38 Version control is used in order to enable the
developer to keep the versions of a specific file
or a group of files over a time and then, if necessary, recall a
specific version later on.
00:19:55 The Git is a widely used version control, and one of
the unique things about it is that it has a
distributed versioning.
00:20:10 So it means there is no central repository for the
project, but actually each developer has a
complete repository for the whole project and the whole project
history.
00:20:28 And it is very useful for version control management as
well as support different collaborative
workflows.
-
16
00:20:37 And in the SAP Web IDE, there is an integration with
the SAP HANA Cloud Platform Git
system.
00:20:51 You can also configure your own Git, but in this course
we will use the SAP HANA Cloud
Platform Git.
00:20:59 So this is my Web IDE. You see here the Git pane. So
through this pane you can do like
Commit and Push as well as other commands like Fetch, Rebase and
so on.
00:21:18 And you can see also your version history through the
History pane.
00:21:30 Okay, thank you.
-
17
WEEK 3, UNIT 4
00:00:11 Hello and welcome back. In this unit you will learn how
to connect the SAP Web IDE to a
remote system in order to consume data from the backend
00:00:23 and how to create a Fiori Master Detail app with the
SAP Web IDE. Let's start.
00:00:31 So, the steps that we will go through in this unit:
First, I will show you how to set up a
connection to a backend remote system
00:00:39 in order to consume the data through an OData service
in your app. This is the step that you
have to do only once.
00:00:49 And then you can create many projects and many
applications which are consuming data from
this same backend system.
00:01:00 And the next steps will be creating a new project from
a template, and then go through the
template wizard and create the Fiori Master Detail app.
00:01:12 When the app is ready and the code was generated, we
will run the app in the preview from
the SAP Web IDE environment and we will look at the results.
00:01:26 For the purpose of this course we give you two options
for using an OData service.
00:01:35 The first option is we have an SAP Gateway demo system
which you can use in order to
consume a real OData service.
00:01:42 The other option is to use a local EDMX file that you
can generate and build your Fiori UI
disconnected from a backend.
00:01:52 This is also a scenario that is common in real world
where the UI development is decoupled
from the backend development,
00:02:02 and there is an OData EDMX file that is used as the
interface between the frontend and the
backend.
00:02:12 Before I show how to connect to the SAP Gateway demo
system that you can use for this
course,
00:02:20 I would like to show you a high-level architecture of
SAP Web IDE on SAP HANA Cloud
Platform and how the connectivity to your backend system
works.
00:02:33 So, SAP HANA Cloud Platform provides an SAP HANA Cloud
Connector which enables the
secure SSL link between your backend system and your frontend
system,
00:02:45 I'm sorry, and the SAP HANA Cloud Platform. The Cloud
Connector needs to be installed on a
machine which has access to your internal network
00:02:55 where the backend is installed, on the one hand, for
example SAP Gateway, and the open
Internet where SAP HANA Cloud Platform exists, on the other
hand.
00:03:07 The SAP Gateway system is already available on the open
Internet so we don't have to use
the SAP HANA Cloud Connector for this course.
00:03:23 Another mechanism available with the SAP HANA Cloud
Platform is the destination.
00:03:30 And the destination enables you to connect into a
backend system from the SAP HANA Cloud
Platform or from the SAP Web IDE.
00:03:44 You need a destination because your browser is
accessing both, like the SAP Web IDE server
-
18
and your backend system.
00:03:56 And to avoid a cross-origin problem, you need to define
a destination and in this way the
HANA Cloud Platform can serve like a proxy
00:04:08 that enables you to work with both server sides. Okay.
So, let's continue and do that.
00:04:19 Additional information is available here in our SCN
page, which was already presented in
previous units.
00:04:29 And you can find there a lot of information about how
to connect your SAP Web IDE to your
backend system,
00:04:39 either the SAP Gateway demo system or your own backend
system, with the Cloud Connector.
00:04:48 Okay, so let's go back to your SAP HANA Cloud Platform
Cockpit. And here we will define a
destination
00:04:56 that will enable you to access the SAP Gateway demo
system.
00:05:02 So let's go to Destinations. We prepared for you in the
course exercise for this unit a
destination file content
00:05:17 that you should just copy into a text file and import
it from here, from the Cockpit. So let's do
that.
00:05:31 Okay. You have to define a name. And please pay
attention to put in a description that makes
sense to you, that is meaningful for you
00:05:44 because this is what you will see later on in the SAP
Web IDE template wizard, in the data
connectivity phase.
00:05:56 You can either use basic authentication in the
destination definition or no authentication,
00:06:03 and then you will have to add your credentials each
time you use it. I'm adding my credentials
here.
00:06:18 Let's do the Save. Okay. So now I can see this
destination.
00:06:32 Okay, you see this destination in the destination list
on the SAP HANA Cloud Platform Cockpit.
Let's now go back to the SAP Web IDE.
00:06:42 I will refresh it so it will use the updated list of
destinations. And we would now create a new
Fiori Master Detail app.
00:06:54 So, we will create a File, New. We will create a
Project from Template. Here you have the
different templates which we are providing with the SAP Web
IDE.
00:07:08 Let's say, choose... These are the different categories
of templates. Let's choose the SAP Fiori
Application.
00:07:16 You can see here the different Fiori application
templates. I will choose the Fiori Master Detail
Application.
00:07:23 Here you can have a preview of what this template is
all about and how it will look like so you
can decide which template you want to use.
00:07:36 Okay, the next step of the wizard. Okay. This
application will be a Master Detail application
that will track sales orders.
-
19
00:07:49 So I call it, the Project Name, salesorder. The next
step of the wizard is the data connectivity.
00:07:57 We provide here various options for connectivity. The
first option, which I will use, is Service
Catalog.
00:08:04 It actually enables you to access different systems
which support the Gateway Service Catalog
concept.
00:08:12 And when you select the system, so I will select the
system that I just defined, the GW
(Gateway) demo OData service Open SAP,
00:08:23 this is the description of the destination that I
defined in the SAP HANA Cloud Platform Cockpit
that is presented here.
00:08:30 And here I can see all the OData services which are
available on this system. I will choose the
SALESORDER.
00:08:38 I can browse it through the wizard to see actually
which OData collections are available in this
service,
00:08:46 and I can even see the different properties which are
available in this data collection.
00:08:54 The SAP Web IDE will do some validation checks that
this is really a service that we can use
for ...
00:09:00 that's a valid OData service and we can use it for
building this application.
00:09:09 We have here additional data connectivity options.
Workspace or File System can be used for
scenarios
00:09:18 that you don't have a connectivity for the backend
system but you use the EDMX file in order
to generate the frontend, the UI of the application,
00:09:29 and test it with the SAP Web IDE mock service. And
Service URL is to connect to backend
systems which do not work with the SAP Gateways Service
Catalog
00:09:40 but you can add here a specific OData service URL.
Okay. So we will proceed with the option
of the Sales Order OData service.
00:09:53 Next step is the Template Customization. So a template
is actually a wizard which generates
an application code.
00:10:07 The template contains placeholders for the application
developer to add either static content or
dynamic content which are relevant for his application.
00:10:21 So for example, in this example of a Fiori Master
Detail application, we can use the same
template, which was actually the Fiori Master Detail concept and
UI design, for different use
cases.
00:10:37 We can use it for sales order tracking like in this
case, we can use it to track flights or
employee benefits or every ...
00:10:50 You can think about many, many use cases which are
related to different OData services and
different lines of business which can use the same template.
00:11:02 And that's why we need these placeholders in the
template in the customization phase of the
template in order to create the application that we want,
00:11:11 just specific for our use case, using the generic
template, the generic Fiori UI pattern that we
have here.
-
20
00:11:22 Okay. So as a Title, so this is the template, the way
the application will look like in the end. And
now we have to add the static data,
00:11:31 which is like the text and the titles, as well as the
dynamic data, which is actually the data
which is coming from the backend and is presented through the
application.
00:11:43 Okay. So the Title here will be, let's call it Sales
Order Tracking. The OData Collection, in this
service we have two OData collections.
00:11:56 One is the headers which are actually the sales orders,
and the second one is the sales order
items.
00:12:02 And we have like one-to-many relations between the
sales order headers and the sales order
items. So let's choose the sales order headers.
00:12:13 At the Item Title we can choose the OrderId, Numeric
Attribute will give the OrderValue. You
see that we have here an automatic completion.
00:12:28 And the Units Attribute will be the Currency. So this
is the Master Section of the template.
00:12:41 And we have here also a Detail Section. So as a Title
we will put Sales Order Details.
00:12:51 Status: We don't have a suitable property in this OData
collection so we can leave it free.
00:13:01 And for the attributes, let's use the CustomerId, and
the DocumentType and Date as attributes.
00:13:18 In the Fiori Master Detail template, we have also an
option to create an icon tab filter with the
OData Navigation.
00:13:32 So for example, in Sales Order, if we have an
additional data collection in this service, for
example, for customer details,
00:13:42 we can use this OData Navigations to present the
content for a different OData collection in
this OData service.
00:13:52 But in this specific service we have only two OData
collections, the headers and the items with
one-to-many relations, so we will leave it empty.
00:14:04 So just to show what was the customization and which
parameters we use, so you see here
the Master Section with the three parameters that we added.
00:14:18 You can see also the Details Section with two icon tab
filters. The first one is the Details
Section,
00:14:28 and the second one is the Navigation Section which we
leave empty for this exercise. Okay.
00:14:43 Now let's press Next and Finish, and let's see what is
the code that the template generated
and how it looks like.
00:14:55 Okay. So you see here in my Web IDE this is the Sales
Order project. You can see how it
looks like.
00:15:04 And let's now run it in the preview, in the SAP Web IDE
preview to see how it looks like.
00:15:14 So, this is the SAP Web IDE preview. It actually
accesses the backend system with the OData
service that I defined.
00:15:25 You can see here the information that is coming from
the backend with all the fields that we
defined. Okay.
-
21
00:15:34 So this is the Sales Order application that was
generated with the wizard, with the template.
And let's look now how it looks like.
00:15:43 So I mark here the index.html, and now let's run
it.
00:15:55 Okay. This is the preview, the simulator that is
integrated within the SAP Web IDE
environment.
00:16:01 You can see here that we can run the application with
different screen sizes for the different
devices,
00:16:09 like Large is desktop, Medium is more a tablet size,
and Small is a smartphone.
00:16:15 What you see here is actually the application with the
data that is coming from the backend
system that we defined.
00:16:24 So you can see all the information here. We can change
the screen size for a smartphone.
00:16:33 And you can see here the Fiori navigation how it looks
like on a smartphone. You can edit and
even choose your own screen size if you like.
00:16:48 Additional capabilities that we have here: You can
change the orientation of the application
and check how it looks like.
00:16:56 This is very powerful when you want to really build
responsive applications that run on the
different devices,
00:17:04 and to see how the application looks like on the
different devices and screen sizes.
00:17:11 And if you have a translation, you can switch between
the different languages and see how the
application looks like.
00:17:20 An additional thing that we have here is we have like a
QR code in case you really want to run
the URL on a device. Okay.
00:17:30 So, this is the preview. The application looks good.
And we can either use now the application
as is or use this as a base point for additional
customizations.
00:17:47 Thank you.
-
22
WEEK 3, UNIT 5
00:00:11 Hello and welcome back. In the previous unit we learned
how to connect the SAP Web IDE to
a remote backend system
00:00:21 and create a Fiori Master Detail app from a template
connected to the backend system and
getting the data from the backend system.
00:00:32 In this unit we will show how to create an app with no
connectivity to a backend system using
an EDMX file which contains the model of the OData service
00:00:48 and leveraging the SAP Web IDE mock service to test the
application.
00:00:56 In the end we will also show how to change, modify the
mock data in order to enable you to
test the application with the specific data that you want to
present.
00:01:09 Such an approach will be useful for cases where you
want to develop the frontend and the
backend in parallel in case the backend is not ready yet,
00:01:18 so you define the OData model for the interface between
the frontend and the backend and
then you can do the frontend and the backend development in
parallel,
00:01:29 or in cases where you don't have backend
connectivity.
00:01:36 The steps that we will go through in this unit, we will
create an EDMX file with the OData data
model.
00:01:44 We will create an app from a template in a similar way
as we did in the previous unit
00:01:49 but this time with no connectivity to a backend system,
but by leveraging the EDMX file with
the OData model.
00:01:58 And then we will test the result application with mock
service and edit the mock data.
00:02:06 Let's start. Okay, we will first create a folder and an
EDMX data with the OData service model.
00:02:20 So I will call it schema_folder. So I created a folder,
where I can put more than one EDMX file.
00:02:43 I will now create a new OData model file with the OData
model editor of the SAP Web IDE.
Let's call this sales_order_edmx.
00:03:06 Okay, we've prepared in the exercise of this unit the
EDMX file already with the same model
that we use when we use the backend system.
00:03:24 I will copy that, and I will add it here. We can use
the Beautify capability of the OData model
editor.
00:03:49 So, now it also looks nice. Let's save it. And now we
will create a new project from template
like in the previous time,
00:04:02 but this time with no backend connectivity using the
EDMX file which contains the OData
model for the application.
00:04:13 So we select again. I will not get again into all the
details because you have seen it in the
previous unit. So, I will go through most of the steps quite
fast.
00:04:22 I will just show in detail the Data Connectivity stage.
So, this time I will call it salesorder_mock.
00:04:39 I will go to the Workspace. And here I see the
schema_folder. I will select the
sales_order_edmx file I have just created.
-
23
00:04:58 We can now, in a similar manner like before, we can see
the data collections which are
contained in this OData service.
00:05:09 Here I have now the Template Customization phase, and I
will use the same parameters that I
used before.
00:05:19 Sales Order Tracking, the OData Collection is the same
one.
00:05:31 Item Title is again the OrderId. The Numeric Attribute
will be the OrderValue, and the Unit is
the Currency.
00:05:53 I don't have the Status and for the Attributes I will
use the CustomerId and the DocumentType
and DocumentDate.
00:06:15 Okay, now let's continue to the next step and press
Finish.
00:06:24 Okay, so you see this is the salesorder_mock project
that was created from the templates.
00:06:34 The structure of the project is the same as we had
before. But now we have no backend
connectivity.
00:06:46 So to see how the result looks like, I can run it now
with the mock data. So, I select again the
index.html and I run it with mock data.
00:06:59 So, you see the same preview environment like we have
seen before with all the capabilities,
00:07:06 but instead of really connecting to the backend system
to bring the data, we generate the data
according to the type of the different entities and parameters
that we selected here
00:07:22 and all the data is generated automatically. So you can
see like OrderId 1, 2, 3, etc. All the
other capabilities are completely the same.
00:07:31 So for the sake of really testing the application and
see how it works, you can do everything
without the real backend connectivity.
00:07:44 Now let say that... Let me go back to the presentation
for a second.
00:07:50 Okay, so we show how to run the application with the
mock data and now, with the mock
service, we have two options:
00:08:00 Either to use the mock service to generate the data
automatically or provide data in JSON file,
and this is what I will demonstrate now.
00:08:13 So let's say now that you want to control the data of
the mock service which we test the
application with to validate that it makes sense and works and
that the application looks good.
00:08:29 So, we go to the model folder in the project. We select
the metadata.xml file
00:08:39 and then with right click we open it and we edit the
mock data.
00:08:48 And here you see a table with the different properties
of the OData collections.
00:08:57 You can either Generate Random Data and then change it
or you can just add the data.
00:09:08 So, ORDERID will be 12345, DOCUMENTTYPE will be
contract, DOCUMENTDATE. So
according to the type of the property you have some guidance and
assistance.
00:09:21 So if it's a date, for example, you have a calendar. So
let's pick the date February 3,
CUSTOMERID again will be just 12345, SALESORG we can put
emea,
00:09:37 DISTRIBUTIONCHANNEL retail, DIVISION emea, ORDERVALUE
4,000 and euro. Okay, now
-
24
we do OK.
00:09:58 By default, there is a flag that says use these data
and not the automatically generated mock
data source.
00:10:09 Now, we see that we have a JSON file that was
automatically created with the information that
we added.
00:10:18 If we will now run the application we created with the
mock service, we will see that only the
data that we entered appears.
00:10:36 But it's the accurate data, the specific data that we
added.
00:10:45 Okay, so I've presented until now how easy it is to
develop a Fiori application with no backend
connectivity
00:10:57 using an EDMX file and leveraging the SAP Web IDE mock
service for testing the application
with no backend connectivity. Thank you.
-
www.sap.com
2015 SAP SE or an SAP affiliate company. All rights reserved. No
part of this publication may be reproduced or transmitted in any
form or for any purpose without the express permission of SAP SE or
an SAP affiliate company. SAP and other SAP products and services
mentioned herein as well as their respective logos are trademarks
or registered trademarks of SAP SE (or an SAP affiliate company) in
Germany and other countries. Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark
for additional trademark information and notices. Some software
products marketed by SAP SE and its distributors contain
proprietary software components of other software vendors. National
product specifications may vary. These materials are provided by
SAP SE or an SAP affiliate company for informational purposes only,
without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and services are those that are set
forth in the express warranty statements accompanying such products
and services, if any. Nothing herein should be construed as
constituting an additional warranty. In particular, SAP SE or its
affiliated companies have no obligation to pursue any course of
business outlined in this document or any related presentation, or
to develop or release any functionality mentioned therein. This
document, or any related presentation, and SAP SEs or its
affiliated companies strategy and possible future developments,
products, and/or platform directions and functionality are all
subject to change and may be changed by SAP SE or its affiliated
companies at any time for any reason without notice. The
information in this document is not a commitment, promise, or legal
obligation to deliver any material, code, or functionality. All
forward-looking statements are subject to various risks and
uncertainties that could cause actual results to differ materially
from expectations. Readers are cautioned not to place undue
reliance on these forward-looking statements, which speak only as
of their dates, and they should not be relied upon in making
purchasing decisions.