Post on 30-Sep-2015
description
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.