openSAP

SAP Fiori Overview: Design, Develop and Deploy

Week 3 Unit 1

00:00:05 Hello, and welcome to the first unit of week three, Using SAP Business Application Studio to
Develop SAP Fiori Apps,
00:00:12 of the openSAP course, SAP Fiori Overview: Design, Develop, and Deploy.
00:00:18 My name is Raz Korn, product manager for SAP Business Application Studio.
00:00:23 Last week, we discussed the importance of design for successful organizations,
00:00:27 design challenges in the enterprise and how SAP Fiori UX solves these challenges.
00:00:33 This week, we will talk about development tools that turn design into reality.
00:00:38 An overview of tools and technologies for developing and adopting SAP Fiori apps
00:00:44 was provided in week one, unit four. This unit focuses on SAP Business Application Studio.
00:00:53 Most of the unit will be dedicated to an SAP Fiori freestyle development demo.
00:00:59 I'd like to start with an overview of the product. SAP Business Application Studio
00:01:06 is pretty much the next generation of SAP Web IDE. It's a powerful and modern development
environment
00:01:13 tailored for efficient development of business applications for the Intelligent Enterprise.
00:01:18 Applications such as SAP Fiori, workflow, mobile, SAP S/4HANA extensions, just to name a
few.
00:01:27 It is available on AWS, Azure, Alibaba Cloud, and SAP Cloud Platform trial environment.
00:01:35 The main motivation for developing it was to provide a better development experience
00:01:41 to address the needs of application development with a desktop-like experience in the cloud.
00:01:47 We also wanted to provide a consistent experience with leading IDEs,
00:01:52 so developers would become immediately productive when using app studio.
00:01:58 It is all achieved through the underlying technology that makes it easy to use extensions from
the market.
00:02:05 This allows us for example, to provide better support
00:02:08 for developing with Java and Node.js, and to include a command line interface in the product.
00:02:14 An additional motivation was to provide a development environment
00:02:19 that can be made available through various hyperscalers and in various regions,
00:02:23 which is well aligned with SAP's multi-cloud strategy. SAP Business Application Studio
provides a
00:02:32 turnkey solution based on what we call Dev Spaces. Dev Spaces are like isolated virtual
machines
00:02:39 in the cloud that can be instantly spun up. Each Dev Space type contains tailored tools
00:02:45 and pre-installed runtimes for a target scenario, such as SAP Fiori or mobile.
00:02:51 This simplifies and saves time in setting up the development environment,
00:02:55 as nothing needs to be installed or updated, letting the developer
00:03:00 focus on the business domain anytime, anywhere. The desktop-like experience in the cloud
allows
00:03:06 them to efficiently develop, test, build, and run the solution. Integration with additional services
and solutions,
00:03:14 on-premise or in the cloud, and leveraging SAP technologies is a breeze.
00:03:21 Examples can be SAP API Business Hub or SAP solutions for data consumptions or
application deployment,
00:03:29 SAP technologies such as SAPUI5 or SAP Cloud Application Programming Model,
00:03:36 and commonly used technologies such as Node, Java, OData, and Git.
00:03:41 And of course, SAP Business Application Studio has many high productivity tools, wizards,
templates,
00:03:49 optimized codes, and graphical editors, and more. Let's take a peek under the hood
00:03:55 of SAP Business Application Studio. We'll start with the developer.
00:04:00 All the developer needs is a machine running a browser and connected to the internet,
00:04:05 as the app studio is browser-based access. In the middle of the diagram,
00:04:11 you can see SAP Business Application Studio with available Dev Spaces of various types.
00:04:17 Each Dev Space contains a file system where the code is stored,
00:04:21 and we recommend as best practice to use a Git source code repository.
00:04:25 The development environment is an IDE based on an open source.
00:04:31 The Dev Space includes all tools required for a specific scenario as pre-packaged extension.
00:04:37 And if additional capabilities are required, there is the option to customize the Dev Space
00:04:42 by adding additional extensions. Various data sources can be used,
00:04:49 on premise or in the cloud, SAP or non-SAP. You can see here examples of kit extensions
00:05:01 that are pre-packaged with different Dev Space types. And you can see that each Dev Space
has its own set of tools.
00:05:09 Let's focus for a second on Fiori Dev Space. You can see that it comes with the language
services
00:05:14 for SAPUI5, JavaScript, and XML, optimized graphical editor, SAP Fiori templates
00:05:23 for various floorplans and runtimes. Everything that is needed to perform local testing,
00:05:31 like multiple SAPUI5 version testing frameworks, more capabilities, and additional tools
00:05:37 like builders and deployers, and many more. Now, after this introduction to app studio,
00:05:43 I'd like you to have the feeling of a developer using it. So we'll jump right to the demo.
00:05:52 And the first thing that we need to do is, of course, to access the app studio.
00:05:55 So, app studio is available on the Cloud Foundry environment as a subscription in
subaccounts.
00:06:04 So, after I logged into the global account, and then I go into my subaccount,
00:06:08 go into the subscription pane. And there, I'll find my Business Application Studio.
00:06:16 I launch app studio and the first screen that I meet
00:06:22 is the Dev Spaces manager, which allows me to perform various operations on the Dev
Spaces.
00:06:28 And of course, to see the list of available Dev Spaces that were already created.
00:06:36 I can create a new Dev Space from various types, and for each type,
00:06:40 I can see the pre-package tools that come with it. In our Fiori freestyle demo,
00:06:49 we're going to develop an application that presents a list of suppliers.
00:06:56 So I launch my development environment, which is based on SAP Fiori Dev Space.
00:07:06 There are various tools for me to start developing an SAP Fiori application.
00:07:14 In this demo, I'll use the terminal. As a framework, we're using a Yeoman generator.
00:07:22 So we have various generators for various types of applications.
00:07:31 And I'll choose to create a Fiori project for the Cloud Foundry environment.
00:07:38 You can see the various floorplans that are already available,
00:07:40 and many more will be available in the future. I'll choose the basic UI5 application.
00:07:46 We'll call the project openSAPFioriDemo.

2
00:07:55 We'll use the Business Partners. I'll use many defaults to save time
00:08:04 and reduce the complexity. For data service,
00:08:09 I could already bind to a data service at this point in the project creation,
00:08:14 but I'd like to use a different tool for binding the data service.
00:08:20 And we can see that many dependencies are currently being installed
00:08:24 as part of the project creation. And I can see that the project was created.
00:08:31 I'll focus my workspace on the specific project that we've just created.
00:08:44 This gives me a cleaner environment for my work. And we can see that it is a standard SAP
Fiori structure.
00:08:56 The Business Partner HTML5 module with the Web app inside.
00:09:01 Open just a few folders. We can see here that under the local service,
00:09:07 I don't have the metadata file, so no data source is bound to the HTML5 module.
00:09:14 And the manifest.json does not have any data source. So the next thing that I'm going to do is
00:09:22 bind the HTML5 module to a data source. And I'm going to use a commonly used tool
00:09:28 with leading IDEs, such as the app studio, which is called command palette,
00:09:33 available with the key shortcut F1, or via View, Find Command.
00:09:40 And it's like, provides me a very simple wizard for consuming the service.
00:09:49 Going to consume an SAP service that will be bound to the Business Partners HTML5
modules.
00:09:55 I'm not going to use the sandbox environment of API Business Hub.
00:09:58 I'm going to use a real back end based on ES5, which is a public gateway
00:10:04 made available by SAP, anyone can register and get a user for it.
00:10:13 And now I can filter the service that I'd like to use,
00:10:18 I'd like to use the GWSAMPLE_BASIC which contains the Business Partner's entity set.
00:10:24 And as soon as the successful bind is made, I can see here on notification,
00:10:31 also, I can see that the metadata was fetched. And the data source was added
00:10:38 to the manifest.json, so a lot of work was saved
00:10:45 through using the app studio as the tool for Fiori development.
00:10:51 The other thing that I'd like to do is, of course, to add the list
00:10:54 to my application and provide the properties
00:10:58 that I'd like to present when the application is run. So I'm going to it, I'm launching
00:11:04 the optimized graphical editor. And I'm going to add a list component
00:11:10 from a UI5 component to my application,
00:11:15 bind it to the Business Partner's entity set. Since now it is bound to the Business Partner entity
set,
00:11:26 I can use properties from this entity set from the Business Partner,
00:11:31 So I'm going to add the name and ID to my list to be presented.
00:11:38 You can see it's a very user-friendly UI, very simple, click, drag, and drop.
00:11:48 And I can have an application very fast. So I basically completed my development
00:11:55 and now I want to test it and I want to do it very fast.
00:11:59 I want to do very fast dev test cycles, I don't want to redeploy it because it takes a lot of time.
00:12:06 So I'm going to create a run configuration, and app studio enables me to run
00:12:10 the application within my Dev Space. So it's a really local run of the application,
00:12:17 a very fast turnaround. I'm going to create a new run configuration,
00:12:21 I can create multiple run configurations for each application to run it in several different ways.

3
00:12:29 We are going to run it in a very simple way. So it's a run configuration for my HTML5 module.

00:12:36 We can test it with mock or we can run test frameworks, which we're going to do a basic one
running
00:12:44 against a real back end. I can test it with various SAPUI5 versions
00:12:49 that are installed locally within my Dev Space, but I'm going to use the latest version.
00:12:55 The last thing that I need to do in order to complete the run configuration
00:13:00 is to bind to the dependency that I have, which is the destination service.
00:13:09 And the destination services will be fetched from the Cloud Foundry space
00:13:15 that I'm currently logged into. And you can see here
00:13:19 at my status bar at the bottom, I can see that I'm currently
00:13:26 logged into my organization and space. So I'm going to fetch
00:13:35 the list of destination services that I can use in my application.
00:13:45 I'm going to use the trial destination service and as soon as it is bound successfully,
00:13:50 I will also have a visual indication here, it turned from gray to green.
00:13:56 And I also have here the notification that it was successful and I can run my application.
00:14:06 So, I'm moving to the debug pane, and also I get a visual indication
00:14:11 that the status bar changed from blue to orange. And I'm opening the application
00:14:17 and it will present with data coming from the back end that I am connected to, which is ES5.
00:14:30 Okay, going back to the presentation. I see that many of you are aware of SAP Web IDE,
00:14:38 perhaps even using it on a daily basis. So I'd like to provide
00:14:42 a high-level comparison between the products. First thing is, of course,
00:14:47 that Web IDE is available from the Neo environment while the app studio is available
00:14:54 from the Cloud Foundry environment, letting us have it available as a product
00:15:01 from different hyper-scalers and in different regions. From development target,
00:15:07 both of them support the Cloud Foundry environment and on-premise ABAP.
00:15:12 SAP Web IDE also supports the new environment, which is not planned for app studio,
00:15:16 and app studio supports deployment to the SAP Cloud Platform, ABAP environment.
00:15:24 For a solution perspective, SAP Web IDE supports generic workspaces
00:15:31 where the developer needs to customize to the specific development scenario,
00:15:36 while the app studio core capability is to create Dev Spaces
00:15:43 that are tailored for efficient development of a target scenario.
00:15:48 From an experience perspective, Web IDE provides a proprietary experience
00:15:53 limited to a browser-based experience, and with app studio,
00:15:57 we get an experience that is similar to market- leading IDEs. The desktop-like experience
00:16:04 allows us to run the developed applications locally, and this saves a lot of time in the dev test
cycle
00:16:13 as there's no need to redeploy the application to test it. From a persona perspective,
00:16:20 Web IDE provides basically similar, a very good experience, but it is similar to all personas.
00:16:29 With app studio, we started with targeting the pro code persona,
00:16:33 but the concept, allows us to provide suited Dev Spaces for additional personas.
00:16:43 Another important aspect of development environment is the ability to extend it.
00:16:49 And SAP Web IDE uses a proprietary extension framework with a limited number of
extensions.
00:16:57 SAP Business Application Studio has VS Code-compliant extensibility framework
00:17:05 with thousands of available extensions. You can find here links
00:17:13 to additional information on the product. I'd like you to pay special attention to the homepage

4
00:17:18 at www.sap.com/appstudio where you can find the latest information.
00:17:25 So you are kindly advised to visit the homepage from time to time and get updated.
00:17:36 One last item before wrapping up is that app studio is like
00:17:43 any cloud-based product. We frequently introduce new capabilities to the product.
00:17:53 And therefore, when you try to get your hands dirty with Business Application Studio,
00:17:57 it might look a bit different than what you just saw in the demo.
00:18:05 So in this unit, we covered the topic of SAP Business Application Studio,
00:18:11 a development environment from SAP, for efficient development of business applications
00:18:18 for the Intelligent Enterprise, it is available on AWS, Azure, Alibaba Cloud,
00:18:24 and you can also try it out on SAP Cloud Platform trial environment.
00:18:30 Thank you for watching this unit. In the next unit,
00:18:33 we will cover the topic of SAPUI5, UI technology for building
00:18:41 modern enterprise-grade Fiori Web Applications. Goodbye.

5
Week 3 Unit 2

00:00:04 Hello, my name is Oliver Graeff, I'm product manager for SAPUI5.
00:00:10 In the second unit of week three, Building Modern Web Applications with SAPUI5,
00:00:17 of the openSAP course, SAP Fiori Overview: Design, Develop, and Deploy,
00:00:24 I want to give you an overview of SAPUI5. It is the UI technology to build modern Fiori
applications.
00:00:34 To start, I want to give you an overview of SAPUI5, explain what it is,
00:00:40 and how it's being used by SAP Fiori. Also, I want to explain a couple of highlights
00:00:47 and capabilities of SAPUI5. What I want you
00:00:51 to take away from this course, is an understanding of why SAPUI5
00:00:58 is a modern and efficient way to create Fiori Web applications.
00:01:07 SAPUI5 is an HTML framework to build enterprise-grade applications.
00:01:14 SAPUI5 is being developed in parallel and in close collaboration with the SAP Fiori design.
00:01:22 And as such, you can say that the SAPUI5 UI technology
00:01:27 is the reference technology, the reference implementation of the Fiori design.
00:01:34 So by using SAPUI5, you get a consistent Fiori user experience.
00:01:41 But what else? There are also technical aspects.
00:01:45 For example, Fiori comes with a number of tools to develop with SAPUI5,
00:01:52 for SAP and for you as a customer or partner. And there are other capabilities,
00:01:58 there are other qualities, for example, enterprise qualities.
00:02:02 Enterprise qualities standards, which are important if you develop applications
00:02:08 in the enterprise context. For example, security or accessibility.
00:02:14 And this is a main advantage of SAPUI5, because you get this out of the box.
00:02:23 To understand how UI5 is being used, I want to explain that SAPUI5 applications are Web
applications.
00:02:32 Earlier in this course, you heard that Fiori can also be implemented with native mobile
technologies,
00:02:39 for example, Apple iOS or Android. Now, how is this different?
00:02:44 Web applications are running in your browser, and SAPUI5 supports all major browsers.
00:02:50 And by this, an SAPUI5 application can run in all these browsers and many different platforms,

00:02:58 operating systems, and devices, be it desktop devices or mobile devices.

00:03:05 So this is a very common scenario in today's world.
00:03:11 The advantage is, that you develop an application once
00:03:15 and you can use it on all different platforms, on all different devices,
00:03:21 just by developing the application once. To understand how SAP can be seen in the context
00:03:31 of the portfolio of SAP, we created this slide.
00:03:36 You can see that SAPUI5 is being used in a growing number of SAP solutions.
00:03:42 And, again, there's a number of tools to work with UI5,
00:03:46 to develop UI5, to extend UI5 applications.
00:03:51 And there's a number of them, most prominently I want to mention the SAP Business
Application Studio.
00:03:58 The other thing I have to highlight here on this slide is the openSAP course we have for
SAPUI5.
00:04:06 So there is a dedicated openSAP course to learn how to implement,
00:04:11 how to code with SAPUI5. It's a hands-on course for developers,

6
00:04:16 and we already received very good feedback on that. So I can recommend it.
00:04:23 So that was kind of an overview of SAPUI5. And now I want to highlight four topics.
00:04:30 The first one is obviously the Fiori design, and how the Fiori design
00:04:35 and the UI5 technology evolve together. The second topic is UI flexibility.
00:04:42 Many customers and partners do not use SAP standard delivery out of the box,
00:04:48 but they have requirements to adapt, to extend the standard applications.
00:04:54 And here SAPUI5 helps. The third topic is new trends in that technology.
00:05:02 So, at SAP we must not rest on our proprietary technology,
00:05:07 we need to understand what's happening outside SAP with Web technologies in the Web
development space,
00:05:14 we need to incorporate things that are happening there. The first topic is UI5 Web
Components,
00:05:22 where we can see how Web Components help to bring a consistent Fiori user experience
00:05:28 to many solutions and products. So for each of these topics,
00:05:34 I want to go a bit deeper and provide some more details.
00:05:37 So, let's go to the first topic, SAP Fiori design.
00:05:43 By now, you know that SAP Fiori 3 is SAP's target design system.
00:05:49 SAP Fiori 3 provides UX consistency and many innovations from design and user experience
aspects,
00:05:59 cards is one example. But there's more to Fiori 3,
00:06:04 not just design aspects but also technology aspects.
00:06:08 It is important that Fiori can be adopted across many platforms and solutions.
00:06:14 It is important that Fiori comes with an efficient development environment
00:06:19 and UI technologies. It is important that Fiori is fast and Fiori is open
00:06:26 for new innovations, for example in the technology space.
00:06:30 So, all of these aspects are important and, as I mentioned,
00:06:34 the Fiori design and the SAPUI5 technology
00:06:38 are being developed in close collaboration. The second topic I want to provide some more
details about,
00:06:48 is UI flexibility. As you probably know, not many customers and partners
00:06:54 use SAP applications out of the box. They usually have some requirements to adapt,
00:06:59 to extend those applications to their specific requirements. So there's
00:07:07 very often a scenario where you have standard code from SAP
00:07:12 and you have some custom code, and those need to work together.
00:07:17 And sometimes this is bit challenging, sometimes this is not easy to achieve,
00:07:22 for example, if there are upgrades for an SAP then custom extensions still
00:07:26 run without problems. So we need good technology
00:07:31 to manage those extensions separately from the standard code.
00:07:36 And SAPUI5 flexibility is exactly this. Now, who's doing such changes?
00:07:44 It's different roles who are doing such changes.
00:07:47 On the left, you can see the developer.
00:07:49 That's what you can imagine, developer is working in code
00:07:52 to make complex changes, changes that would affect all end users.
00:07:58 On the other side of the spectrum is the end user. You can imagine that you, as an end user,
00:08:04 want to make some changes that are relevant just for you. For example, changing the
sequence of table columns
00:08:11 or hiding a field that is not relevant for you. And obviously, an end user would not work

7
00:08:16 in coding to do this, but rather need some simple drag and drop tools.
00:08:22 And there is a third role, which we call key user.
00:08:27 Now, there are many different terms that this role is called.
00:08:30 This is a person who has some technical understanding, maybe writing Excel macros,
00:08:37 but is not a developer, not working in code.
00:08:40 Also, this person might want to do some changes and provide these changes to a team,
00:08:47 to a group of users. So, these changes could be adding custom fields
00:08:52 that are relevant for a certain team. Also this key user would not work in coding
00:08:58 but need simple tools, for example, using drag and drop.
00:09:04 And what would this look like? Let's have a look at a little demo.
00:09:09 The demo app for this is in the SAPUI5 demo kit. So this is the most important URL you need
to know
00:09:16 when working with SAPUI5. It's, ui5.sap.com.
00:09:22 And if you open this, you'll see the UI5 demo kit with documentation,
00:09:30 with API references, with lots of coding samples and demo apps.
00:09:36 And in the list of demo apps, we have a section on SAPUI5 flexibility,
00:09:43 specifically for the key user adaptation. I'm launching this,
00:09:48 and you see a Fiori app. It's a simple app to manage products.
00:09:52 You have a list of products on the left and some details on the right.
00:09:57 Now imagine that I'm a key user. I have a specific authorization,
00:10:02 and with that authorization I can pick the option Adapt UI.
00:10:08 I select this and then the screen changes.
00:10:12 And you can see I have this drag and drop pointer.
00:10:17 For example, if I say, for my team, the supplier field is the most important one,
00:10:23 I can drag and drop this to the top. If I say, for my team, the average rating is not relevant,
00:10:31 let's make the screen a bit simpler and remove this field.
00:10:36 And it's gone. Maybe my team doesn't call this Description,
00:10:41 we want to have a different field label here. And I can rename the field
00:10:47 and call it, maybe, Text. So these are very simple changes,
00:10:54 and the important thing is I don't have to talk to my developers
00:10:58 in the IT department. I could do these changes
00:11:02 by a drag and drop in a very simple tool, and then provide them to my end users.
00:11:14 The third topic I want to explain a bit more is UI5 evolution.
00:11:20 So with UI5, we need to include things that are happening
00:11:26 in the space of Web development and Web technologies.
00:11:29 And for this, we started the UI5 evolution project.
00:11:34 One of the targets of this project was to improve performance,
00:11:39 especially for mobile devices. But there are a couple of other things.
00:11:43 So when we are doing this, there's one important aspect we need to consider.
00:11:48 We need to be compatible with existing Fiori apps. You can imagine, SAP has a large number
of Fiori apps,
00:11:57 you, as a partner or customer, have a large number of Fiori apps, and we need to keep them
running.
00:12:05 So all changes need to be compatible. And this is the main advantage of SAPUI5
00:12:11 compared to, maybe, non-SAPUI technologies. We always consider this compatibility.
00:12:20 So, when implementing those changes of the UI5 evolution project,

8
00:12:24 we were able to drastically improve performance. And you can see here a couple of numbers.

00:12:31 The numbers are for start up of a Fiori application.

00:12:36 So when starting up an application, the screen builds up gradually.
00:12:41 There are first UI controls, maybe the background, then gradually more and more UI elements
build up
00:12:48 until the end user is able to interact with the screen. And you can see here the numbers.
00:12:54 There were considerable improvements we achieved. The fourth topic is UI5 Web
Components.
00:13:05 A Web component, delivers SAP's user experience out of the box.
00:13:12 The Web component brings design, brings enterprise-grade features like accessibility
00:13:19 and so on. It comes with HTML and CSS,
00:13:24 meaning the UI5 Web Components can bring up something visual, visual elements on the
screen
00:13:31 and it also comes with Java script. So there's also some behavior.
00:13:36 Imagine a user who has to pick a date on the screen.
00:13:41 So you get a date picker and you also have some behavior,
00:13:45 for example, in the date picker you can page to the next month or next year.
00:13:51 So if we hear this, this is very much the same as with controls from SAPUI5,
00:14:00 they offer the same. So you might ask what's the news here?
00:14:04 And the news, you can see at the bottom here, this is some HTML coding,
00:14:10 which includes a UI5 Web Component, in this case a button.
00:14:14 And it's just plain HTML coding. So there's no SAP stack,
00:14:20 no SAP Cloud Platform, no NetWeaver stack involved.
00:14:24 It's just plain HTML. And in a second, we'll see why this is important.
00:14:32 First, let's have a look at UI5 Web Components. There's a homepage for the Web
components,
00:14:46 and you can test one Web component, and this is a date picker, as I mentioned.
00:14:51 So you can see the Fiori design, you can pick a date
00:14:58 and you also have some behavior, as I mentioned, to switch to the next month.
00:15:04 And on the right, you can see how to implement this in plain HTML.
00:15:11 And in the Get Started section here, you have a kind of playground.
00:15:16 You see a list of all the UI5 Web Components, a growing list.
00:15:20 So they are simple Web components, but also more complex ones
00:15:24 like, for example, the table view. So, we have lots of documentation here
00:15:31 for developers, and we also have some demo apps. And as you can see here
00:15:38 there are demo apps to be used with React, with Angular, or Vue.
00:15:43 And this is the important aspect. Let me go back to the slide.
00:15:51 If we look at the UI5 Web Components just by using HTML, we can make use of that.
00:15:59 So, as long as you are on the classic SAP stack, SAP Cloud Platform, NetWeaver,
00:16:04 you have the full stack of technologies for Fiori, for SAPUI5,
00:16:09 then you're covered, you're good. But if you have other solutions,
00:16:13 maybe acquired solutions at SAP, or even non-SAP solutions,
00:16:19 and they use different UI technologies, such as React, Angular, or Vue,
00:16:24 they all have one thing in common, which is they use HTML.
00:16:28 So they can also make use of UI5 Web Components. So, the important thing here is that
00:16:37 by using either SAPUI5 or UI5 Web Components,

9
00:16:43 you can bring a consistent Fiori user experience to your whole SAP portfolio
00:16:50 and the SAP solutions, and even non-SAP solutions, by the way.
00:16:56 So, now we have talked about two different options, and there's actually a third option.
00:17:01 And let me help you to decide what's the difference
00:17:05 and when to use which option. Let's start from the bottom.
00:17:09 The minimal thing you want to have is some Fiori design
00:17:13 and maybe some behavior. Remember the date picker I showed you.
00:17:18 And UI5 Web Components bring exactly that. If you're an application developer,
00:17:23 you might want to have more. You might want to have a full application framework
00:17:28 with features like navigation and data binding. Then SAPUI5 is the right choice.
00:17:35 Or there's Fiori elements. So imagine you're developing many Fiori apps,
00:17:40 not just one, many. Then you want to do this in an efficient way.
00:17:44 You don't want to copy all your coding many times, which would be a challenge,
00:17:49 for example, think of maintenance. So, if this is the scenario,
00:17:53 then SAP Fiori elements is the right approach
00:17:56 and we'll cover that in the next unit. Okay, before I end this unit,
00:18:02 I have two more things to mention. One is UI integration cards.
00:18:08 When you heard about the Fiori 3 design, you already heard about the cards.
00:18:12 They're very flexible from design aspects, flexible in size,
00:18:16 flexible in what they can display. But they're also flexible from a technology point of view.
00:18:22 So just by configuring them with a JSON coding, you're able to use them in many different host
environments.
00:18:32 So you can see this is another effort to bring a consistent Fiori design
00:18:37 across a portfolio of many different products. And we can have a look at the
00:18:51 card explorer, I just need to launch the demo kit here again.
00:18:59 So also in the demo kit, there's a tool section, and in the tool section
00:19:04 we have the cards explorer here and there's an option to explore the samples.
00:19:11 And again, you see on the left different card types, different card features,
00:19:16 for example, the list card. And on the right, you see the JSON coding
00:19:20 to configure this card. For example, I can change here
00:19:24 there's a header list card with top five products and I can change this here
00:19:29 in this playground for openSAP.
00:19:36 So again, it's very simple to configure this. It is independent of different technology stacks,
00:19:43 and it can be used in many places. Now, this is the last point I need to mention.
00:19:54 It is OpenUI5. In order to open up SAPUI5
00:19:58 to the open source community, we created OpenUI5.
00:20:03 It can be consumed via npm or Github. And it's being developed by SAP
00:20:09 in collaboration with the open source community. So you can leverage Fiori user experience,
00:20:16 the UI5 controls, even outside of any SAP context.
00:20:21 And many companies do that very successfully. So, let me wrap up this unit.
00:20:28 So, you learned that SAPUI5 is a powerful UI technology for business apps.
00:20:34 SAPUI5 supports consistency with the Fiori 3 design. It supports performance
00:20:42 with the UI5 evolution project. And it supports openness with OpenUI5
00:20:48 in the UI5 Web Components. So that concludes this unit.
00:20:55 And the next unit will give you an overview of SAP Fiori elements.
00:21:02 Thank you, and goodbye.

10
Week 3 Unit 3

00:00:04 Hello, and welcome to week three, unit three, of our openSAP course,
00:00:08 SAP Fiori Overview. Last week, you heard about how UI5 gives you
00:00:14 the power and flexibility to build great Web applications. Today we're going to talk about how
Fiori elements
00:00:22 speeds application development, the advantages of a metadata-driven framework,
00:00:27 and how Fiori tools further accelerates SAP Fiori app development.
00:00:33 We created SAP Fiori elements to help our own globally distributed development teams
00:00:39 build apps for SAP S/4HANA. The goal was to make developers more efficient,
00:00:44 allowing them to create apps that are consistent from team to team,
00:00:48 all of which contribute to the ability for you to help your organization scale good UX.
00:00:55 SAP Fiori elements is a collection of several page types that form the foundation of your app.
00:01:01 The template includes layout, formatting, navigation, search, and tools to modify the standard
pages.
00:01:09 Building apps from the standard page types means the developers can focus on the business
logic
00:01:14 and use the user interface that SAP provides. Using this template-based approach means
00:01:20 the apps you and your teams create will be consistent, both with each other and with the apps
that SAP ships.
00:01:28 And with the ability to quickly and consistently create standard Fiori apps,
00:01:33 you will be able to scale a great UX across your organization.
00:01:39 What does SAP Fiori elements give you out of the box? We provide page types that enforce
the general layout
00:01:45 of a page in your application. For example, a list report application
00:01:51 will always look consistent in terms of the layout of the search box on top of the page
00:01:56 and the grid below that contains the results. We also provide standard UI logic out of the box,
00:02:02 not just the design and layout of the screen. This means that when you click on an object in
the grid,
00:02:09 it will go to the page for that object. If the standard page type is not sufficient
00:02:14 to meet your needs, you can customize your app
00:02:17 with more controls and more specific behaviors. Fiori elements provides five page types.
00:02:25 While this might not seem like much, it turns out that it covers approximately 80%
00:02:29 of the scenarios of interacting with SAP back- end data. This is based on our own experience

00:02:35 building apps for SAP S/4HANA. Your results may vary.
00:02:40 An overview page provides a summary of a specific domain. It can contain various types of
lists, charts, and graphs.
00:02:49 You would generally link to this page from your launch pad. List press detail is the most
common
00:02:55 family of apps you can create with SAP Fiori elements. A lot of existing SAP apps follow this
pattern,
00:03:03 where the first page contains a list of objects, and you click on one of them
00:03:07 and then see the object page below. If your object is comprised of a bunch of sub- objects,
00:03:13 you can click on those and navigate further down in your application.
00:03:18 We provide several variations of the list page. The standard list report has a number of filtering
options
00:03:26 where the user can filter the information on the fly and see only the objects that interest them.

11
00:03:32 Worklist is the simplest version, where different tabs correspond to predefined filters,
00:03:38 such as different phases of a workflow. The analytical list page is the most sophisticated,
00:03:44 with embedded analytics capabilities and visual filters. You can combine different applications,

00:03:51 different list types, on a single page, if that's what your application needs.
00:03:58 One of the main accelerators in SAP Fiori elements is the UI logic that's built into the standard
page.
00:04:05 This includes simple logic, such as navigation between pages or between apps.
00:04:10 It provides searching, sorting, and filtering capabilities within the lists.
00:04:16 We also take care of variant management that allows the user to store and retrieve
00:04:20 his or her screen configurations by selecting the columns
00:04:24 and filter what they want to see in that list. Editing scenarios are also supported,
00:04:30 so if you choose to enable that, you can add, edit, or delete
00:04:36 objects within your application. All of this together represents a lot of code
00:04:43 that you and your development teams don't need to write, because we've provided it for you,
00:04:47 and this saves you significant time in the development process.
00:04:54 If the page types and the UI logic that we provide are not enough,
00:04:58 you can extend the app according to your needs. If this is the case,
00:05:02 part of your app will contain the standard UI5 programming model,
00:05:06 with controls and behaviors in JavaScript that the page type provides
00:05:10 with a corresponding UI and logic. The rest of your application is generated from metadata
00:05:17 that you provide in the form of annotations. For example, you can create custom columns and
tables
00:05:24 or custom sections of an object page or bring in different elements to your list report.
00:05:29 You can also write your own logic by custom actions. The fewer changes you make to the
standard page type,
00:05:37 the greater the savings you'll have in terms of reducing your development costs.
00:05:44 Even with all the out-of-the-box content that SAP Fiori elements provides,
00:05:48 sometimes you might want many annotations to give your app the exact look
00:05:53 and functionality that you want. Developers need tools so they can achieve
00:05:57 the desired result even beyond what's standard in their preferred development environment,
00:06:02 whether it's SAP Business Application Studio or Visual Studio Code.
00:06:08 SAP Fiori tools makes it easier to build Fiori elements apps by simplifying many of the
common development tasks.
00:06:16 Now, Ashley will provide details on SAP Fiori tools. SAP Fiori tools covers the complete
00:06:24 end-to-end development cycle. The requirement gallery allows you
00:06:29 to collect requirements and validate that they can be achieved using Fiori elements
applications.
00:06:36 The critical component of the metadata-driven application is the modeling capabilities.
00:06:44 This diagram shows the general progression of the lifecycle.
00:06:48 This is how we approach the design of the tools. However, we also keep in mind that in reality
00:06:55 this is an iterated process, and you may need to go back and forth in the process.
00:07:01 So it's important for the tools to be flexible and work together.
00:07:08 These are the main components within SAP Fiori tools. In the demo, I will show you how
00:07:15 some of these work together to simplify app development. We'll focus on generating the
project based on user needs,
00:07:23 modeling capabilities, and providing context-sensitive help

12
00:07:28 that can inject code into your project. The tools work together to complement each other
00:07:36 to simplify the different phases of developing a Fiori elements application.
00:07:42 It is designed to be flexible and adaptive to the iterative process.
00:07:47 At the same time, you can always see the changes you made in your project
00:07:53 using an application view during design time. Now that you understand the vision and goal
00:08:00 for SAP Fiori tools, let me show you a demo.
00:08:06 Hello, this is Ashley Tung, Area Product Owner for SAP Fiori tools.
00:08:12 The tools simplify the development of Fiori elements applications.
00:08:17 It is a collection of extensions that can be installed locally on your laptop
00:08:22 or they can be deployed in a hosted environment, such as SAP Business Application Studio.
00:08:29 Today, I'm going to show you how to use the tools to create a list report object page
application,
00:08:36 which is one of the most commonly used Fiori elements floorplans.
00:08:41 What I'm showing you on my screen is Microsoft Visual Studio Code
00:08:46 with the tools installed locally on my laptop. When the tools are released
00:08:52 into the Visual Studio Code marketplace, you will be able to install or update the extension
00:08:59 with the click of a button. I told you that we were going to create a new app today,
00:09:05 so let us switch to the project explorer. The first thing I will do is to start a command palette,
00:09:12 which is the one-stop-shop for all functions in Visual Studio Code.
00:09:18 Here, I can see all the commands for SAP Fiori tools. The first step is to create a new project
00:09:26 by selecting the template. All Fiori elements applications require an OData service.
00:09:35 I have the URL saved to the clipboard, so I'm going to paste the URL to the OData service.
00:09:43 The app generator is smart to analyze the metadata of the service and already determined the
main entity,
00:09:51 so I can go to the next step. Here I just need to enter a name for my project
00:09:56 and start a generation. It is pulling the metadata from the server,
00:10:02 generating the project file, and doing an NPM install to create
00:10:07 the dev environment for the application. It is finished, so we can take a look
00:10:13 at the project structure it created. Because I'm using a service that
00:10:19 already has annotation predefined, I can already start the app.
00:10:24 There are two options for that, and I'm going to choose to preview the app in the browser.
00:10:32 The preview shows me the app using mock data, so I do not need to be connected
00:10:37 to the server to test my app. I want to show you how to add a new column to the table.
00:10:46 To do that, we can use the service monitor to see the list of entity types.
00:10:54 I know the main entity is the product, so I will select that,
00:10:58 and then navigate to the annotations. The annotations can come from the metadata, server,
00:11:08 or local annotation files. Let's take a look at the service site annotations,
00:11:14 where I find the annotation for the line item that defines the column that you are seeing on the
table.
00:11:23 In order to make changes, I need to override this. When I do that, it copies the line item
annotation
00:11:31 to the local annotation file. From here, I can open the local annotation file
00:11:38 and use the XML LSP to help me add a column. You can now see me doing this.
00:11:47 I am using CTRL + Space to invoke the autocomplete. I am adding the subcategory column.
00:11:57 After saving the change, let me switch over to the preview I get.
00:12:04 The change has already been detected, and I can already see the new column
00:12:09 being added to the table. I can drill down to the object page

13
00:12:14 to see the details of the product. It is a bit empty right now,
00:12:19 so we need to add the content using annotations. I want to create a section of facets
00:12:26 to show more information about this product. I will also add another section
00:12:59 to show the product reviews in a table. Let's switch over to the preview again
00:13:29 to see that we now have two tabs in the object page, with more details on the product and a
table of reviews.
00:13:39 Looking at this app, I would also like to include a chart to show the sales data of the product,
00:13:48 so let's go back to our project. The chart annotation is more complex,
00:13:54 so I will launch guided development to help me do that. The guided development provides
step-by-step approach
00:14:05 to building code snippets. It starts with documentation
00:14:09 of the feature, followed by the steps. In this case, I can use the drop-down boxes
00:14:16 to select the information I need for the chart. As I make changes, the code snippet below is
being updated.
00:14:37 I just need to click on the Apply button to have the code snippet inserted
00:14:41 into the correct position in the annotation file. Now that I have the definition of the chart,
00:14:51 I need to consume it so I can see it. So I will create another section in the object page.
00:15:10 Let's see how it looks in the preview. We now have this third tab
00:15:16 to show the net revenue per customer. There is one more thing I would like to do in this app.
00:15:25 I want to be able to drill down to the details of the review.
00:15:31 With the page map, I can visualize the application structure.
00:15:36 We added a new column in the list report page and created three sections for the details
00:15:45 in the object page. I will now add another object page
00:15:50 for the details of the review. I just need to pick the navigation property
00:15:55 to the review entity. With that, the arrow on the page will now allow me
00:16:10 to navigate to the new object page. I can continue to build the page,
00:16:15 but you get the idea. SAP Fiori elements is a step forward
00:16:22 in reducing the development cycle for Fiori apps. The SAP Fiori tools simplifies it even more.
00:16:33 Whether you choose SAP Fiori elements or freestyle SAP UI5 applications
00:16:40 largely depends on your requirements. When you decide that you want to use SAP Fiori
elements,
00:16:47 you can use SAP Fiori tools that are specifically designed to support the full development cycle

00:16:54 of SAP Fiori elements applications. In this unit, you learned how SAP Fiori elements
00:17:02 makes developers more productive. You also learned that you can modify a standard page
00:17:08 by using annotations. I also showed you how to use SAP Fiori tools
00:17:15 to make the development process simpler. In the next unit, we'll show you how to create
00:17:22 OData services for SAP Fiori applications.

14
Week 3 Unit 4

00:00:05 My name is Christian Georgi, and I'm a product owner for the SAP Cloud Application
Programming Model.
00:00:10 And my name is Carine Tchoutouo Djomo, product manager for the ABAP Platform.
00:00:15 In this unit, I will give you a compact overview of the ABAP RESTful programming model.
00:00:20 We are going to focus on how you can develop OData services, which serve as a back end
00:00:25 for your SAP Fiori application. Let me introduce you to this topic.
00:00:32 You are going to learn about the two major REST-based enterprise programming models of
SAP.
00:00:38 These are the SAP Cloud Application Programming Model, or CAP for short, with which you
can develop OData services
00:00:45 in Java or Node.js JavaScript. Secondly, you will see the ABAP RESTful Application
Programming Model,
00:00:51 or RAP for short, which allows you to develop OData services
00:00:56 with the well-known ABAP programming language and infrastructure.
00:01:02 This slide shows the structure of an SAP Fiori application at a high level.
00:01:08 First and foremost, there is Core Data Services, or CDS, which acts as the ubiquitous
modeling language.
00:01:15 Using CDS, you can declare what your domain model looks like and how it maps to the service
model.
00:01:22 One layer up is where we find the enterprise programming models.
00:01:27 This is the place for the runtime components that do the heavy lifting of an application.
00:01:32 They implement things like generic support for CRUD requests, including extensibility,
00:01:37 database persistency with SAP HANA, support for SAP Fiori draft documents,
00:01:43 or convenient connectivity to other services of SAP Cloud Platform.
00:01:48 In addition, they manage the custom code that application developers write
00:01:52 to enhance the back-end logic. Both the SAP Cloud Application Programming Model
00:01:58 and the ABAP RESTful Programming Model integrate quite symmetrically in this layer.
00:02:03 This means the client part, like SAP Fiori, doesn't need to care if the application's back end
00:02:08 was developed with one model or the other. In the next layer upwards, there are protocols,
with OData
00:02:16 and REST as prominent examples. These establish HTTP APIs that the clients can rely on
00:02:23 and that the bottom layers need to implement. And on the top, you see the client software.
00:02:28 This could be browser libraries like SAP Fiori or SAPUI5, but also other clients
00:02:34 like native mobile apps, or even test tools like Postman. Let's take a closer look at the first
option,
00:02:46 the SAP Cloud Application Programming Model. The key building block and backbone of CAP
is CDS.
00:02:54 Its declarative nature fits really well the need to capture service definitions, data models,
00:03:00 and queries. Next up, there are the service SDKs.
00:03:06 These are libraries for both Java and Node.js, which you use to expose and consume
services.
00:03:12 The SDKs also include out-of-the-box integration to lower-level platform services,
00:03:17 such as authentication and messaging. We provide first-class support for SAP services and
tools
00:03:25 like SAP HANA and SAP Business Application Studio, our IDE of choice,

15
00:03:30 plus integration to other IDEs, like Visual Studio Code and Eclipse. These are some of the
tasks that the programming model
00:03:41 wants to support developers with. They range from starting a project to defining
00:03:46 and running services, connecting to databases, serving front ends, adding test and business
logic,
00:03:52 wiring things to cloud services, and deploying the application to SAP Cloud Platform.
00:03:58 Let's see some of these steps in action. I will start right off the bat with a clean terminal
00:04:08 and I will use the CDS command line utility to create a project.
00:04:14 I'll use the CDS init command and give it a name, let's say, bookshop,
00:04:22 just like that, then go inside the folder,
00:04:28 and open Visual Studio Code using that command line utility here.
00:04:34 Also installing the dependencies behind the scenes. Okay.
00:04:39 So, VS Code has opened. Let me zoom in a bit.
00:04:43 That's the project structure of our little application. You see it's basically just a list of empty
folders
00:04:48 and some configuration files. The first thing I could try to do, right out of the bat,
00:04:53 that might be surprising to you, trying to start the application, actually.
00:04:58 I've opened a terminal here in VS Code, and I can, again, use the CDS command line utility
00:05:03 and type in CDS watch. And what that will do, it will try to start the application
00:05:09 and relaunch it whenever a file change occurs. This time, in this situation, it says,
00:05:14 well, there is nothing to start off, and that's what we now will add.
00:05:20 I will create a file called schema.cds,
00:05:26 any .cds file will do, and fill in some content.
00:05:33 I've prepared a bit of content here, which is CDS definitions.
00:05:40 You might have seen that before from either the ABAP or HANA site.
00:05:45 It basically defines some entities. By the way, you can also use the outline here
00:05:50 to make yourself familiar with the structure of the file. It defines some entities like Books,
Authors,
00:05:56 Orders, and OrderItems. Books basically has a number of attributes here,
00:06:02 and then links to the Authors entity, you see that through an association.
00:06:08 The Author then links back to Books, to many Books. Orders has an ID and order number,
00:06:14 and links to a number of OrderItems through composition, and these OrderItems are defined
here.
00:06:20 So it's a quite straightforward data model, but it gives us enough interesting things to talk
about.
00:06:29 For instance, you see that using statement here that imports the entities, like the managed
entity.
00:06:35 You'll see that appearing quite often with that colon notation, and it means
00:06:39 these entities inherit from the managed entity. And if you hover over it and hold Control,
00:06:46 you can actually see what's inside that manage entity.
00:06:50 Actually it's an aspect, like a type definition, with well-known administrator fields.
00:06:54 You might also know that from the ABAP environment like the typical created at, created by
fields, and so on.
00:07:01 And these get automatically filled at runtime. In the same way, by the way, the keys
00:07:08 are automatically filled if they are UUIDs. You see some notations already here
00:07:14 where you can nicely add some text, or even localized keywords over there,
00:07:21 which means at runtime we can serve data in different languages.

16
00:07:25 It's a bit like the ABAP text tables. Okay, so that's our database, data model, so to say.
00:07:33 Next up is the service model. I call that something with service.cds,
00:07:38 maybe even cat-service, because we want to create a catalog service,
00:07:45 like so. What that does is, basically, it uses the other file,
00:07:49 our schema.cds file here, imports entities, and it defines a CatalogService
00:07:55 that is going to be served at the /browse path. And it just repeats on these entities,
00:08:02 basically just projecting on the entities that we have just imported from the schema.cds file.
00:08:08 You might also place them side-by-side so that you can basically see that's a one-to- one
mapping
00:08:14 to just keep things simple. Down there on our watcher, CDS watch is still running.
00:08:19 You've seen that it now has managed to launch the application without us having to restart
anything.
00:08:25 I can click here, and, sure enough, we see the application running, so that's already the full
application.
00:08:35 We can, for instance, click on $metadata. We see OData, metadata, and version 4.0 this time.

00:08:43 We can also click on Authors or Books, see that nothing is served, of course, there is no data.

00:08:48 But it seems to be at least running, which is quite encouraging.

00:08:53 The next thing we will probably do is to have some data
00:08:59 that I will put inside. So let me do that real quick.
00:09:04 And I copy in a data folder here. And what that data folder contains
00:09:12 is just, really simple, two CSV files. And down there you'll see that our watcher
00:09:17 has already detected that, and says filling this entity with that CSV file.
00:09:24 Why could it do that? Well, because the CSV file is named exactly the same as the entity,
00:09:29 so it can automatically fill in SQLite in-memory database.
00:09:36 See that? So that's what is backing our application.
00:09:39 So if we go back to our application and now click the Authors entity, for instance,
00:09:44 we see now, all of a sudden, data. So that's really an application that is backed
00:09:49 with a database, SQLite, in this case.
00:09:53 Cool. So the next thing we could maybe do
00:09:57 is add some logic. Right, what is an application without logic?
00:10:02 Business logic. We create a JavaScript file,
00:10:09 which is named exactly the same as the CDS file. Right, see the same name?
00:10:14 With that, we allow the framework to automatically detect our code.
00:10:18 You'll, by the way, see that already, down near our watcher, it has detected this file.
00:10:23 Now let's create some handler code here, like so.
00:10:33 And you'll see that, basically, this file just exported JavaScript function, okay,
00:10:40 and it adds two what we call event handlers. One is in the catalog service,
00:10:47 after reading of Books for each of the entities,
00:10:53 the book, whenever the stock exceeds a certain value,
00:10:57 please modify the title and give a hint to a discount. Let's check that.
00:11:02 Let's go to the Books, list them all, and find, go through them, and sure enough,
00:11:07 you see that some of them got a little discount hint. It's exactly these that have enough stock.
00:11:15 So this is how we can tell that our code was actually already executed.
00:11:20 We don't need to recompile anything, we just had to place a file there.
00:11:25 Likewise, you might see the same holds true for

17
00:11:30 this handler here, which before creation of orders,
00:11:35 for all the items we basically update the books,
00:11:39 and say okay, let's reduce the stock by the order amount,
00:11:44 but of course, only for the books that are ordered where the ID matches,
00:11:50 and only if there's enough stock. If there is not enough stock,
00:11:54 so no rows would be affected in the database, we yield an error.
00:11:59 So this is how we can basically add more validation code, more business logic to the
application.
00:12:06 The last thing I would like to show you is Fiori annotations.
00:12:12 So in any CDS file, typically in a separate file but for the sake of brevity here, I'll do that right
here,
00:12:19 in that file, we can add annotations. You see that, annotating the Catalog Service
00:12:25 Books, entities, so exactly this guy here, with a couple of annotations,
00:12:32 and these are UI.LineItem, and UI.HeaderInfo.
00:12:36 And this is exactly the original Fiori annotations, so there's no mapping in between,
00:12:40 no, like, different style of annotations. It's exactly what you will find also
00:12:45 in your documentation of SAP Fiori elements. Save that file.
00:12:50 Our watcher has found it, has already merged it into the model,
00:12:54 and let's check it. You see that little in Fiori link here?
00:12:59 Let's click on that and see what happens. It will basically dynamically spawn up
00:13:05 a little SAP Fiori elements application, and sure enough, we see exactly the line items
00:13:12 that we have just declared. We are missing still the titles of the columns.
00:13:17 I can quickly show you how you can easily do that by just using that @title annotation.
00:13:23 So let's maybe, for the ID of the book, give it a title,
00:13:29 and maybe Book No, like so. Just save it,
00:13:35 refresh the page, and here we go.
00:13:38 So this is how we basically can very easily have fast development turnarounds
00:13:44 for developing SAP Fiori applications with the SAP Cloud Application Programming Model.
00:13:53 And now I will hand over to Carine. Thank you, Christian.
00:13:57 Now I will give you an overview of the ABAP RESTful Programming Model, RAP for short.
00:14:03 Here, we have three key players. First, the ABAP development tools in Eclipse
00:14:08 for all ABAP back-end development activities, on-premise as well as in the cloud.
00:14:16 Then we have the ABAP language and the ABAP Core Data Services as the main languages
00:14:22 used for all standard implementation tasks. Last but not least, the powerful underlying
application
00:14:29 frameworks, which relieve developers of technical implementation tasks
00:14:34 and allow them to focus on providing the business logic in a protocol-agnostic manner.
00:14:42 The big picture of RAP shows its majors building blocks and the typical development flow.
00:14:48 It can be divided into three layers. Let's start from the bottom
00:14:53 with the data modeling and behavior layer, which deals with the data and the associated
business logic.
00:15:00 On one side, we have queries for creating list reports and analytical apps, for example.
00:15:07 They are defined using ABAP CDS. On the other side, we have the transactional world
00:15:15 of business objects. A business object, or BO for short,
00:15:19 consists of three parts, the data model defined using ABAP CDS,
00:15:25 the transactional behavior specified using a new development object
00:15:30 called the behavior definition, and the behavior implementation provided in ABAP classes.

18
00:15:38 The syntax of the ABAP language and ABAP CDS has been enhanced for this purpose.
00:15:44 On top of that, we have the business services provisioning layers, where the scenario-specific
scope definition
00:15:51 and exposure of an OData service occur. The business object projection is used to specify
00:15:59 the relevant subset of attributes and behavior of each business object involved.
00:16:04 Here, business objects can also be enriched with additional information if needed,
00:16:09 for example with SAP Fiori elements annotations. Then we have the service definition,
00:16:16 also a new development object, where the list of all relevant business objects
00:16:21 and other helpful CDS entities for a given service is specified.
00:16:31 And then the service binding, also a new development object,
00:16:34 where the concrete binding of a given service definition to a given use case and OData
protocol occurs.
00:16:42 At the top, we have the service consumption layer where the published OData services are
consumed.
00:16:50 Two use cases are supported here, the development of SAP Fiori apps,
00:16:54 and the consumption of the exposed web APIs by third parties.
00:17:04 The business object runtime mainly consists of two parts on the conceptional level.
00:17:09 The interaction phase, where all read, modify, and lock operations occur.
00:17:14 All changes made here are temporarily kept in the internal transactional buffer.
00:17:20 And the save sequence, where all check, save, and clean-up operations are processed
00:17:25 to persist the changes on the database. The question here is what are the developers
00:17:31 responsible for? Well, RAP offers two major BO runtime
00:17:37 implementation scenarios. In the first scenario,
00:17:41 the developers want to reuse existing business logic. Here, they are in charge of the BO
runtime
00:17:47 and have to implement adapters to integrate the existing logic into the RAP application
00:17:52 infrastructure using the unmanaged implementation. In the second scenario,
00:17:59 the developers want to start from scratch. Here, the RAP application infrastructure
00:18:04 provides standard create, read, update, and delete operations out-of-the-box.
00:18:09 No single ABAP code line is required for that. The developers can then focus on adding
00:18:16 the BO-specific business logic in dedicated code exits using the managed implementation.
00:18:22 This scenario is currently only available on the SAP Cloud Platform ABAP environment.
00:18:29 In general, the ABAP RESTful Programming Model is available on SAP Cloud Platform ABAP
environment,
00:18:35 as well as on SAP S/4HANA starting with release 1909. Let's now take a look at the major
development artifacts
00:18:47 of the ABAP RESTful Programming Model in the system. This is our demo application.
00:18:53 It is a simple travel processing app. We have here an SAP Fiori element
00:18:59 list report showing the different travel data stored in the back end.
00:19:04 At the top, we have a search and filter bar, we have a toolbar here for the different
00:19:10 end-user interactions, and the list. We can navigate to the object page
00:19:15 and edit the data. And save them.
00:19:23 So we can see some validations are implemented, so let's provide the correct data value.
00:19:30 Here we can make use of the defined value hub, and just select the data and save it.
00:19:37 Let's go back to the list report, and here we can see we have different operations.
00:19:42 We can create a new one, we can delete one, or we have a one-click action implemented here

19
00:19:48 where we can change the status to Booked. Let us go to the system and have a look
00:19:53 at the different development objects involved here.
00:19:57 First of all, we are here in the ABAP development tools in Eclipse,
00:20:00 and I've already created a connection to my back-end systems. Here, SAP Cloud Platform
ABAP environment.
00:20:09 And here is my demo package. So if you remember the big pictures,
00:20:13 let's start with the data modeling and behavior layer. So here we use Core Data Services
00:20:20 to define our data model in the text-based editor. Here we can see this is our root business
object,
00:20:28 and the data are selected from the table. We have association provided for additional
information,
00:20:35 and here, our projection list. With F8, we can just execute
00:20:40 and have a data preview in Eclipse. Then next step here is to define the behavior,
00:20:46 and this is done in the behavior definitions. Here we can see this is a managed implementation
type.
00:20:54 I can see here the class where all the BO-specific implementations are provided.
00:21:00 And here is some additional information regarding the persistency and the lock handling.
00:21:08 I can see that all the create, update, and delete operations are enabled,
00:21:13 I have some feature control information, some validations, all very simple,
00:21:17 and a determination to set the initial status of travel, and here, an action.
00:21:24 The implementation of the BO-specific implementation is provided in a class.
00:21:30 And as we can see here, the ABAP language syntax has been enhanced,
00:21:34 and this class for providing the behavior implementation of this entity, which is stored as a
local class.
00:21:45 Here in the outline, we can see the different methods that are implemented in this class.
00:21:51 So, this is ABAP with the enhanced syntax. So once this is done,
00:21:58 now it is maybe important here at this stage to emphasize that for the create, update,
00:22:04 and delete operations, no single code line is provided for the standard operations.
00:22:10 So, now let's go to the projection layer, so to the business services provisioning,
00:22:15 and here we have a projection with all the relevant attributes
00:22:21 that are used in this scenario, and I can see here we have also a lot of metadata
00:22:27 provided in the form of annotations, UI annotations, which are used later on
00:22:33 for rendering the SAP Fiori element application, but I can also see some search-related
information,
00:22:40 here is the value help definition. I have enhanced my view, so here I can enrich
00:22:47 the business object and, for example, for the field of status I have defined an action.
00:22:54 So once this is done, in the projection here,
00:22:58 we can go now also on the behavior layer and do a projection.
00:23:02 So, which operations, actions are allowed in this scenario, and here I have allowed create,
update, and delete,
00:23:10 and also, the action. So, now we can go on top of that and define
00:23:16 our service definition. And this is done in the new artifact,
00:23:20 called service definition too, and here I define all the business objects
00:23:26 that are involved, that are relevant for my OData service,
00:23:31 and I can also add additional CDS entities like for the value helps, and so on.
00:23:38 When we are through with that, now we go to the service binding,
00:23:43 and here, using a wizard, we can simply bind our service definition to the protocol

20
00:23:49 and the use case. In that case, it is bound to the OData V2,
00:23:53 and to the UI scenario because we can also choose to do it as a web API.
00:23:59 And very soon, we will also support OData V4, meaning that the developers can then expose
00:24:05 the same service also as OData before service.
00:24:10 And here we can use the service URL to access the OData service,
00:24:16 or we can just make use of the embedded function Fiori element to preview the app,
00:24:21 and then you will see again the app I showed you at the beginning.
00:24:27 That's it for the demo. The key takeaways of this unit are
00:24:33 SAP offers two powerful REST-based programming models on SAP Cloud Platform for
building enterprise extensions
00:24:39 for cloud-based and on-premise SAP solutions. Both programming models are based on CDS
data
00:24:46 and service models, exposed as OData APIs, backed by similar out-of-the-box request
handling,
00:24:53 and best support SAP HANA and SAP Fiori elements. The SAP Cloud Application
Programming Model
00:25:01 is available on SAP Cloud Platform for Java and Node.js JavaScript-based development on
Cloud Foundry.
00:25:10 The ABAP RESTful Programming Model is available on SAP Cloud Platform ABAP
environment,
00:25:15 and SAP S/4HANA. It allows the reuse of existing ABAP skills
00:25:19 and software assets. Another important piece of information,
00:25:24 customers and partners on SAP Business Suite can develop enterprise OData services
00:25:30 using the SAP Gateway Service Builder and the ABAP Programming Model for SAP Fiori.
00:25:38 Thanks, Carine. And you can already get started now
00:25:41 with the two programming models. Below, you will find links to existing openSAP courses,
00:25:46 getting started guides, and the free trial environment. Thank you for watching and enjoy the
next unit
00:25:53 about SAP Screen Personas. And goodbye.

21
Week 3 Unit 5

00:00:05 Hello, and welcome to the fifth unit of week three,

00:00:10 Simplifying Classic Transaction Screens with SAP Screen Personas, of the openSAP course,

00:00:18 SAP Fiori Overview: Design, Develop, and Deploy. My name is Sylvia Barnard
00:00:26 and I am product owner of SAP Screen Personas.
00:00:32 Topics you will learn in this unit are: how SAP Screen Personas
00:00:38 fits into the SAP Fiori user experience strategy; how to simplify classic transaction screens
00:00:47 to run on any device, this will be done in a demo,
00:00:52 and when to use SAP Screen Personas versus other UX transformation approaches.
00:01:00 There are three key points that you should know about SAP Screen Personas.
00:01:07 The first is rapid transformation. The second is SAP Fiori designs.
00:01:13 And the third is enterprise scale, which you will see on the next slide.
00:01:19 To the first key point, rapid transformation. SAP Screen Personas is an add-on
00:01:27 that is included in your NetWeaver license, and it lets you simplify quite easily
00:01:33 your existing SAP GUI transaction screens. You can also create a simplified
00:01:40 and a modified version of your transaction screens,
00:01:44 without the need of ABAP coding. Such a modified version of the transaction screen
00:01:51 is called a flavor. It renders your transactions
00:01:57 as SAPUI5 applications. And SAP Screen Personas
00:02:03 supports desktop transactions and all mobile devices.
00:02:10 Now to the second key point, SAP Fiori designs.
00:02:15 This means you can create the flavors, and you see your screens with SAP Fiori UX.
00:02:24 It allows you to provide your business users with a more intuitive user experience.
00:02:33 The third key point is enterprise scale. You should consider using SAP Screen Personas
00:02:43 when you want to simplify and modernize the UX of your SAP GUI transactions now
00:02:52 to have an SAP Fiori look and feel of your SAP Business Suite transaction screens,
00:03:00 and then you can decide to upgrade to SAP S/4HANA at a later point in time.
00:03:06 Or, if you are already on SAP S/4HANA, then you can use it, of course,
00:03:14 on your system there. Or you might want to deliver
00:03:19 functionality to an app, because the app that you would need
00:03:24 does not exist in the SAP Fiori reference library. Or you want to shorten the time
00:03:33 new employees need to get up to speed. What does this all mean?
00:03:41 Rapid transformation means you can create flavors fast
00:03:47 with a WYSIWYG and drag-and-drop editor that allows you to add, edit,
00:03:54 move, and hide controls. You are also able to automate
00:04:01 repetitive actions that need to be performed by the end users, and with this
00:04:07 you can increase the user productivity, as there is less chance for mistakes.
00:04:15 For SAP Fiori designs. In SAP Screen Personas, you will find
00:04:22 already built-in SAP Fiori themes, templates, and styles as resources
00:04:30 you can work with. And you will have the full SAP Fiori user experience
00:04:38 on your SAP GUI screens. This will allow you to have a consistency
00:04:45 across your downloaded or modified SAP Fiori apps
00:04:50 and your SAP Screen Personas flavors that you created
00:04:55 for your SAP GUI transaction screens. As for enterprise scale,

22
00:05:02 SAP Screen Personas flavors that you build are tightly integrated into the core ERP system,
00:05:11 which means that you can create a tile for your application that you have modified
00:05:18 with SAP Screen Personas in the SAP Fiori launchpad,
00:05:23 and launch it from there. And with this you can expand
00:05:28 your SAP Fiori coverage, for example, in SAP S/4HANA
00:05:35 and older versions of SAP ERP transactions, and all this, if you choose so,
00:05:42 without coding. I would like to mention here
00:05:46 that we have a very powerful Java Script editor that allows you to do
00:05:51 Java Script development as well. Here, I show you an example of before
00:06:01 and after a transaction screen has been modified with SAP Screen Personas.
00:06:08 On this first screenshot, you see an original SAP S/4HANA search screen
00:06:16 that has still all search criteria, and as you know,
00:06:21 there are quite a lot of search possibilities. What we usually see is that
00:06:27 only three to six search options are filled by the end users.
00:06:34 On the second screenshot, there is the result screen
00:06:39 based on your search criteria, which means if you want to do a new search,
00:06:44 you have to navigate back and forth between the search and the result screen.
00:06:52 What you see now on the right side is the third screenshot,
00:06:57 which is a screen after it had been modified with SAP Screen Personas.
00:07:03 Here you see on top the most common search fields
00:07:08 that the users usually need to get results, and there are only four search criteria left.
00:07:16 There is material, sold-to-party, PO number, document number, with from and to.
00:07:25 There was even a graphic added that did not exist
00:07:29 in the initial transaction. The outcome is that you can search
00:07:35 and see the results on one screen, with a nice graphic in addition,
00:07:42 and all this with the SAP Fiori design that gives you a consistent user experience
00:07:50 across all devices. I already talked about the SAP Screen Personas tool itself
00:08:00 and that you can streamline your existing business processes
00:08:04 with the WYSIWYG tool, where you can simplify with drag and drop controls
00:08:10 and you can drop your controls around. You can rename labels,
00:08:16 you can move a control to a different location on the same screen,
00:08:21 and move a control from one tab to another within the same transaction code.
00:08:26 And in addition, I would like to name a few more important actions here.
00:08:33 You can personalize your existing transaction screens by role or by user groups
00:08:39 to improve the overall usability. You can reduce necessary keystrokes.
00:08:48 You can combine data from different tabs and screens to improve the productivity of users.
00:08:56 You can focus on desktop screens and you can support all mobile devices.
00:09:03 You can reduce the training time for new users drastically.
00:09:10 All your transactions will automatically be rendered as SAPUI5 applications.
00:09:20 Now to the demo. I will show you how to create
00:09:26 an adaptive flavor that can run on all devices, and in this demo, on an iPad.
00:09:34 So, to set the frame for you. Please meet Anna,
00:09:39 a business key user for maintenance planning.
00:09:44 She has the task to simplify the transaction UIs for IW51,
00:09:51 this is create service notification, for a group of 25 service technicians.
00:10:00 And they are constantly working at the customer site to maintain

23
00:10:04 and repair machines. All the necessary user research and interviews
00:10:10 have been done and analyzed, and first wireframes were created.
00:10:17 Let me now switch to the demo. So, here you see the iPad of a service technician,
00:10:28 and this is actually the flavor that Anna has created for him, or for them,
00:10:35 for those 25 service technicians. So, here you see the Create Service Notification
00:10:43 as a tile. So he clicks on that
00:10:47 and what he sees now is the notification type. As he has several notification types,
00:10:56 so not just the service request, this is not automated, but of course
00:11:02 this step could also be automated. So he selects the S3,
00:11:09 and now he sees the service request with all the data that is needed
00:11:15 for his case here. And he is currently standing in front
00:11:21 of the broken machine part. And what he does now is he clicks
00:11:27 on this icon, on this QR code icon, to scan the QR code of the broken machine
00:11:35 and then all the data will be loaded in this application here.
00:11:47 And of course, well, as this is only a demo system there is not too much data in here.
00:11:52 So now he can type Machine part XYZ needs to be replaced,
00:12:06 and so on. And then, of course, save it.
00:12:14 So, this is how this looks in use while the screen also gets adapted
00:12:25 for portrait and landscape mode. And now I would like to move
00:12:34 back to Anna. And let me just quickly do that.
00:12:53 So here, she is already in IW51. So she types in S3,
00:13:08 and this is what she has already created. But I would like to show you, of course,
00:13:21 how she did that, and therefore I have to open this P,
00:13:28 and that allows me to see the flavor manager with the two flavors that were already created.
00:13:38 I will quickly move to the iPad flavor that she has created,
00:13:46 and that is a different version. That is with more data
00:13:51 and here she has used viewports. Viewports is something
00:13:55 where you can create virtual screens. So you can cut a really complex transaction
00:14:04 into different parts, and here the service technician
00:14:09 could click on the description button and then would see more data.
00:14:14 So this comes in handy where there are several steps to fill.
00:14:21 But now, let me show you how she did that. First of all, she has created a flavor
00:14:30 from the original transaction, which is always there.
00:14:37 And she calls that Desktop and openSAP.
00:14:49 And now she knows, for example, that is now the flavor editor,
00:14:58 where there are a lot of things she can do, and she knows, for example, in this tab
00:15:04 additional data, there is absolutely nothing behind it.
00:15:08 So she just hides that tab for the desktop flavor.
00:15:16 Now she saves it and goes out of there again. So this is now the flavor she has created,
00:15:22 but she wants to create the iPad flavor. So she calls it iPad
00:15:32 and, again, openSAP. And now this is not for the Samsung Google Nexus
00:15:40 but for iPads, and the service technicians,
00:15:47 they have an Apple iPad Pro. So she selects this.
00:15:51 The width is also now accordingly to that
00:15:56 and she creates an adaptive flavor. And what you see now is
00:16:02 that there is this vertical pink line, and here she sees

24
00:16:09 everything that is beyond that line on the right will not be seen on an iPad,
00:16:16 so there the data will be cut off. So what she basically has to do
00:16:20 is rearrange the data in such a way that it is not cut off.
00:16:26 And as for the service technicians on an iPad, they need less data.
00:16:34 She simplifies it now according to that. So she selects
00:16:48 the screen elements that she wants to use, and in this case it is the whole block here
00:16:57 that she moves over there. And then she takes the additional data
00:17:07 and also moves it over there. And now she clicks on the malfunction breakdown
00:17:14 and she takes the data, the start date and the end date, for example.
00:17:23 And so on. So she could also click on the location data
00:17:28 but she doesn't want to do that now. So she hides this box here,
00:17:34 and she hides the whole tab strip here, the whole tab strip container, to be precise,
00:17:45 and hides this menu bar on top. And now what she does is
00:17:50 move the data that she has selected, she moves it over there and places it.
00:17:58 And what her task would be next is to move everything
00:18:03 according to a good usability and to a good visual design as well,
00:18:09 because currently that is not very appealing. But she saves it here
00:18:16 and she goes out there, and she could also now set this flavor
00:18:23 as the default flavor, and then it would be shared
00:18:29 with her service technicians. With the final view,
00:18:36 this is the flavor that she has created.
00:18:42 Just one last thing. Behind this icon here,
00:18:47 the QR code search, there is quite an elaborate script.
00:18:53 There is first the right barcode script, that is a Java Script,
00:18:57 and there is then the scanner script that is also needed for that,
00:19:04 and this allows the service technicians to scan a QR code.
00:19:13 So with this, I would like to go back to the demo.
00:19:21 What you have seen in the demo was only a very short run
00:19:26 through a possible scenario. Other great examples for good use cases
00:19:32 for SAP Screen Personas are: simplifying an existing transaction
00:19:38 to run on a desktop; removing unused fields
00:19:43 on a complex purchasing transaction; merging content from across a busy HR transaction.
00:19:52 And those are just examples. There are, of course, many more.
00:19:58 To summarize where you can currently use SAP Screen Personas,
00:20:04 we have listed it here. On the on-premise side,
00:20:08 you can create flavors on SAP S/4HANA, on SAP Business Suite powered by SAP HANA,
00:20:18 and on older versions of SAP ERP. For the cloud side,
00:20:26 here SAP Screen Personas is supported on SAP Business Suite powered by SAP HANA,
00:20:34 which is the SAP HANA Enterprise Cloud. Here, you find a shortened list
00:20:44 of the supported minimum SAP NetWeaver Basis versions,
00:20:49 starting with the latest, which is SAP S/4HANA
00:20:53 with kernel 7.49 plus. And then it goes down from 750
00:20:59 with kernel 7.49 to 700 with kernel 7.22.
00:21:08 If you are interested in the complete list, you will find everything
00:21:14 in the information provided when you follow the links on the page.
00:21:23 You have seen during the demo what the tool is capable of.

25
00:21:27 I would like to help you decide how best to choose the right path or paths
00:21:34 for your SAP Fiori user experience. Focus on the area you want to work on,
00:21:43 with the transaction or the app you have in mind. Before you go further, know what your
business users
00:21:51 and your end users want, what they need, and what they do not use
00:21:57 and what they don't want. This all happens in the design thinking box.
00:22:06 Then you find out whether you are in need of a new business scenario,
00:22:12 or whether there is already an existing one. Let me go first to the right.
00:22:19 Yes, there is a business scenario available. You find an existing app
00:22:25 in the SAP Fiori reference library. Cool.
00:22:29 Then you can download the SAP Fiori app in question,
00:22:34 adapt it if necessary with SAP Web IDE, and then you have your SAP Fiori user experience.

00:22:43 Now let me go back to the question of whether there is an existing business scenario
00:22:48 with an existing app. This time, the answer is no,
00:22:53 there is no app. Here you can use SAP Screen Personas
00:22:58 to simplify your existing transaction screens according to your needs and in the end,
00:23:05 you will have your SAP Fiori user experience. Now let me go to the left of the decision tree.
00:23:15 If you need to start from scratch for a new business process,
00:23:20 building a new app will be the best answer.
00:23:25 If it follows common floor plans, you can build your app
00:23:30 by using Fiori Elements. If the answer to the question,
00:23:35 is there a common floor plan, is no, then develop your SAPUI5 freestyle app.
00:23:45 So, let me summarize. There are several approaches for you
00:23:51 where you can decide what to do. And it does also mean
00:23:59 that for you the solution might be that you build something
00:24:05 with SAP Screen Personas, and that you also develop your own app
00:24:10 with Fiori Elements, depending on your focus and your needs.
00:24:20 Here we have compiled a list of links for you where you can learn more
00:24:26 about SAP Screen Personas, how to get started,
00:24:30 where to find the next steps. In any case, have fun with it!
00:24:39 To wrap up, what you have learned in this unit. You know now how SAP Screen Personas
00:24:48 applies the SAP Fiori user experience to classic transaction screens.
00:24:56 You have seen the steps to transform an SAP GUI transaction
00:25:02 into adaptive flavors, and saw it in action in the demo.
00:25:09 You have a decision tree that helps you to decide
00:25:13 when to use SAP Screen Personas rather than building your own SAP Fiori app.
00:25:22 Thank you for watching this unit, and enjoy the next unit
00:25:27 about Creating Android Apps Natively or with the Mobile Development Kit. Goodbye and have
a good day!

26
Week 3 Unit 6

00:00:03 Hello, and welcome to week three unit six. In this unit, you will learn more about building iOS
apps.
00:00:09 My name is Santosh Kikkeri and I'll be your instructor for this unit.
00:00:14 Many of you might be wondering why you should really develop native mobile apps.
00:00:18 I'll discuss some of the benefits, talk about our strategic partnership with Apple,
00:00:22 and then dive deep into our offerings. SAP Fiori for iOS design language
00:00:27 to help you design delightful enterprise iOS apps. SAP Cloud Platform SDK for iOS
00:00:35 to help you start with your development journey. And then I'll point you to some great
resources
00:00:41 that are available for you to use today and wrap it up by demonstrating some
00:00:45 of the exciting capabilities of our products and offerings. SAP really provides
00:00:50 a very comprehensive user experience strategy, catering to a wide variety of devices
00:00:57 ranging from desktops, smartphones, tablets, smartwatches, and smart glasses.
00:01:04 Gartner estimates that by 2022, 70% of the software interactions
00:01:11 will occur on mobile devices. So what we've done is, we've provided you with some guidance
00:01:18 on things you should consider prior to designing mobile experiences. People are able to
choose where and when they want to work.
00:01:28 They want to be able to seamlessly transition their workflows from mobile to desktop and vice
versa.
00:01:39 They want to be able to have intelligent conversations with their business systems,
00:01:44 consume and integrate on device AI capabilities, connect with remote workers.
00:01:50 Think about how you're going to deliver mobile experiences for companion devices that are
performing specialized tasks.
00:01:59 Today, smartphones are really powerful. The current iPhone is millions of times more powerful

00:02:08 than the Apollo 11 Guidance Computer that put man on the moon 50 years ago.
00:02:14 That unlocks a lot of possibilities. And as you carry that with you all the time,
00:02:20 the power of enterprise is with you all the time. Here are some benefits of using native apps.
00:02:27 You get instant access to the operating system and on-device innovations.
00:02:34 You get a consistent user experience due to native look and feel.
00:02:39 And you can really unleash all of the native capabilities of the devices, such as camera, GPS
sensors,
00:02:46 and core machine learning capabilities. You get best-possible app performance
00:02:53 and there are excellent tools for you to develop, debug, and optimize performance.
00:03:02 Apple and SAP have partnered to drive mobile innovations in enterprise space.
00:03:07 Here is a quote from the CEO of Apple, Tim Cook. "SAP is the ideal partner to help us truly
transform
00:03:15 how businesses around the world are run on iPhone and iPad."
00:03:20 Apple and SAP are working together to reinvent business processes and workflows
everywhere
00:03:27 by bringing together powerful iOS features and seamless integration with SAP systems,
00:03:34 developers can innovate faster than ever. In the next few slides, you're going to see some
00:03:40 of the offerings for you to kind of, you know, get started for designing
00:03:44 and developing great enterprise experiences. So, we've created a design language, SAP Fiori
for iOS,

27
00:03:53 that unifies our deep understanding of business users' needs with good principles of iOS
design.
00:04:03 The design language provides loads of SAP Fiori UI components or building blocks
00:04:09 for you to design great experiences. In the example listed on the screen,
00:04:15 you can see how you can really take advantage of prebuilt controls and design a simple task
list
00:04:22 or integrate with charts, maps, or even with the optical character recognition technology
00:04:28 also known as OCR scanners. SAP Cloud Platform SDK for iOS provides loads
00:04:37 of great resources for developers to support their end-to-end needs
00:04:43 of application development lifecycle, and helps to connect seamlessly
00:04:48 with SAP systems like SAP S/4HANA, SuccessFactors, and much more.
00:04:53 Developers can build on the best practices that are delivered within the SDK.
00:04:59 There are three layers to the SDK. SAP Fiori for iOS.
00:05:04 This layer delivers the SAP Fiori user experience and also delivers the native iOS experience.

00:05:13 The second layer is the foundation. This helps with the integration to the SAP mobile services
00:05:22 and provides key enterprise services for connectivity, security, and so on.
00:05:29 And finally, you have the OData that helps you to manage back-end access
00:05:35 for online as well as offline operations. SAP Cloud Platform SDK for iOS
00:05:40 reduces total app development time. SAP IT is one of our biggest customers
00:05:45 and they have developed lots of SAP Fiori native mobile apps.
00:05:49 And based on their learnings, we can say that developers can reduce 25 to 30%
00:05:55 of their development time and designers can reduce 30 to 40%
00:05:58 of their design time by reusing the Fiori UI components that are provided within the SDK.
00:06:09 Alright. It's enough of me talking.
00:06:11 Let's see some of these products in action. I'll show you some of the exciting resources
00:06:17 that you can start using today. Then I'll show you how easy it is
00:06:21 for you to really create a fully functional app using Native Mac Assistant.
00:06:27 And then I'll show how you can unleash the native device capability, such as machine learning,

00:06:33 and build intelligent apps. With that, let's start with a demo.
00:06:41 Fiori design guidelines provide the recommended usage of every UI component.
00:06:45 The guidelines are the single source of truth for designers and developers.
00:06:50 Guidelines updates are in sync with technology releases. You can get guidance on Fiori
design principles,
00:06:57 detailed guidelines on how to use UI components such as controls and views.
00:07:03 Controls are for initiating actions and conveying information.
00:07:07 Views contain content such as text, images, and other UI elements.
00:07:13 Floorplan is an umbrella term that covers the different layout types such as charts, maps, and
so on.
00:07:20 You can download the sketch UI Stencils and start designing your own apps.
00:07:26 I'll open the downloaded file in the sketch design tool. At first, you can find all the recent
updates
00:07:34 to the design stencil. Every UI component available in the SDK
00:07:39 is delivered in pixel-perfect format to accelerate the app design phase.
00:07:44 You can browse the UI components. As you can see here,
00:07:48 you have lots of options to choose from. I'll pick one of the controls and play around.

28
00:07:55 Let me look for the contact cell. I can configure the contact cell to my requirements.
00:08:04 For example, I can choose to replace an image. As you can see here, it's a lot of fun
00:08:15 to play around with the design stencils and design your own app.
00:08:20 You can also look out for best practices and guidance on commonly used patterns such as
search, sort and filter,
00:08:29 error handling, offline operations, and so on. And then, you can also browse through
00:08:43 the large set of icons in the library. You have plenty of icons to choose from.
00:08:51 We've carefully chosen the color palette to deliver the best Fiori experience
00:08:56 for light and dark moods on your mobile phones. Apple started to support dark mode from iOS

00:09:06 You can find some examples of SAP Fiori for iOS rendered on dark mode.
00:09:14 In the next segment of the demo, I will take you through the SAP Fiori Mentor iPad app
00:09:19 that's available on App Store for you to download today. The SAP Fiori Mentor mobile app
00:09:25 provides interactive documentation for the SAP Cloud Platform SDK for iOS.
00:09:30 Streamlining the development of SAP Fiori native mobile apps.
00:09:35 The app allows you to view live previews of all UI components and change parameters
00:09:41 to see the effect immediately. This is the best way to browse
00:09:45 all of the capabilities of the SDK. As you can see here, I'm playing with
00:09:51 the UI component profile header. It's a lot of fun to you know, play with.
00:09:58 You can hide the image or you can hide the other components and see the effect immediately.

00:10:05 Let me open the OCR scanner. I'll try to scan my business card and you can see that
00:10:15 I'm able to scan the address field successfully. Also, I can easily generate the code for the UI
component
00:10:27 and simply copy and paste into my Xcode project. This really gives me a head start into
development.
00:10:38 SAP Fiori Mentor is a great way to accelerate your development project.
00:10:45 Switching gears a little bit, in this demo, I'll show how you can create
00:10:49 a fully functional iOS app with just a few clicks using the SAP Cloud Platform SDK for iOS
assistant.
00:10:58 Launch the SAP Cloud Platform SDK for iOS assistant on your Mac.
00:11:05 Click Create New and let's create a mobile app that connects to a sample back end
00:11:10 to get started quickly with default templates. Choose your SAP Cloud Platform mobile services
account.
00:11:18 Enter the application name and identifier. I'll call it openSAPDemoApp.
00:11:28 Click on Next. Then provide Xcode project configuration details.
00:11:55 I'll call the product MyDemoApp. I'll click on Finish.
00:12:01 This generally takes a few seconds. This generates a complete Xcode project
00:12:09 for you with just a few clicks. The SDK assistant now loads the OData services metadata.
00:12:17 This metadata describes the data model and the OData proxy classes that will be generated
00:12:24 for the Xcode project. As you can see here in the main storyboard file,
00:12:30 it shows a split view setup for generated master detail views.
00:12:37 You can see all of the starter code is generated along with your project.
00:12:48 You can browse through the file structure, and then let's run the app on iPhone 11 simulator
00:12:56 to see if we can render the generated app. Let's ignore all the warnings for now.
00:13:06 The demo app just opens up fine. Enter your SAP Cloud Platform credentials.

29
00:13:18 The generated app comes with predefined onboarding flows. You will see some of the
onboarding screens.
00:13:29 After you enter your credentials for SAP Cloud Platform, enter your username and password.

00:13:37 Click on Log On. So you can see the generated app brings you
00:13:47 a few of the onboarding screens. A few of the consent screens after you provide consent.
00:13:58 You can also subscribe for the notification. And then you can start playing
00:14:04 with the master detail application. You can browse through the collection of products.
00:14:09 Navigate back. Next step for you would be to work on adding
00:14:15 the visualization using SAP Fiori UI controls. As you saw, we were able to generate
00:14:25 a fully functional iOS app within just a few clicks. You can unleash the real power of native
apps
00:14:34 when you truly leverage the native device capabilities. In the next demo, I'll show you an app
00:14:39 that uses a camera to take a photo and then uses Core ML for image classification.
00:14:45 Here is a pre-prepared project that I will run on my iPhone. It's a simple app with the list of
customers and products.
00:14:53 I'll try to find a product based on a photo. As you can see here, I am taking a photo
00:14:57 of my MacBook. I'll click done.
00:15:00 Thanks to Core ML image classification capability, it fetches only the notebooks from the
product catalog.
00:15:07 Let's step back and see how we manage to get here. I imported image classification model
00:15:12 that I trained using Create ML and implemented product classification table view controller.
00:15:19 If you would like to build this app, then go to developers.sap.com
00:15:24 and check the image classification tutorial, and follow the steps outlined.
00:15:30 It's fun to train a simple image classification model and put it into action within the mobile app.

00:15:39 And this is how you build intelligent apps by taking advantage of all of
00:15:45 the native device capabilities. For example, camera and Core ML that is offered
00:15:51 by the device and iOS. Good luck with the rest of the tutorial.
00:15:59 All right, it's time to wrap it up. In this unit, you learned the value
00:16:04 of native mobile apps and when to use them. How Apple and SAP partnership helps you
design
00:16:12 the best experience for your users. How the SAP Cloud Platform SDK
00:16:17 for iOS facilitates mobile app development. In the next unit, you will learn more
00:16:22 about developing native android apps. You will also get a sneak peek into another technology
00:16:30 for developing native apps, which is the Mobile Development Kit.
00:16:35 Thank you for your time.

30
Week 3 Unit 7

00:00:03 Hello, and welcome to week three, unit seven of our openSAP course, Developing SAP Fiori
Apps.
00:00:11 I'm Mark Fogle, an architect on the SAP Cloud Platform SDK for Android team. In the previous
unit, we learned about developing iOS apps.
00:00:21 In this unit, we'll first look at creating native Android apps using the Android SDK
00:00:25 and the SAP Fiori Mentor app. Then we'll look at the Mobile Development Kit,
00:00:31 or MDK, and how it can be used to create cross platform mobile applications.
00:00:38 So let's get started. The SAP Cloud Platform SDK for Android implements
00:00:44 the SAP Fiori for Android design guidelines. These combine the best of SAP Fiori design
00:00:51 with Google Android material design. We provide a type system based on the SAP 72 font,
00:00:58 the SAP Fiori colors, and iconography, as well as a set of UI components
00:01:04 and the patterns for using those components. We also provide a set of sketch stencils for
designers.
00:01:12 The SAP Cloud Platform SDK for Android integrates seamlessly with native Android
technologies,
00:01:18 such as the Android Studio, where the SDK wizard provides the ability to generate Java
00:01:24 or Kotlin applications with generated OData proxy classes for connecting with SAP S/4HANA
00:01:31 or other SAP or third-party applications. It also provides an optional reference UI
00:01:38 using the Fiori UI language. Other components such as user onboarding,
00:01:45 networking and authentication, and client storage, and cache are provided as well.
00:01:53 Now let's take a look at SAP Fiori for Android in action. Now, the best way to experience the
SAP Fiori for Android design
00:02:02 is with the SAP Fiori Mentor app, which can be downloaded from the Google Play Store.
00:02:10 So, once that's installed, this will run on any Android device running Android version 6 or
higher,
00:02:16 but you're going to want to run it on a tablet to get the full experience.
00:02:21 Once installed, you can use that to explore various aspects of the SAP Fiori for Android
design, such as the colors,
00:02:28 the icons, the 72 font family, as well as UI patterns using the UI controls.
00:02:37 So you can see how best to combine those controls to produce a well-designed and well-
functioning application.
00:02:43 There's also a link for the SAP Cloud Platform SDK for Android download, as well as some
tutorials
00:02:50 on the developers.sap.com website. But the most interesting feature
00:02:56 is certainly the UI components. So this allows us to see on an actual device
00:03:03 how the UI components function and how they'll appear, and how they'll behave
00:03:07 if we turn various features on or off. So, this is an object header.
00:03:11 Let's go ahead and remove the KPI view and remove a couple of those tags to see how that
looks.
00:03:20 Let's take a look at another control. Let's look at the profile header.
00:03:25 So this is a UI control used to display information about a person.
00:03:30 And the nice thing about the Fiori Mentor app is it allows you to see how the controls are going
to look
00:03:35 on either a phone or a tablet. So here we're seeing the phone, let's switch to tablet.
00:03:41 That's how this control will look on a tablet. Now let's some turn a few of these features off.

31
00:03:46 So let's go ahead and change that detail image to detail image character and remove a couple

00:03:52 of those actions to get that down to a manageable number. And then when we press the See
Code button,
00:04:00 we're going to see Kotlin, Java, and XML code to generate that control and to give it the
appearance
00:04:08 that we've just created in the Fiori Mentor app. So, what I'm going to do now is switch over
00:04:13 to the Android Studio. And we'll take a look at an application that I created,
00:04:21 just with the standard Android Studio wizard. So we're going to make a few changes to this,
00:04:28 because this is what it looks like right now. It's got, you know, the Google default colors
00:04:34 and just a basic "Hello, World!" app. So let's go ahead and add in a dependency
00:04:39 to the SAP Cloud Platform SDK for Android Fiori component, and then let's change the app
theme to use
00:04:48 the Fiori theme instead of the standard app theme, and then, let's go ahead and remove those
purple colors that we saw.
00:05:00 So if we just remove these colors here, then we'll use the colors from the Fiori theme instead.
00:05:08 So if we just make those basic changes, and then relaunch the application, we should see
00:05:14 an immediate difference which is the use of the we'll see the use of the SAP Fiori colors,
00:05:19 and then we'll also see the Fiori 72 font being used. So already, we can see some of the SAP
Fiori design
00:05:31 peeking in there. So now what we're going to do is go back over
00:05:37 to the SAP Fiori Mentor app and take this XML. So this is layout XML.
00:05:43 And we're going to press Share Code. Now, if I were on an actual Android device,
00:05:47 I would need to send this to Google Drive or Gmail in order to transfer over to my device,
00:05:54 but since I'm on the emulator, I can just actually copy it to the clipboard, and then once that's
done,
00:06:03 I can go back over to Android Studio and paste it in directly.
00:06:12 So if we do that, that's all we need to do to replace just the "Hello, World!" template with our
profile header.
00:06:19 Now if we go ahead and relaunch the app, we should immediately see the profile header
appear.
00:06:25 And this should have the same appearance that we configured in the SAP Fiori Mentor app.
00:06:35 So there's our profile header coming up. And then if we switch back over to the Fiori Mentor
app,
00:06:50 you can see it appears exactly the same. So now let's go back to our presentation.
00:06:59 So that about wraps things up for the SAP Cloud Platform SDK for Android, and now here's Bill
to talk about the Mobile Development Kit.
00:07:08 Thanks Mark, my name is Bill Froelich, and I am the product owner for the Mobile
Development Kit.
00:07:12 In the second half of this week's unit, I will be providing an introduction to the Mobile
Development Kit,
00:07:17 and how it can be used to build cross-platform applications. Let's get started.
00:07:22 The Mobile Development Kit allows developers to rapidly build cross-platform native Android
00:07:28 and iOS mobile applications that are aligned with the SAP Fiori design principles, using an
easy to learn,
00:07:35 visual, drag-and-drop environment. It includes visual editors to help you design
00:07:40 your application screens, control layouts, and business logic flow.
00:07:45 The resulting application utilizes the SAP Cloud Platform SDK for Android
00:07:50 and iOS native platform controls for an amazing user experience.

32
00:07:55 It also leverages the SAP Cloud Platform mobile services enterprise features, such as user
onboarding,
00:08:02 secure access to your enterprise back-end data, push notifications, log uploads,
00:08:07 and easy lifecycle management, without having to deploy the application each time to your
mobile devices.
00:08:16 Development of your MDK application is done using the web-based Web IDE or Business
Application Studio editor.
00:08:22 An MDK editor extension provides additional functionality, such as wizards, application
templates, drag- and-drop UI controls,
00:08:29 and we call this building blocks that work together to quickly and easily create your mobile
application.
00:08:35 In addition to its robust offline and online capabilities, access to mobile qualities, such as the
camera
00:08:41 and barcode scanner, deliver a true cross-platform native support.
00:08:47 The first application developed using the Mobile Development Kit is SAP Asset Manager.
00:08:52 Asset Manager is designed for asset-intensive industries such as utilities.
00:08:58 Customers can easily configure the application and tailor it to their specific business needs
00:09:03 using the Mobile Development Kit. With cross-platform native development,
00:09:08 you use the MDK editor to create your application once and deploy it to Android and iOS.
00:09:16 Now, let's take a look at the Mobile Development Kit in action.
00:09:20 We'll start by taking a look at our Mobile Development Kit application running in both our
Android client, shown here on the left, and our iOS client on the right.
00:09:29 Both clients look almost the same, where the controls being displayed are actually the native
controls
00:09:36 from the SAP Cloud Platform SDKs for Android and iOS respectively.
00:09:42 The application functionality is broken up into a couple of different sections.
00:09:46 We've got an object header, just to give us some information, we're showing some days left in
the quarter
00:09:51 and what quarter we're currently in. We're also showing the four customers
00:09:56 and we have a list of promotional items, that we can use to drill into details
00:10:00 for that particular item, as well as we can edit the items if needed by clicking on the edit in the
upper- right corner.
00:10:08 We also have a list of all of our products, which we can access by clicking on the link there
00:10:12 below the promotional items, and then we can scroll through this list to see all the different
items
00:10:17 that are in the system. The iOS client works exactly the same way.
00:10:25 Clicking on the item, promotional item brings up the details, we have an edit link in the upper-
right corner
00:10:30 where we can view a screen to make changes to the product, and we have the All Products
link below
00:10:36 the promotional items to show the list of products where we can scroll through and drill into
00:10:41 and look at details on any of the items if we want to. For the customers, we can drill into the
customer details,
00:10:48 taking a look at their address information and the list of orders.
00:10:52 So we can see the order, we can drill into that order. See the items, the totals for that order.
00:10:57 We can also drill into the product that was ordered to see details for that specific product.
00:11:05 And again, iOS works the same way, clicking the customer, drills into the customer details, and
we can drill
00:11:11 from there into the orders and down into the items as well, and back to the overview page.

33
00:11:20 So, that's a brief look at the application. Now let's go ahead and make a change.
00:11:25 We're going to go ahead and add a page to show not just four customers, but all of our
customers.
00:11:30 And to do this, we're going to start by switching over to the Web IDE editor, running with the
MDK extension.
00:11:37 I've got my application loaded up. On the left- hand side you see the Mobile Development Kit
application,
00:11:42 you see all the different components in that application.
00:11:46 We're going to start by adding a new page for our customer list.
00:11:49 So you can see I've got a pages folder and underneath there I've got a sub folder for our
customer pages.
00:11:54 We're going to right click on that and select New MDK page. For this page, we're going to use
a section page.
00:12:00 So we'll click on Section Page, we'll click on Next, and then we'll specify the name,
00:12:05 we'll call it Customer List. We'll click Next and Finish, and the editor will go ahead
00:12:12 and create that page template and open it up so that we can modify it and add controls.
00:12:18 In the layout editor, you see here on the left all the different controls organized by groups
00:12:23 where we can expand those out. And these are all controls that we can drag and drop onto our
page.
00:12:28 In the middle, we have a preview, and on the right we have all the properties for the page
00:12:32 or the specific control that's been selected. We'll start by modifying the caption for our page.
00:12:38 Instead of calling it Customer List, we'll just call it Customers.
00:12:43 And then for a control, we're going to go ahead and drag and drop that contact cell table
00:12:47 from the compound section onto the page. So in the preview there, it will show a preview of
00:12:52 that control, and on the right, the properties will now be specific to that contact cell table
control.
00:12:59 The first thing we're going to do is bind the target, which is where the data is going to come
from,
00:13:03 We're going to select that service, this is our service for our application.
00:13:07 And we have a list of entities that we can get data from. In this case, we're going to use our
Customers entity.
00:13:13 The query options allow us to filter and sort and determine exactly what data is returned.
00:13:19 We're going to let the defaults apply, but we are going to go ahead and order it by the last
name.
00:13:23 So we'll click on the order by for last name, and we'll say OK.
00:13:28 For the actual properties that you see on the preview area, we're going to go ahead and bind
those two properties
00:13:34 in our Customers entity. We'll start with our headline, we'll click the link icon
00:13:38 to the right to bring up the object browser, where we can scroll down and pick any of the
properties
00:13:42 from our customer entity. In this case, we're going to use our last name,
00:13:47 and we're also going to use the first name here for the sub headline.
00:13:50 So we'll go back in there for that as well and specify the first name.
00:13:56 And then the description, we'll go ahead and use the city, so we'll bind that to the city.
00:14:02 And then last, we have our detail image. And for that we have an existing rule
00:14:06 that we're already using from our overview page that we'll reuse here.
00:14:09 Clicking the object browser, we can switch the drop down to filter it by rules,
00:14:14 and we'll use our customer image rule. Next, on the right-hand side of the context,

34
00:14:22 we have activity items. And these activity items allow us to interact
00:14:26 with the mobile qualities on the device. And in this case, we can set up different activities
00:14:31 for things like making a phone call. So I'm going to select the first one to be a phone call,
00:14:36 and we're going to bind that to the phone number of our customer.
00:14:40 The second one we'll use as e-mail, and we'll bind that to the e-mail address.
00:14:48 And the last one, instead of a detail, we're going to switch that to be a message, and we'll,
again, bind
00:14:53 that to the phone number so that we can SMS message the customer if we want.
00:14:57 All three of these activity icons will invoke the dialer for the device, the e-mail application on
the device,
00:15:04 or the SMS application on the device, natively on both iOS and Android.
00:15:10 Now that we've set up all of those bindings, let's go ahead and do one more thing on our page.

00:15:15 And that's, when we have a list of customers, if we want to see more detail about them,
00:15:19 we're going to want to drill into the detail for that customer. To do that, we'll set the events for
the context cell.
00:15:26 When I tap on it, we're going to go ahead and display the customer detail page.
00:15:29 Now we already have that page created. so we can simply use the object browser to select
00:15:34 the show customer detail action, which will display that detail page that we saw of the main
overview page
00:15:40 of the application. Our page is created, let's go ahead and save that.
00:15:45 Next, we need to add an action to display this page. So similarly to adding a page, we'll go to
our actions folder
00:15:52 for our customer, we'll right click and say New MDK Action. You'll see the wizards for all the
different action types
00:15:58 that we can create in our MDK application. For this, we simply need a navigation action.
00:16:02 So we'll select Navigation Action, click on Next, give it a name, ShowCustomerList, and for the
page
00:16:09 to open, we'll use our object browser and select the page that we just created, our customer
list page.
00:16:15 We'll say OK, and we'll click on Next and Finish. And the wizard will automatically create that
action for us.
00:16:22 The last step we need to do is to provide a way to get to this list from our overview page.
00:16:28 So to do that, we're going to open up our overview page, and this is the page that we were
looking at,
00:16:34 when we were going through the functionality of the application. You can see here, for My
Customers section in the middle,
00:16:39 we're going to go ahead and add a footer. So we're going to open up the section bar control
palette
00:16:43 and drag in that footer control and on the properties for that we're going to specify the caption
to be See All.
00:16:53 We'll specify an accessory type of disclosure indicator for iOS, and then what happens when
we tap on that,
00:17:00 we'll go back to our events, and we'll set the on press to point to that new action that we just
created.
00:17:06 So we'll go into the object browser, and we'll select our ShowCustomerList action.
00:17:12 We'll click on that say, OK, save that change. At this point, we've made the changes, let's go
ahead

35
00:17:18 and deploy it and take a look at it running in our clients. I'll right click and say Deploy and
Activate.
00:17:23 I'll click on Next, and click on Next, because we've previously deployed this
00:17:28 it knows exactly where to deploy this in mobile services. And at this point, the Web IDE editor
will go ahead
00:17:34 and take all of our application definitions, it's going to go ahead and bundle those together
00:17:40 and take that bundle and automatically upload that to mobile services for our application into
the app update
00:17:47 so that the clients can automatically receive that without having to reinstall a new version of
the client.
00:17:53 So the bundle will take just a few seconds here, it's going to go ahead and create that bundle
00:17:57 and do the upload, and when it's done we'll see some notifications telling me that it's complete
00:18:02 along with the version number, you can see the build is done. It's now going ahead and doing
the upload.
00:18:07 And version 15 is now available. So if we switch back to our client here,
00:18:14 we can have the client look for new definitions, just by putting it temporarily into the
background,
00:18:19 it'll automatically trigger a check. The client also checks periodically as it's running
00:18:25 as well as at launch. So you can see that prompted me and said
00:18:29 it found new definitions, I say okay, and the new definitions are loaded,
00:18:34 we didn't have to reinstall the client and we have our change.
00:18:36 we have our CL footer, clicking on that CL footer brings up our list of customers.
00:18:41 And we have the icons, the activity icons to jump in and call, e-mail, or message that particular
customer.
00:18:49 Same thing here on the iOS side, the See All brings up my list of customers.
00:18:54 I can then have the activity icons and we can also drill into those customers.
00:19:00 So there's a quick look at your Mobile Development Kit application running cross-platform on
both iOS
00:19:06 and Android, making that change and deploying it out to both clients.
00:19:14 Sign up for a free trial account to get started creating your own Android SDK
00:19:18 and Mobile Development Kit applications. Check out our learning journeys and our developer
tutorials
00:19:23 for additional assistance in getting started. In this unit, we learned about the SAP Fiori for
Android design language,
00:19:33 how we can use the SAP Cloud Platform SDK for Android to build delightful mobile
applications,
00:19:39 and how the SAP Fiori Mentor app can be used to explore the Fiori UI components.
00:19:44 We finished up with the Mobile Development Kit and how we can use that to build cross-
platform
00:19:49 native mobile applications. We hope you have enjoyed this week's units
00:19:54 and look forward to seeing you again next week when we talk about managing SAP Fiori.
00:19:59 Thank you.

36
www.sap.com/contactsap

© 2020 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 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 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 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, 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/copyright for additional trademark information and notices.