openSAP Build Your Own SAP Fiori App in the Cloud

WEEK 3, UNIT 1

00:00:13 Hello again and welcome to Unit 1 in Week 3 of Build Your Own Fiori App in the Cloud.

00:00:17 In this session we'll talk about the Anatomy of SAP Fiori Transaction Applications. We'll try to

dissect a Fiori application and understand exactly how it's built.

00:00:28 This will help you understand not only how to use Fiori applications but how to better design

them

00:00:33 and definitely how to better build them, so they have much the same look and feel as well as

the same behavior as any other Fiori application.

00:00:43 There are very strict guidelines on how Fiori applications should be built and they are all

documented online,

00:00:48 and I'll show you later where you can find the latest information on how to design and build

those applications.

00:00:56 In Week 1 of this course you already played with several Fiori applications. So we are already

familiar with the two main design layouts that we have:

00:01:04 The Master Detail layout and the Full Screen layout. Those are the most common layouts that

we have.

00:01:10 From time to time we can see other layouts but they are quite rare, so I assume or we can

safely assume that most applications that you are going to built

00:01:19 are going to match either the Master Detail or the Full Screen. If we look at those two layouts,

we see that there is much communality between the two.

00:01:27 On the top part of the screen of both layouts we have the page header. The page header, the

top header is coming from the launchpad itself.

00:01:36 It usually contains the search engine, the log-in or the user management and the Home button.

00:01:43 Below that top header we have the actual application header. In a Full Screen application the

header is from side to side,

00:01:53 and in the Master Detail application we have actually two headers, one for the list of value and

one for the detail area.

00:02:00 In the middle of the application, usually where all the action is happening, we have a place for

the floorplan.

00:02:08 A floorplan is a design template, and most people who are familiar with WebDynpro

applications are familiar with floorplans.

00:02:17 It is the design template for applications that represent a specific task. We are trying to make

sure that we are doing repeatable actions in a similar way.

00:02:25 So, if I need to create a business object, I need to edit a business object, I want to remove a

business object, I can do it in a similar way

2

00:02:33 and have a similar layout of the graphical elements on the screen. Those layouts are the

floorplans, and I'll show you that in a second.

00:02:41 If we look at the Master Detail template in slightly more detail, you see that at the top, as I

mentioned, we have the Launchpad Header.

00:02:48 Below that we have two separate headers: The Master List Header on the left side and the

Details Header on the right side.

00:02:57 Under the Details Header we have the actual application content or the floorplan itself.

00:03:01 And under the Master List Header we can usually find another search engine for the

application itself which is different from the search engine we have on the top,

00:03:11 and the actual list of value. At the bottom part of the application we'll find the footer.

00:03:18 The footer can also be split into two, depending on the template. If it's a Master Detail, we

have actually two footers, if it's a Full Screen, we have one.

00:03:27 If we look at some of the floorplans that we can see, they represent different activities that the

user might want to do inside the application.

00:03:38 We have a floorplan for the creation of a page, for the editing of a page or an business

element. We have a floorplan of list,

00:03:46 we have a floorplan that actually shows all the information about an object and that specific

floorplan has two versions:

00:03:53 One with several tabs and one that we called a flat object view that actually shows all the

elements on one screen that you can scroll in order to get more information.

00:04:02 Those floorplans can actually behave differently if we show them on a tablet, a desktop, and

mobile.

00:04:11 Usually when we have tablet and desktop screens, you can see both, the list of value on the

left side and the floorplan on the right side.

00:04:21 But if we switch to a mobile view and on a small screen of a mobile device, I can't actually

show both, the list of the values and actually floorplan.

00:04:30 And then the floorplan actually fills the screen. I will have the list of value on one screen, and

once I click on an item, I will have the details with the floorplan shown on the next screen.

00:04:43 I can always go back using the back arrow. So, how do I actually use the application on

navigating the application?

00:04:53 In order to navigate in a Fiori application we are using the header. The header appears always

on the top part of the screen

00:05:02 and is used primarily for navigation and for some user information. The header can actually

change depending of the level of drill-down

00:05:11 I'm doing as a user inside the application. The top level of the header is coming from the

launchpad and includes the search field as well as my company logo,

00:05:20 the user log-in and log-out and things like that. Once I start to work with the application, I click

on an item in the list or I click on something in the floorplan,

00:05:32 I'm actually drilling down and getting more and more data. Then the header changes. The

header provides me with navigation elements:

3

00:05:40 I have a back arrow, if I want to go back one level. I can have paging arrows if I want to see

more information that I need to scroll down.

00:05:49 And if I'm having a Master Detail element, I might have a split header in which I have one

arrow that takes me back to the launchpad

00:05:58 and one arrow that takes me back one level from a detail screen back to the list of value, and I

will show you a demo of that later.

00:06:08 At the bottom part of the screen we have the footer. The footer is not used for navigation like

the header, but the footer is used to trigger all kind of activities.

00:06:19 In other words, that's where I'm going to put my buttons. If I have an action button, I want to

approve, I want to reject, I want to go, I want to see more information,

00:06:28 I want to aggregate content, I want to filter content - all those activity buttons appear in the

footer. They should not appear anywhere else in the application.

00:06:37 The footer, like the header, can have different looks depending if I'm running it on a mobile

device or if I'm using a different layout.

00:06:46 In a Master Detail, like the header, the footer might be split. But, in other cases I will try to

make sure that in the footer

00:06:55 the user should be able to always find the most appropriate and relevant buttons for the

activity that they are trying to achieve at that specific moment.

00:07:04 If I have too many buttons in the footer, I can put them in an overflow menu, and then the user

can press on that and see the list of buttons.

00:07:20 It's not always a good idea to have too many buttons. We are trying to make the Fiori

applications as simple as possible.

00:07:26 So, try to make sure that you don't have too many buttons in the footer of the Fiori app. If you

do find yourself in a case like that, either think again:

00:07:36 Is that the right design? Or put it inside the menu. Another important graphical element that

we've seen in many Fiori applications are tabs.

00:07:45 If I have a lot of information that I need to distribute across multiple pages, I can put them in

different tabs and the users just click on different tabs

00:07:55 to get more and more information. Tabs can also be used to create a process. If I have several

steps that need to be fulfilled in a certain order, I can also represent them with tabs.

00:08:06 And in this case I usually put arrows between the tabs to show the user that you need to move

from this tab to this tab to that tab in a certain direction.

00:08:16 Tabs have a different look and feel. I can create tabs in different colors, trying to represent

semantic meaning somehow,

00:08:26 like blue for information, red for activities that still needs to be fulfilled, green for activities that

were successfully fulfilled.

00:08:34 I can do it all in one color if I want to match my brand color or things like that. It's up to you to

do it, and everything is allowed if you want to change and play with the color.

00:08:43 But try to make sure that it makes some sense if you play with colors there.

00:08:51 Part of the floorplan is usually a form. And forms are very important. If you are familiar with

4

SAP applications, most of them are either tables or forms.

00:09:00 So, when we look at those forms, we are trying to make sure that they are simple and that the

same form layout is used over and over again in a repeated way.

00:09:09 And that's why we have those floorplans, which in many cases represent different layouts of

forms. A form can have one column, forms can have two columns.

00:09:17 If you have more information, you can create a multi-form that you can scroll down. But try to

make sure that you don't have 200 input fields in one form.

00:09:25 Because that is usually not a Fiori application. Another important and very interesting graphical

element that we have in Fiori is the responsive table.

00:09:37 Responsive tables, and as I mentioned, most of the information we present is either in form or

table. Responsive table is a graphical element

00:09:46 that enables me to show information in a tabular way. But I can also configure the table and

decide what happens when the screen size changes.

00:09:58 So, if the user is actually reducing the screen size or if that specific table is going to be

presented once on a tablet and once on a mobile device,

00:10:07 I can decide that either certain columns in the tables are going to disappear or that the

information is going to appear in one cell.

00:10:16 Like what you see on the right side that actually I can stack the information into one cell and

show all that information. It's not really a tabular format,

00:10:25 but it's at least that the information is there. So, the responsive table is a configurable graphical

element that enables you to create or present information

00:10:34 in a tabular way, that can also be adapted to different screen sizes. And this is a very, very

useful UI control.

00:10:47 Buttons are also important. And as I mentioned, buttons usually appear at the footer. We try to

stick to a certain color scheme here.

00:10:55 So if it is something that the user should press, it should be in green. If it is something that the

user might not want to press or it is something negative,

00:11:03 like you want to reject an action or disapprove something, it is usually in red. And if I want to

get more information about something, than it is usually in blue.

00:11:11 One exception is that we can sometimes have buttons that are not in the footer when I want to

switch between different views in a calendar.

00:11:21 I can have a calendar of a year, a month and a day. That can be inside the floorplan and not at

the footer. And usually I want to have them as informative buttons,

00:11:32 and then they should appear in blue. You can play with the colors, but try to make sure that

you have a consistent experience that the user can actually guess

00:11:41 what to do with each and every button. And of course, if we are mentioning color, try to make

sure that the colors match the overall look and feel

00:11:52 of either your brand or the Fiori look and feel out of the box. We are trying to avoid very bright

colors, neon colors, something that might be distracting.

00:12:02 We want to make sure that the overall look and feel is professional, is easy on the eye. We are

5

using lots of white, light shades of blue, light shades of grey.

00:11:12 So, try to keep to that color scheme. And if you want to change the color scheme, try to make

it, again, something that is very easy to consume

00:12:21 and not something that is actually too chillful and too gamy if we can say that, to make sure

that we actually match the look and feel of other Fiori applications.

00:12:31 So, let's try and look at some Fiori applications and see how these come to action. I'll start with

looking at the Fiori Demo Cloud Edition.

00:12:41 And here we can actually look at certain applications. Let's start from My Benefits application.

And My Benefits application is a very simple application,

00:12:50 but you can identify immediately that this is a Master Detail layout. I have a list of value on the

left side, and when I click on a certain value,

00:13:00 I have the details of that specific item appear on the right side. So this is the most simple

template that I have.

00:13:09 I can see that I have a back button, back arrow button here and that takes me back to the

launchpad.

00:13:18 Let's look at the Leave Request. The Leave Request is a different template. The Leave

Request is a Full Screen.

00:13:22 So, I don't have a list of value on the right side. I still have the back button or back arrow that

takes me back to the launchpad,

00:13:31 and if we look at that application, I can see that we have a toolbar. In this case in the toolbar I

don't have a search field input,

00:13:40 because this is a demo system. But I still have the Home button, I still have the user menu. So,

that is something that we have in every Fiori app.

00:13:50 Let's go back to the home screen and look at the Approved Purchase Orders. The Approved

Purchase Orders is another Master Detail application,

00:14:00 but it's slightly more complex than My Benefits. Here I can actually go and look at different

purchase orders and look at different items that they have in a purchase order.

00:14:11 I have tabs that show me more information about a specific purchase order. But in each

purchase order, I have multiple items.

00:14:20 So when I click on a specific item, I have another screen. So in this case, I will have a back

arrow, both on the detail section and on the Master section.

00:14:30 That arrow on the Master section will take me back to the launchpad, while this one will

actually take me back one level.

00:14:38 Since I have multiple items here, I also have the ability to switch between them with those

paging arrows. So this is another example.

00:14:46 And let's look at the last example the Order Form Requisition. And in this case, this application

is another Full Screen application.

00:14:58 But in this application we can see several tabs with arrows between them, because here I

have a process.

00:15:07 I need to start with the approval of the requisition, then I need to assign the purchase

6

requisition, then I need to simulate the purchase order, then I need to create a purchase order,

00:15:17 and those tabs need to be fulfilled in a certain order. So I have several tabs that actually

represent a linear workflow that needs to be fulfilled.

00:15:28 If you want to learn more about the Fiori design, there is an online site for the Fiori Design

Guidelines.

00:15:35 Here you can actually find all the information on the Fiori Design Principles. You can actually

go and find information about typography for Fiori applications,

00:15:46 about the different color schemes that we can use, the different icons and any other

information that is related to the design,

00:15:52 as well as information about the different templates and layouts that we have: How to plan the

Full Screen, how to use the Master Detail template,

00:16:01 how to use different graphical controls. That site is constantly updated and I highly recommend

you, before you start designing an application or building an app,

00:16:09 to go and look at the latest information to make sure that you actually use the latest Fiori

design. Thank you.

7

WEEK 3, UNIT 2

00:00:11 Hello and welcome to Week 3 Unit 2 of the Build Your Own SAP Fiori App in the Cloud.

00:00:18 Now, that you know what Fiori is all about, in this unit I will introduce you to the SAP Web IDE,

which is the recommended tool of SAP to develop and extend Fiori applications.

00:00:30 My name is Asi Messica and I'm a Product Manager for SAP Web IDE.

00:00:37 Before getting into the details of the SAP Web IDE, I would like to share with you the key

market trends that we took into account when planning the SAP Web IDE.

00:00:48 By 2020 at least 70 % of new app development will happen in the cloud. This is comparing to

less than 10 % today.

00:00:58 Additional key trends which are associated with these trends are the collaboration between

developers, which is easier in the cloud,

00:01:09 the need for professional programmers to deliver the applications faster and with less cost and

with less need for a complex infrastructure.

00:01:21 In addition, in order to reduce the cost and speed up the delivery of applications, business

users and non-developers

00:01:32 will be empowered to develop with no coding simple applications that do not require the

assistance of professional programmers.

00:01:41 All these trends we took into account in the vision and the design of the SAP Web IDE.

00:01:50 You may have been familiar with different tools by SAP to develop Fiori applications and

specifically UI for SAP applications.

00:02:00 The SAP Web IDE is a successor of all these products and is the tool which SAP invested in

00:02:09 in order to simplify and accelerate the development of UI for SAP applications. Our vision is to

speed up the development by reducing the effort.

00:02:22 And we do so by covering the end-to-end application development lifecycle with one tool.

00:02:31 And when we refer to the end-to-end application lifecycle development, we start from the

prototyping of the application,

00:02:40 then the development, the testing on the different devices of course, the packaging and the

deployment into different application landscape

00:02:49 and then later on after we released the application, also the extension of the application in

order to customize it

00:02:58 and make it suitable for the different scenarios and customers.

00:03:07 So, what is the Web IDE in a nutshell? The Web IDE is a web-based development tool which

is designed to simplify the end-to-end application lifecycle,

00:03:18 and it is optimized for the development of SAPUI5 and SAP Fiori applications. It is running on

SAP HANA Cloud Platform and SAP HANA.

00:03:31 For SAP HANA it's integrated into the HANA Web-Based Development Workbench.

00:03:39 Having said that, the Web IDE is running on the HANA Cloud Platform and the HANA

Development Workbench, but the deployment of the applications

8

00:03:50 created with the Web IDE can be deployed to the different SAP landscapes, like the HANA

Cloud Platform,

00:03:59 like the ABAB repository on premise, mobile devices and more. Who are the target users for

the SAP Web IDE?

00:04:10 We target with the SAP Web IDE developers - both, internal developers who are using the

SAP Web IDE to develop the Fiori applications and SAPUI5 application

00:04:21 as well as, of course, external developers we're targeting to use the SAP Web IDE.

00:04:28 We also target non-developers with some WYSIWYG capabilities, which we plan to improve

over time,

00:04:36 and in the future we also plan to target designers. How often do we release the versions of the

SAP Web IDE?

00:04:47 Since the SAP Web IDE is a cloud product, we release a new version on a monthly basis on

SAP HANA Cloud Platform.

00:04:58 With this release cycle you can enjoy the latest innovation from the SAP Web IDE.

00:05:07 On the other hand for this course, you will see that there is a gap between what we record,

what exactly we show now in the recordings,

00:05:20 and the actual product which you will use for your exercises when the course will take place.

00:05:29 So, please take it into account and understand the benefit for that. So, this is in a nutshell the

SAP Web IDE.

00:05:39 What are the key use cases where you can leverage the SAP Web IDE? So, the first and most

relevant use case for this course

00:05:50 is the development of new Fiori applications and new SAPUI5 applications. The second use

case is extending SAP Fiori applications.

00:06:03 SAP is investing a lot in order to make it easier for the customers and partners to extend the

SAP applications and customize it to their own needs.

00:06:13 You can use the SAP Web IDE to develop SAPUI5 mobile hybrid applications,

00:06:22 and the SAP Web IDE is building with an extensible architecture which enables internal and

external developers to extend the SAP Web IDE with new plug-ins and templates.

00:06:38 What are the benefits for you to use the Web IDE?

00:06:43 So in a nutshell, the benefit is really to reduce the effort for the development of SAPUI5 and

Fiori application and extending the SAP Fiori applications.

00:07:00 You develop the application once, and then you can deploy it on a different SAP landscape

and run it on any device, mobile, tablet or desktop.

00:07:10 You reduce the cost and complexity involved in setting up the infrastructure for a development

environment with leveraging a cloud-based IDE.

00:07:22 You increase developer productivity by simplifying the development process. Both things will

cover the whole application development process

00:07:33 from the development to the testing, the deployment and the extension later on.

9

00:07:39 And we also invest on many rapid development tools, like templates and the WYSIWYG editor,

which I'll present later during this course.

00:07:50 You improve the team productivity and the collaboration with integrated GIT offering. What are

the key features of the SAP Web IDE?

00:08:05 I will not get into the details, we will get into the detail in the next units and as we develop

some Fiori applications using the Web IDE.

00:08:17 But just a high-level overview of the key features: So first of all, the SAP Web IDE is a

development environment

00:08:25 and it includes a source code editor with a SAPUI5-specific code completions. One of the rules

of the SAP Web IDE is that code always comes first.

00:08:38 And with code you can do everything and change all the automatically generated code that we

enable with templates and with WISYWIG editor.

00:08:49 So, the source code editor. We invest in the source code editor and we provide a powerful

source code editor with specific SAPUI5 code completion.

00:09:01 We provide project persistency via integration with GIT. We provide a layout editor with

WYSIWYG capabilities for non-developers

00:09:10 and also to accelerate the development of developers who know the code but want to save

time and do some UI development with WYSIWYG.

00:09:25 The layout editor is, in this version of the recording, 1.7. It's still an experimental feature, but

we plan to release it for productive reasons.

00:09:35 Mock data support for testing purposes. So it provides a mock data service for OData built in,

which you can use for testing during your development.

00:09:48 Instant preview in the browser with different screen resolutions, powerful search capability,

interactive extension mechanism, especially for the SAP Fiori applications.

00:10:02 But also other developers who develop the applications according to the SAPUI5 extension

directions can leverage the extensibility capabilities of the SAP Web IDE.

00:10:16 And you can import and deploy the applications you develop with the Web IDE into the SAP

on-premise ABAP repository or HANA Cloud Platform.

00:10:27 In addition, as I mentioned, we invest a lot in templates and extensibility in order to accelerate

the development process.

00:10:37 There are different templates that are provided out of the box with the SAP Web IDE to

simplify the application development.

00:10:46 So, we provide many templates for SAP Fiori application development like Master Detail,

Master Master Detail, Fact Sheet application creation and more.

00:10:59 And we're continue adding templates, SAPUI5 application templates for both, basic projects

but also mobile hybrid applications with Kapsel support.

00:11:14 We provide a template to develop Web IDE plug-ins and templates, and there are different

SAP groups which extend the basic SAP Web IDE,

00:11:28 which we provide, with additional capabilities like cloud portal template and visualization.

00:11:35 The extensibility, there are different options to extend SAPUI5 applications in general and Fiori

10

applications specifically,

00:11:49 and here I list the different capabilities that you have for extending the applications.

00:11:55 We will cover this the extensibility capabilities and how to do it with the SAP Web IDE in the

next units of this course.

00:12:12 I would like to introduce you also to the different plug-ins that we have in the SAP Web IDE,

which are provided by other SAP groups.

00:12:23 The first one is the Hybrid Application Toolkit, which enables you to create, test and build

Apache Cordova hybrid applications

00:12:33 and using templates, code completions and all the rapid development mechanism that we

provide for the other SAPUI5 and Fiori applications.

00:12:44 You have an OData Model Editor that enables you to develop your own OData Model using

the OData Model Editor within the SAP Web IDE framework;

00:12:58 Fact Sheet to enable you to develop Fact Sheet application; VizPacker to create visual

extensions for Analytics;

00:13:08 and the SAP HANA Cloud Portal , also a plug-in that enables you to easily create an

OpenSocial widget for use in Cloud Portal sites.

00:13:20 Before we complete this unit, I would like to give you a system context from a technical point of

view.

00:13:28 How is the SAP Web IDE related to the SAP environment? So you see here, the SAP Web

IDE, as we said, it is running on the HANA Cloud Platform.

00:13:41 The architecture includes plug-ins and templates that can come either from our group itself or

other SAP stakeholders and also external developers.

00:13:56 We rely on Orion, GIT and SAPUI5 and applications which are developed with the SAP Web

IDE, either SAPUI5 applications

00:14:08 or Fioris applications, can be deployed to the different SAP deployment landscape like HANA

Cloud Platform,

00:14:16 ABAP repository on-premise, mobile devices and, in the future, additional SAP landscape like

SMP and more. Thank you.

11

WEEK 3, UNIT 3

00:00:11 Hello and welcome back. In this unit you will learn how to access the SAP Web IDE from your

SAP HANA Cloud Platform free-trial account

00:00:22 and the capability it provides you through the different phases of the end-to-end application

development process.

00:00:31 Before we start, this slide provides an overview of the development process with the SAP Web

IDE.

00:00:40 So with the SAP Web IDE we the support two types of project, either a new project or an

extensibility project,

00:00:49 which is an extension of an existing application without changing the original code of the

application.

00:00:56 The extensibility concept is very powerful for changing or customizing applications from SAP,

for example, but also internal applications or partner apps

00:01:11 and without changing the original code of the application.

00:01:16 This can be useful when you want to upgrade later on the application with new innovation and

with supportability of the original application.

00:01:28 The extensibility project is based on the SAPUI5 extensibility concept and SAP Web IDE

actually implements its principals within the IDE,

00:01:41 and it will be discussed in details during the later weeks, Week 5 of this course.

00:01:50 So first we create the project, either a new project or an extensibility project.

00:01:57 The next phase is the development. For development we provide different capabilities.

00:02:04 The first one of course is coding. As we said, the SAP Web IDE is intended for both,

professional the developers and rapid developers.

00:02:17 And for the cording we provide a powerful source code editor with code completion, dynamic

API reference, and so on, specifically optimized for SAPUI5.

00:02:31 Then we provide different templates that you can actually start the project with different

templates

00:02:39 that are provided either by SAP or you can develop your own template.

00:02:44 And the template is actually a wizard that guides you, guides the user who develops the

application,

00:02:51 with a step-by-step process and automatically generates the needed files and code for the

app.

00:02:59 You can use the template either to create the application if it exactly fits your needs, or you can

use it as a starting point to generate an original code and then enhance it.

00:03:13 We provide a Layout Editor for 'what you see is what you get' UI creation.

00:03:23 And the goal of the layout editor is really to simplify and accelerate the UI development.

00:03:33 This feature is currently an experimental feature. So it is available only on your trial account,

not in the productive environment, and we plan to release it soon.

12

00:03:48 We are looking for feedback from users before we release it for the productive version

00:03:56 Then for extension projects, we provide a visual extensibility that makes it really easy for the

developer to extend SAPUI5 or SAP Fiori applications

00:04:10 and select the right element that you want to extend and choose the different extension

options that the SAPUI5 provides.

00:04:20 The first step of the development process after the development is the preview. And of course

this is an iterative process.

00:04:30 So you can go back and forth, and we will see it as we go along in the next days' units.

00:04:37 We have a preview or a simulator integrated within the SAP Web IDE where you can test the

applications in different screen sizes

00:04:50 that fit into the different devices, of course, where the application should run.

00:04:59 You can also test it with different languages if you have translations.

00:05:05 And for those who use it for a hybrid application development, you can also have a preview in

a companion app or in a mobile device.

00:05:17 When you are happy with the application you created, you can deploy it to different SAP

environments.

00:05:29 And deployment is also part of the development process, and we provide integrated the

deployment to various environments.

00:05:38 And we add new environments with time so stay tuned.

00:05:44 The focus for this course is the deployment to SAP HANA Cloud Platform and to the ABAP

repository on premise.

00:05:52 We also provide with the Hybrid Application Toolkit deployment to iOS and Android devices.

00:05:59 You can manually deploy to the SMP or HCP mobile services and also to other... Manually you

can also deploy the application to other SAP environments

00:06:12 We use, as we will show later, we use the Git on a SAP Hana Cloud Platform for version

control management.

00:06:27 Okay, so let me now show you how you access the SAP Web IDE from your HANA Cloud

account which you opened in Week 2, Unit 5.

00:06:44 So this is the HANA Cloud Platform cockpit and here under Subscriptions you will have the

SAP Web IDE.

00:06:57 Once you click the link here, it will be opened.

00:07:06 Okay, this screen will be opened, and now you have here the application URL.

00:07:16 Okay and this is the SAP Web IDE. I recommend you, for your convenience through this

course,

00:07:24 to add this URL to your favorites or add a bookmark so it will be easier for you to access it later

on doing the different exercises of this course.

00:07:40 With the SAP Web IDE we support different browsers like Chrome, Firefox, Internet Explorer

version 10 and 11.

13

00:07:56 But I will use Chrome for showing the exercises throughout this demonstration. Okay.

00:08:10 So, this is the SAP Web IDE. You have here, as a reference, the description of the different

areas of the IDE.

00:08:25 But I will show it here on my SAP Web IDE account. So I'm using also my free trial account. So

it will be the same as yours.

00:08:40 So you can see these are the menus. Here you can see my user name. This is the toolbar with

different options.

00:08:53 Here you can see, this is like the tree for the projects that I am developing with SAP Web IDE.

00:09:03 Here you have like your preferences and you can see that there are some customization and

preferences that you can choose and select.

00:09:17 We have... This is like where you have the code editor.

00:09:26 Let me, just as an example, open a file. So you can see it.

00:09:36 And here on the right side, I have the different panes.

00:09:42 This is the VizPacker, a quick preview. It's external, like, it's a plug-in preview. It's not one of

the core panes of the SAP Web IDE.

00:09:56 This is Search and Replace. So you can search for content from your whole product tree as

well as within the file that you are working on.

00:10:06 You have here a Git. The Git is integrated with the SAP Web IDE, and you can use it to

manage your version and collaborate with your team.

00:10:20 We have here a Git History, some Collaboration using the SAP Jam, API Reference which will

be very useful,

00:10:32 and we will show it when we go into the more advanced units of development with the SAP

Web IDE.

00:10:44 And this is the Outline editor which is more useful with the WYSIWYG layout editor, and we will

show how to use it later on.

00:10:56 Okay. So we move to the next.

00:11:03 Here you have like the description of all the different areas that I just showed.

00:11:08 You have various options to create a new project with the SAP Web IDE, and here in these

slides you see the different options.

00:11:18 In this course we will focus more on creating a new project from a template but you can also

import a project from different repositories

00:11:29 and, of course, clone a Git repository to start with a project. Let me show how it looks here.

00:11:40 So when you open a new project, you can either open a project from a template or from

sample applications, which we'll refer to in the next unit, or we can open an extension project.

00:11:53 We can import it from different sources and we can clone a repository from the Git.

00:12:04 Okay. We have different capabilities with the SAP Web IDE. Let me show you the different

templates that we have.

00:12:15 By the way, something that you can already see, we have the Available Plugins are all the core

14

plug-ins which are provided with the SAP Web IDE.

00:12:24 In the External Plugins, you can see all the plug-ins which are provided by SAP but from

additional groups within the SAP.

00:12:36 And you can mark yourself these plug-ins as enabled so you can use them through your

development and leverage the capabilities.

00:12:48 So now I will show all the different templates that we have. So this is when we create the

project from a template.

00:12:59 You can see here all the templates that are provided out of the box with the SAP Web IDE,

either internal or external plug-ins.

00:13:11 And external developers can also create their own templates and enhance the capabilities of

the Web IDE or create some new templates.

00:13:25 We will not get into the details of that in the scope of this course. So, here you can see the

different categories of templates that we have.

00:13:32 So we have SAPUI5 project templates to simplify the creation of SAPUI5 applications, either

basic applications or hybrid mobile applications with Kapsel support.

00:13:48 We have a template, of course, for SAP Fiori Application development, Plugin Development,

HANA Cloud Portal Widgets and Visualization Extension Project for Analytics.

00:14:01 We will get into more details of the templates and how to use them later on during the more

advanced units of this course.

00:14:13 So the goal of the templates is really to accelerate the development process and to provide

you with a good starting point to develop the application with no coding.

00:14:29 Okay. As we said, we have also all the coding once you create the application from template,

either a template that provides you some visualization of the application

00:14:42 or a simple template that just provides like the infrastructure and the file structure and the

connectivity for developing an application.

00:14:53 You have the code editor with code completion for JavaScript, XML and specifically for

SAPUI5.

00:15:02 You have code snippets and the very useful API Reference pane. And we will see how to use

it later on.

00:15:12 We also have the layout editor for WYSIWYG development of the UI.

00:15:20 With the layout editor we support XML views, and we recommend to work with the XML views

when you develop the application.

00:15:30 If you use only the code editor, you can use different other types of views as well.

00:15:36 But if you want to leverage the layout editor, you need to work with the XML views and you can

switch between the code editor and the layout editor during your development.

00:15:47 So, let me just show you, with the layout editor, the components of the layout editor. So here I

have an application that I created from a template.

00:16:03 So if we want to open, for example, the Master view.xml here, you can see the code editor,

and we can now open it also with the layout editor.

15

00:16:23 Okay. And here you can see the different areas of the layout editor. So we have the pallet here

00:16:30 which contains the different SAPUI5 controls that you can drag and drop into the canvas area.

00:16:37 This is the canvas area which actually displays the application in the way that corresponds to

how it will appear in the finished application.

00:16:49 We have here the Properties, the data pane that shows you the properties and the data for a

marked control.

00:17:00 And then here we have the Outline pane that provides you an outline of the XML view and

enables you to see the specific element that you are changing in the XML view.

00:17:21 And here, again, we will get into the details and we will see how to use it later on in the more

advanced units.

00:17:35 Okay. When you completed the development stage, you can run the application and you have

an integrated preview within the SAP Web IDE.

00:17:51 You have here various options and we will show it later on.

00:17:57 Maybe specifically for Fiori it is important to mention that you can run the application either in

the preview,

00:18:06 and you can use the SAP Fiori launchpad sandbox to actually run the application in the

preview in the same way that it will run on the Fiori Launchpad.

00:18:18 You can also later on deploy and run the application either from the HANA Cloud Platform or

from the ABAP server.

00:18:32 After the application is ready and you used the preview to test it, you can deploy the

application.

00:18:42 You have various options as we described before, and we will focus in this course on two

options.

00:18:53 One is to deploy to SAP HANA Cloud Platform, and then from there you can also register to

the Fiori Launchpad in the cloud,

00:19:02 which is now not available yet in productive environment, but I hope that... Sorry, it's available

in productive but not yet in the free trial environment.

00:19:13 And this is also something that is planned. And you can also deploy the application from the

ABAP repository, and in this course we will focus on these two specific options.

00:19:24 The other options will be probably covered in other courses. The SAP Web IDE uses the Git

on SAP HANA Cloud Platform for version control.

00:19:38 Version control is used in order to enable the developer to keep the versions of a specific file

or a group of files over a time and then, if necessary, recall a specific version later on.

00:19:55 The Git is a widely used version control, and one of the unique things about it is that it has a

distributed versioning.

00:20:10 So it means there is no central repository for the project, but actually each developer has a

complete repository for the whole project and the whole project history.

00:20:28 And it is very useful for version control management as well as support different collaborative

workflows.

16

00:20:37 And in the SAP Web IDE, there is an integration with the SAP HANA Cloud Platform Git

system.

00:20:51 You can also configure your own Git, but in this course we will use the SAP HANA Cloud

Platform Git.

00:20:59 So this is my Web IDE. You see here the Git pane. So through this pane you can do like

Commit and Push as well as other commands like Fetch, Rebase and so on.

00:21:18 And you can see also your version history through the History pane.

00:21:30 Okay, thank you.

17

WEEK 3, UNIT 4

00:00:11 Hello and welcome back. In this unit you will learn how to connect the SAP Web IDE to a

remote system in order to consume data from the backend

00:00:23 and how to create a Fiori Master Detail app with the SAP Web IDE. Let's start.

00:00:31 So, the steps that we will go through in this unit: First, I will show you how to set up a

connection to a backend remote system

00:00:39 in order to consume the data through an OData service in your app. This is the step that you

have to do only once.

00:00:49 And then you can create many projects and many applications which are consuming data from

this same backend system.

00:01:00 And the next steps will be creating a new project from a template, and then go through the

template wizard and create the Fiori Master Detail app.

00:01:12 When the app is ready and the code was generated, we will run the app in the preview from

the SAP Web IDE environment and we will look at the results.

00:01:26 For the purpose of this course we give you two options for using an OData service.

00:01:35 The first option is we have an SAP Gateway demo system which you can use in order to

consume a real OData service.

00:01:42 The other option is to use a local EDMX file that you can generate and build your Fiori UI

disconnected from a backend.

00:01:52 This is also a scenario that is common in real world where the UI development is decoupled

from the backend development,

00:02:02 and there is an OData EDMX file that is used as the interface between the frontend and the

backend.

00:02:12 Before I show how to connect to the SAP Gateway demo system that you can use for this

course,

00:02:20 I would like to show you a high-level architecture of SAP Web IDE on SAP HANA Cloud

Platform and how the connectivity to your backend system works.

00:02:33 So, SAP HANA Cloud Platform provides an SAP HANA Cloud Connector which enables the

secure SSL link between your backend system and your frontend system,

00:02:45 I'm sorry, and the SAP HANA Cloud Platform. The Cloud Connector needs to be installed on a

machine which has access to your internal network

00:02:55 where the backend is installed, on the one hand, for example SAP Gateway, and the open

Internet where SAP HANA Cloud Platform exists, on the other hand.

00:03:07 The SAP Gateway system is already available on the open Internet so we don't have to use

the SAP HANA Cloud Connector for this course.

00:03:23 Another mechanism available with the SAP HANA Cloud Platform is the destination.

00:03:30 And the destination enables you to connect into a backend system from the SAP HANA Cloud

Platform or from the SAP Web IDE.

00:03:44 You need a destination because your browser is accessing both, like the SAP Web IDE server

18

and your backend system.

00:03:56 And to avoid a cross-origin problem, you need to define a destination and in this way the

HANA Cloud Platform can serve like a proxy

00:04:08 that enables you to work with both server sides. Okay. So, let's continue and do that.

00:04:19 Additional information is available here in our SCN page, which was already presented in

previous units.

00:04:29 And you can find there a lot of information about how to connect your SAP Web IDE to your

backend system,

00:04:39 either the SAP Gateway demo system or your own backend system, with the Cloud Connector.

00:04:48 Okay, so let's go back to your SAP HANA Cloud Platform Cockpit. And here we will define a

destination

00:04:56 that will enable you to access the SAP Gateway demo system.

00:05:02 So let's go to Destinations. We prepared for you in the course exercise for this unit a

destination file content

00:05:17 that you should just copy into a text file and import it from here, from the Cockpit. So let's do

that.

00:05:31 Okay. You have to define a name. And please pay attention to put in a description that makes

sense to you, that is meaningful for you

00:05:44 because this is what you will see later on in the SAP Web IDE template wizard, in the data

connectivity phase.

00:05:56 You can either use basic authentication in the destination definition or no authentication,

00:06:03 and then you will have to add your credentials each time you use it. I'm adding my credentials

here.

00:06:18 Let's do the Save. Okay. So now I can see this destination.

00:06:32 Okay, you see this destination in the destination list on the SAP HANA Cloud Platform Cockpit.

Let's now go back to the SAP Web IDE.

00:06:42 I will refresh it so it will use the updated list of destinations. And we would now create a new

Fiori Master Detail app.

00:06:54 So, we will create a File, New. We will create a Project from Template. Here you have the

different templates which we are providing with the SAP Web IDE.

00:07:08 Let's say, choose... These are the different categories of templates. Let's choose the SAP Fiori

Application.

00:07:16 You can see here the different Fiori application templates. I will choose the Fiori Master Detail

Application.

00:07:23 Here you can have a preview of what this template is all about and how it will look like so you

can decide which template you want to use.

00:07:36 Okay, the next step of the wizard. Okay. This application will be a Master Detail application

that will track sales orders.

19

00:07:49 So I call it, the Project Name, salesorder. The next step of the wizard is the data connectivity.

00:07:57 We provide here various options for connectivity. The first option, which I will use, is Service

Catalog.

00:08:04 It actually enables you to access different systems which support the Gateway Service Catalog

concept.

00:08:12 And when you select the system, so I will select the system that I just defined, the GW

(Gateway) demo OData service Open SAP,

00:08:23 this is the description of the destination that I defined in the SAP HANA Cloud Platform Cockpit

that is presented here.

00:08:30 And here I can see all the OData services which are available on this system. I will choose the

SALESORDER.

00:08:38 I can browse it through the wizard to see actually which OData collections are available in this

service,

00:08:46 and I can even see the different properties which are available in this data collection.

00:08:54 The SAP Web IDE will do some validation checks that this is really a service that we can use

for ...

00:09:00 that's a valid OData service and we can use it for building this application.

00:09:09 We have here additional data connectivity options. Workspace or File System can be used for

scenarios

00:09:18 that you don't have a connectivity for the backend system but you use the EDMX file in order

to generate the frontend, the UI of the application,

00:09:29 and test it with the SAP Web IDE mock service. And Service URL is to connect to backend

systems which do not work with the SAP Gateways Service Catalog

00:09:40 but you can add here a specific OData service URL. Okay. So we will proceed with the option

of the Sales Order OData service.

00:09:53 Next step is the Template Customization. So a template is actually a wizard which generates

an application code.

00:10:07 The template contains placeholders for the application developer to add either static content or

dynamic content which are relevant for his application.

00:10:21 So for example, in this example of a Fiori Master Detail application, we can use the same

template, which was actually the Fiori Master Detail concept and UI design, for different use

cases.

00:10:37 We can use it for sales order tracking like in this case, we can use it to track flights or

employee benefits or every ...

00:10:50 You can think about many, many use cases which are related to different OData services and

different lines of business which can use the same template.

00:11:02 And that's why we need these placeholders in the template in the customization phase of the

template in order to create the application that we want,

00:11:11 just specific for our use case, using the generic template, the generic Fiori UI pattern that we

have here.

20

00:11:22 Okay. So as a Title, so this is the template, the way the application will look like in the end. And

now we have to add the static data,

00:11:31 which is like the text and the titles, as well as the dynamic data, which is actually the data

which is coming from the backend and is presented through the application.

00:11:43 Okay. So the Title here will be, let's call it Sales Order Tracking. The OData Collection, in this

service we have two OData collections.

00:11:56 One is the headers which are actually the sales orders, and the second one is the sales order

items.

00:12:02 And we have like one-to-many relations between the sales order headers and the sales order

items. So let's choose the sales order headers.

00:12:13 At the Item Title we can choose the OrderId, Numeric Attribute will give the OrderValue. You

see that we have here an automatic completion.

00:12:28 And the Units Attribute will be the Currency. So this is the Master Section of the template.

00:12:41 And we have here also a Detail Section. So as a Title we will put Sales Order Details.

00:12:51 Status: We don't have a suitable property in this OData collection so we can leave it free.

00:13:01 And for the attributes, let's use the CustomerId, and the DocumentType and Date as attributes.

00:13:18 In the Fiori Master Detail template, we have also an option to create an icon tab filter with the

OData Navigation.

00:13:32 So for example, in Sales Order, if we have an additional data collection in this service, for

example, for customer details,

00:13:42 we can use this OData Navigations to present the content for a different OData collection in

this OData service.

00:13:52 But in this specific service we have only two OData collections, the headers and the items with

one-to-many relations, so we will leave it empty.

00:14:04 So just to show what was the customization and which parameters we use, so you see here

the Master Section with the three parameters that we added.

00:14:18 You can see also the Details Section with two icon tab filters. The first one is the Details

Section,

00:14:28 and the second one is the Navigation Section which we leave empty for this exercise. Okay.

00:14:43 Now let's press Next and Finish, and let's see what is the code that the template generated

and how it looks like.

00:14:55 Okay. So you see here in my Web IDE this is the Sales Order project. You can see how it

looks like.

00:15:04 And let's now run it in the preview, in the SAP Web IDE preview to see how it looks like.

00:15:14 So, this is the SAP Web IDE preview. It actually accesses the backend system with the OData

service that I defined.

00:15:25 You can see here the information that is coming from the backend with all the fields that we

defined. Okay.

21

00:15:34 So this is the Sales Order application that was generated with the wizard, with the template.

And let's look now how it looks like.

00:15:43 So I mark here the index.html, and now let's run it.

00:15:55 Okay. This is the preview, the simulator that is integrated within the SAP Web IDE

environment.

00:16:01 You can see here that we can run the application with different screen sizes for the different

devices,

00:16:09 like Large is desktop, Medium is more a tablet size, and Small is a smartphone.

00:16:15 What you see here is actually the application with the data that is coming from the backend

system that we defined.

00:16:24 So you can see all the information here. We can change the screen size for a smartphone.

00:16:33 And you can see here the Fiori navigation how it looks like on a smartphone. You can edit and

even choose your own screen size if you like.

00:16:48 Additional capabilities that we have here: You can change the orientation of the application

and check how it looks like.

00:16:56 This is very powerful when you want to really build responsive applications that run on the

different devices,

00:17:04 and to see how the application looks like on the different devices and screen sizes.

00:17:11 And if you have a translation, you can switch between the different languages and see how the

application looks like.

00:17:20 An additional thing that we have here is we have like a QR code in case you really want to run

the URL on a device. Okay.

00:17:30 So, this is the preview. The application looks good. And we can either use now the application

as is or use this as a base point for additional customizations.

00:17:47 Thank you.

22

WEEK 3, UNIT 5

00:00:11 Hello and welcome back. In the previous unit we learned how to connect the SAP Web IDE to

a remote backend system

00:00:21 and create a Fiori Master Detail app from a template connected to the backend system and

getting the data from the backend system.

00:00:32 In this unit we will show how to create an app with no connectivity to a backend system using

an EDMX file which contains the model of the OData service

00:00:48 and leveraging the SAP Web IDE mock service to test the application.

00:00:56 In the end we will also show how to change, modify the mock data in order to enable you to

test the application with the specific data that you want to present.

00:01:09 Such an approach will be useful for cases where you want to develop the frontend and the

backend in parallel in case the backend is not ready yet,

00:01:18 so you define the OData model for the interface between the frontend and the backend and

then you can do the frontend and the backend development in parallel,

00:01:29 or in cases where you don't have backend connectivity.

00:01:36 The steps that we will go through in this unit, we will create an EDMX file with the OData data

model.

00:01:44 We will create an app from a template in a similar way as we did in the previous unit

00:01:49 but this time with no connectivity to a backend system, but by leveraging the EDMX file with

the OData model.

00:01:58 And then we will test the result application with mock service and edit the mock data.

00:02:06 Let's start. Okay, we will first create a folder and an EDMX data with the OData service model.

00:02:20 So I will call it schema_folder. So I created a folder, where I can put more than one EDMX file.

00:02:43 I will now create a new OData model file with the OData model editor of the SAP Web IDE.

Let's call this sales_order_edmx.

00:03:06 Okay, we've prepared in the exercise of this unit the EDMX file already with the same model

that we use when we use the backend system.

00:03:24 I will copy that, and I will add it here. We can use the Beautify capability of the OData model

editor.

00:03:49 So, now it also looks nice. Let's save it. And now we will create a new project from template

like in the previous time,

00:04:02 but this time with no backend connectivity using the EDMX file which contains the OData

model for the application.

00:04:13 So we select again. I will not get again into all the details because you have seen it in the

previous unit. So, I will go through most of the steps quite fast.

00:04:22 I will just show in detail the Data Connectivity stage. So, this time I will call it salesorder_mock.

00:04:39 I will go to the Workspace. And here I see the schema_folder. I will select the

sales_order_edmx file I have just created.

23

00:04:58 We can now, in a similar manner like before, we can see the data collections which are

contained in this OData service.

00:05:09 Here I have now the Template Customization phase, and I will use the same parameters that I

used before.

00:05:19 Sales Order Tracking, the OData Collection is the same one.

00:05:31 Item Title is again the OrderId. The Numeric Attribute will be the OrderValue, and the Unit is

the Currency.

00:05:53 I don't have the Status and for the Attributes I will use the CustomerId and the DocumentType

and DocumentDate.

00:06:15 Okay, now let's continue to the next step and press Finish.

00:06:24 Okay, so you see this is the salesorder_mock project that was created from the templates.

00:06:34 The structure of the project is the same as we had before. But now we have no backend

connectivity.

00:06:46 So to see how the result looks like, I can run it now with the mock data. So, I select again the

index.html and I run it with mock data.

00:06:59 So, you see the same preview environment like we have seen before with all the capabilities,

00:07:06 but instead of really connecting to the backend system to bring the data, we generate the data

according to the type of the different entities and parameters that we selected here

00:07:22 and all the data is generated automatically. So you can see like OrderId 1, 2, 3, etc. All the

other capabilities are completely the same.

00:07:31 So for the sake of really testing the application and see how it works, you can do everything

without the real backend connectivity.

00:07:44 Now let say that... Let me go back to the presentation for a second.

00:07:50 Okay, so we show how to run the application with the mock data and now, with the mock

service, we have two options:

00:08:00 Either to use the mock service to generate the data automatically or provide data in JSON file,

and this is what I will demonstrate now.

00:08:13 So let's say now that you want to control the data of the mock service which we test the

application with to validate that it makes sense and works and that the application looks good.

00:08:29 So, we go to the model folder in the project. We select the metadata.xml file

00:08:39 and then with right click we open it and we edit the mock data.

00:08:48 And here you see a table with the different properties of the OData collections.

00:08:57 You can either Generate Random Data and then change it or you can just add the data.

00:09:08 So, ORDERID will be 12345, DOCUMENTTYPE will be contract, DOCUMENTDATE. So

according to the type of the property you have some guidance and assistance.

00:09:21 So if it's a date, for example, you have a calendar. So let's pick the date February 3,

CUSTOMERID again will be just 12345, SALESORG we can put emea,

00:09:37 DISTRIBUTIONCHANNEL retail, DIVISION emea, ORDERVALUE 4,000 and euro. Okay, now

24

we do OK.

00:09:58 By default, there is a flag that says use these data and not the automatically generated mock

data source.

00:10:09 Now, we see that we have a JSON file that was automatically created with the information that

we added.

00:10:18 If we will now run the application we created with the mock service, we will see that only the

data that we entered appears.

00:10:36 But it's the accurate data, the specific data that we added.

00:10:45 Okay, so I've presented until now how easy it is to develop a Fiori application with no backend

connectivity

00:10:57 using an EDMX file and leveraging the SAP Web IDE mock service for testing the application

with no backend connectivity. Thank you.

www.sap.com

2015 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.