openSAP

Build Your Own SAP Fiori App in the Cloud

WEEK 1, UNIT 1
00:00:12

Hello and welcome to the Build Your Own SAP Fiori App in the Cloud openSAP course.

00:00:18

My name is Bob Caswell and I'm a product owner focused on user experience, or UX for short,
and I'm on the SAP Solution and Knowledge Packaging team.

00:00:27

I'm really excited to have you here with me, and I'm looking forward to a set of discussions on
topics related to SAP, UX, and Fiori.

00:00:36

Together with a few of my SAP colleagues, we're going to guide you through the next nine
weeks to get your started designing and building your own SAP Fiori app in the cloud.

00:00:45

If you're interested in learning more about who the expert instructors are for this course, you
can find a profile for each of them on the course landing page.

00:00:54

So before we jump into the topic of this unit, which is an introduction to SAP's UX strategy, let's
take just a few more minutes to discuss course logistics.

00:01:04

This openSAP course runs for nine weeks with most of the content delivered in the first six
weeks

00:01:10

with the last three weeks being more for you to design and create your own Fiori app and also
prepare for the final exam.

00:01:17

We want not only to show you how to design, extend, and develop your own SAP Fiori app,
but also want to provide you with tools and cloud environments to try each of these activities
yourself.

00:01:29

So during each week you will be watching five to six videos just like this one, and after each
video there will be a self-test.

00:01:37

At the end of each week there will be a weekly assignment based on all the subtopics learned
throughout the week.

00:01:43

Points can be earned with the questions that are part of the weekly assignments, and they'll
count toward earning a Record of Achievement for the course.

00:01:51

There will also be a final assignment and final exam, which count toward the total points
available to receive this Record of Achievement.

00:01:59

And like all openSAP courses, you need to earn 50% of the maximum number of points
available to get this Record of Achievement.

00:02:06

In addition to the videos and assignments, you will have access to an online forum where you
can collaborate with other course participants or ask any questions you may have.

00:02:16

I'll be online along with the other instructors to help drive these discussions and answer
questions as needed.

00:02:22

While we will discuss the details of the final assignment in a later unit, I did want to mention
briefly that we are trying something new with this course.

00:02:30

We're giving away three MacBook Air laptops to the top three submissions for the Design and

Build final assignment. So anyone who submits a final assignment will be eligible to win a
MacBook Air.
00:02:41

We'll give more details later, but for now just know that the top three submissions will be the
winners.

00:02:49

Now just a brief mention of what's required for you to participate effectively in this course. The
good news is: not much!

00:02:57

We will frame everything we discuss within the shared context of SAP systems and processes.
So it's best if you have a basic understanding of how business processes are typically
represented in an SAP system.

00:03:09

Also, since we will be going hands-on with building apps, it's best if you have some basic
programming skills including HTML and JavaScript.

00:03:18

If you've never programmed before, you are still welcome to participate.

00:03:22

Just keep in mind that those sections where programming becomes part of the creation
process, those sections might become more intensive for you.

00:03:30

But otherwise, this course is meant to be for most anyone. These requirements are more
guidelines and shouldn't necessarily be considered mandatory.

00:03:39

Also, if you haven't already, you may want to check out the previous SAP Fiori course called
Introduction to SAP Fiori UX.

00:03:48

It focuses more on the deployment and configuration of Fiori, whereas this course focuses
more on design and creation.

00:03:56

We will still provide the appropriate introduction to SAP Fiori UX so that you get a clear
understanding of what it is before designing and building your own apps.

00:04:05

But again, if you're interested in deployment and configuration, definitely check out the other
course too.

00:04:12

Okay. Enough on course logistics. Let's talk UX strategy. Software traditionally, and especially
enterprise software, has been written from the perspective of the features and functionality
included.

00:04:25

So while it can be super powerful, it can also come across as intimidating and complex.

00:04:30

In contrast, most users don't view software in the context of all the features and functionality
included.

00:04:37

They are much more interested in how easily it helps facilitate what they are actually trying to
accomplish day to day.

00:04:44

So let's briefly take a look at the benefits of putting the user first.

00:04:49

What's interesting is studies have shown that intuitive, consistent, and simple user experiences
really do save time and increase productivity.

00:04:57

Users make less errors, training isn't as complicated, and employee satisfaction rises. And
there are actually ways to quantify these costs savings associated with a good user
experience.

00:05:09

I mean, if you just think about it, even just one good improvement to a user experience can
quickly pay off, especially for repetitive or cyclical tasks that will be done over and over and
over again.

00:05:20

So how does SAP approach user experience now that we see just how relevant it is? Well,
SAP has three areas of focus. We like to call them New, Renew, and Enable.

00:05:31

So let's start with New. New is all about providing consumer-grade user experiences for new
applications.

00:05:38

Renew is about improving the user experience of SAP's existing applications, starting with the
most commonly used business scenarios.

00:5:47

And last but not least, Enable gives SAP customers and partners the ability to improve the
user experience of other existing SAP software

00:05:55

in ways that allow them to decide which mission-critical business scenarios are most important
to them.

00:06:01

With this new strategy in mind, SAP crafted a new vision and mission to accompany the user
experience strategy.

00:06:09

Our vision is to provide you with the leading user experience for business applications, and our
mission is to simplify your world with design.

00:06:17

So why did we create SAP Fiori? It started as the center of the Renew part of the SAP UX
strategy.

00:06:24

We took the most commonly used business scenarios and created for them these new apps,
which we called SAP Fiori apps.

00:06:31

But then it evolved into the SAP Fiori UX, as you'll soon learn, and it became the new user
experience for SAP software.

00:06:40

So SAP Fiori UX is the new face of SAP to business users in all lines of business across
devices and deployment options.

00:06:49

It's designed to provide optimal usability for simplified business interactions and ease of use.

00:06:54

To date, there are over 300 Fiori apps available covering a wide variety of business roles and
use cases.

00:07:03

Okay, a few more aspects to the SAP UX strategy that are worth mentioning briefly.

00:07:07

SAP's new UX ties in nicely with SAP's strategy to be THE cloud company. So it follows that
Fiori, as SAP's new UX, isn't just something for more traditional SAP systems.

00:07:19

SAP's available solutions have grown significantly in the past few years especially, and you're
going to be seeing more and more of Fiori unifying these cloud experiences in the future.

00:07:30

Another aspect to this unified approach is focused on the end user in a way that the user
experience remain consistent across

00:07:41

not just all SAP solutions and systems, but also across all input devices leveraged to access
those systems.

00:07:48

So regardless of whether you're on a mobile phone or a laptop or a tablet or a desktop,

00:07:54

the idea is that SAP's new UX strategy has Fiori as the core user experience remaining the
same across all devices.

00:08:03

So what's the process involved in making this strategy a reality? In a nutshell, we like to think
of it as humanizing IT.

00:08:11

What that means is rather than focusing on systems or specs or features, we want to show
what's possible when you start with a focus on the end user

00:08:21

and use a methodology called design thinking to create innovative solutions.

00:08:26

Design is generally considered sort of a separate discipline from development, but the two
really do go hand-in-hand, especially in this world of putting the user first.

00:08:35

So we're here to show you how you can apply these design principles quite effectively. You're
going to learn much more about design thinking in week 2.

00:08:46

Now, I know this is all a bit general at this stage, but we thought it very important to set the
stage with how user experience is driving the enterprise experience of today

00:08:56

In the industry, this is often referred as the consumerization of IT. Nowadays with the
proliferation of smart phones and the apps that come with them,

00:09:05

this has really has raised the bar in terms of what users expect from enterprise software. This
consumerization and innovation is ultimately benefiting all involved,

00:09:15

and SAP is right in the middle of it, very committed to it's UX strategy with Fiori as a key part.

00:09:21

Hence, this course and the fact that last year SAP made it such that all Fiori apps and design
guidelines are included with SAP's underlying software licenses.

00:09:30

So clearly SAP wants all those interested in UX in the enterprise to take advantage of Fiori,
and we're here to show you how to do just that.

00:09:40

Next up, we're going to continue the discussion on UX and get more specific about SAP Fiori.

00:09:46

Thanks for joining, and enjoy the course!

WEEK 1, UNIT 2
00:00:12

Hello and welcome to unit 2 in week 1 of the Build Your Own Fiori App in the Cloud course. My
name is Yoram Friedman and I want to introduce you to SAP Fiori.

00:00:22

You've probably heard about SAP Fiori. SAP released the first 25 Fiori applications about two
years ago and ever since, we have released multiple new applications.

00:00:32

But SAP Fiori is not all about applications. SAP Fiori is the new SAP UX and the new face of
SAP for all business users across all business applications.

00:00:44

We are going to see SAP Fiori UI in any new SAP solution that is going to be introduced to the
market in the next few years.

00:00:52

SAP Fiori is going to be the new face of Suite for HANA. SAP Fiori is going to be the new face
for any cloud solution in the future.

00:00:59

And SAP Fiori is going to be here with any application that SAP and SAP partners are going to
release.

00:01:08

In order to understand what SAP Fiori is, we need to look at that not only as a new UI or a new
screen on top of existing transactions, but as a new concept.

00:01:19

SAP Fiori is providing a new paradigm to access business information.

00:01:26

Traditionally, SAP applications were monolithic applications with screens full of multiple input
fields, multiple areas, tabs.

00:01:36

And we were trying to capture in one screen all the information that is possible for one
transaction for any user that might want to use that specific transaction.

00:01:47

With SAP Fiori, we are designing applications from a user-centric approach. We are building
applications that are designed for you as a user, to your specific needs and the way you like to
work.

00:01:59

Applications today are not going to be big, monolithic screens with numerous fields that might
confuse the user,

00:02:08

but they are going to compose of small tasks that enable the user to focus on exactly what he
needs to do at a certain point in time.

00:02:17

So with SAP Fiori we are actually breaking those big monolithic applications into small tasks
that are extremely easy to use

00:02:27

like any application you use today on your tablet, on your mobile, or modern applications that
you use on your desktop.

00:02:35

The big transactions are going to be split based on tasks, based on user roles, and other
parameters that we'll learn later in this course.

00:02:44

One way of looking at that, traditionally, SAP describes applications in a way of swim lanes.

00:02:51

We are trying to describe a big business process and who are the users that are actually
participating in that business process.

00:02:58

With Fiori, we are not trying to achieve a complete business process in one screen, but we are
actually trying to provide for a single user role that participates in a big transaction

00:03:09

one lane in this big swim lane diagramand we're trying to provide that specific user with the
tasks that he or she needs to do in their daily activities.

00:03:21

There are probably going to be other tasks that need to be fulfilled by other users. And those
users are going to have their own Fiori applications.

00:03:29

But for me as a single user who is trying to do a certain task, I will see only the information that
I need

00:03:35

and only the activities that I'm asked to do when accessing the system.

00:03:41

But I will not see only the information that I need to see in a specific transaction, because I, as
a user, can play in multiple roles.

00:03:50

I might be an account manager that needs to do certain financing activity, but I'm also an
employee that wants to ask for vacation, and I might be a manager that needs to approve a
purchase order from one of my employees.

00:04:02

So with Fiori, I have multiple tasks for multiple business domains. And those tasks are
aggregated together on one screen

00:04:11

and it enables me as a user to fulfill all my daily activities in one place in the same way in a
very easy and intuitive approach.

00:04:21

So with Fiori we are not only breaking big applications into multiple smaller pieces, but we are
also taking small pieces from multiple applications

00:04:30

and putting them together for the user to actually enjoy a single experience that provides
everything they need on a daily basis.

00:04:40

We are trying to do it in a very coherent way. We are trying to do it in a very easy and simple
way.

00:04:45

And Fiori has multiple principles that we need to remember that actually makes a Fiori app into
a real, easy-to-use application.

00:04:56

First of all, all Fiori applications are role-based. So when I see an application, that's an
application that was designed for my specific role.

00:05:04

It was not designed for any role. It was not designed as a generic application for multiple roles.

00:05:10

It was designed for me, as someone who knows how to use it, and it targets the way that I like
to do my work.

00:05:17

It's responsive, meaning that it can run on multiple platforms. I can use the same application
on my desktop, on my laptop, on my tablet, on my mobile phone,

00:05:27

and the UI is going to adapt itself in response to the change in the screen size.

00:05:32

It's simple, and this is one of the highlights of Fiori. And everything that SAP is doing now, let's
try and make things as easy to use as possible.

00:05:41

You don't need to take three or four weeks training in order to understand how to use a Fiori
application. It should be as intuitive as using any other app on your phone or any other simple
application that you use on your desktop today.

00:05:53

It's coherent, meaning that I'm going to be able to do the same activities in a similar way even
if it's coming from different domains, different business areas.

00:06:04

And one of the highlights of Fiori: It's delightful. We like it. It's something that is fun to use, it's
something that is easy to use.

00:06:11

I'm not fighting with the system in order to understand how to use it. I can even enjoy doing

that.
00:06:18

Based on those principles, SAP is releasing different types of applications. And today, we have
three main types of applications that compose the Fiori portfolio.

00:06:27

We have a set of transactional applications that enables me to access back-end transactions

and perform all kinds of activities

00:06:36

like approval, like creation of new business entities, and things like that. Transactional
applications can run on the HANA platform as well as on our traditional Business Suite, which
is not based on HANA.

00:06:47

We have two other types of Fiori applications: analytical applications and fact sheets. Those
applications can only run on the HANA platform today.

00:06:56

Analytical applications provide me with an insight to the business information that I have in the
back end, usually in a graphical way or in a way that is easy to analyze.

00:07:07

A fact sheet is a 360 view of a specific business object and all the information that relates to
that.

00:07:14

Fact sheets are tied together, and actually all those applications can coexist and work with
each other.

00:07:21

I can start with an analytical application, analyze some data, and then react to what I learn
using a transactional application or go and learn more using a fact sheet application.

00:07:31

So there are not working in silos. All the Fiori applications work together, and we combined
those Fiori applications in one place: the launchpad.

00:07:41

The launchpad is the entry point for me as a user, and here I will find all Fiori applications,
whatever type they are.

00:07:49

In the launchpad, I can do a search. I have a search across the top of the launchpad.

00:07:56

But the launchpad itself is configured and personalized to me as a user. The launchpad is
configured for a specific role.

00:08:03

So if I'm an account manager, I will see the applications that are relevant for me. If I play in
multiple rolesI'm an account manager and also a people manager and I'm also an
employee

00:08:14

I will see those applications that are designed for account management, for people
management, and for me as self-service applications.

00:08:21

So the launchpad is one place that I can aggregate applications for multiple domains

00:08:27

and put them in a way that I as a user can actually find them in a very easy way. I can
rearrange the applications on the launchpad.

00:08:36

I can add more applications depending on which applications are available for me as a role. I
can very easily see notifications there using color coding,

00:08:45

so if there is a problem I will probably see it in red. If everything is okay I will probably see it in
green.

00:08:50

I can add applications that are not Fiori. I can add Jam integration. I can add RSS feeds to the
launchpad. And we'll learn more about the launchpad later in this training

00:09:00

when we see how we can use the launchpad in the cloud to deploy Fiori applications and even

to put non-Fiori applications into the launchpad.

00:09:09

The launchpad is going to be the entry point for every SAP user in the future and it's going to
be tied together to the Fiori,

00:09:20

but also enables me to put any type of application, not necessarily Fiori.

00:09:27

One interesting thing about Fiori is that we are trying to provide an intuitive user experience,
meaning

00:09:34

if I know how to use a certain Fiori application, I will probably be able to handle other Fiori
applications. The process is almost identical.

00:09:43

I'm always starting with the launchpad.

00:09:46

When I find the application I want to use, I just click on that or press on that, depending on the
device I'm using, and then I will open that application.

00:09:55

The application can either be a master data template or a full-screen template, and we'll learn
about that later in this course.

00:10:02

If it's a master data template, I will see a list of values on the left side and I can drill down into
that.

00:10:08

If it's a full screen, I will see the values all over the screen and I can definitely continue and drill
down into that. So the overall process is very similar regardless of the specific applications I
use

00:10:19

The fact that we are actually reusing that experience and repeating that same experience over
and over makes it very easy to learn how to use new Fiori applications

00:10:29

and the learning curve is actually very easy.

00:10:33

Another nice thing about Fiori is that it's fully customizable. I can enhance the applications. I
can extend applications, and in this course we learn how to extend applications.

00:10:44

I can change the look and feel of the application, completely change the theme of the
application, adapt it my own company brand.

00:10:53

So the applications are quite flexible. I can actually take an application that SAP or a partner
provides, I can enhance it, add functionality, change the color, change the layout of the theme

00:11:02

and actually make it my own personal application without too much trouble.

00:11:08

There are tools available to actually do the theming and to do the extensibility. And we will
learn about those tools later in this course.

00:11:17

One thing that I already mentioned, and will summarize that, Fiori can run on any device.

00:11:23

I can start my work in the office using my desktop computer and I will see a full screen of Fiori.

00:11:30

I can continue and work on my tablet, and then the screen is going to be almost identical but
instead of using a mouse I can use my finger as a pointing device.

00:11:39

I can take it on the road on any mobile device, and then the screen again is going to be very
similar, the experience is going to be very similar, but adapted to that specific mobile device.

00:11:50

So the fact that Fiori is responsive and available on almost any device makes it very easy to
use

00:11:58

and make the data in SAP system much more accessible for me.

00:12:04

So in this course we are going to learn a lot about Fiori: how to create applications, how to
extend applications, how to deploy applications.

00:12:11

You will have the opportunity to play with Fiori later this week in one of the exercises we have.

00:12:17

And I hope that by doing that, you will learn the advantages of using Fiori and how easy it is to
use.

00:12:24

Only after you understand how easy Fiori is, you can actually go and develop your own Fiori
applications and they should be as easy to use as any application that you are going to get
from SAP.

00:12:35

Thank you.

WEEK 1, UNIT 3
00:00:12

Hello, and welcome to unit 3 in week 1 of the Build Your Own Fiori App in the Cloud course.

00:00:19

In this session, I want to talk with you a little bit about the Fiori design inspiration.

00:00:25

We are going to focus on the creation of Fiori apps during this course, and we are going to
learn a lot about the Fiori design principles,

00:00:32

the specific controls that make up a Fiori application, the layout, the templates, the floorplans,
everything that makes a Fiori app into a Fiori.

00:00:41

But before we dive into that, I want you to understand one of the main concepts that happens
today in terms of Web design and graphic design overall.

00:00:51

And that is the shift from what we call skeuomorphism into a flat design.

00:00:58

This presentation is going to be very visual. I want to present you with specific designs so you
can actually look at them and understand. So it will not have a lot of text.

00:01:09

And I want to ask you to look at the slidesdon't look at mebecause you are going to try to
focus on the fine details that I'm going to present in those images.

00:01:20

Skeuomorphism is a big word, but it describes a design concept that's been with us for many
years.

00:01:27

The idea behind skeuomorphism is to try and make or to mimic real objects in our design.

00:01:36

If you look at that specific image, we see a calendar application from Mac or iPad.

00:01:43

And that specific calendar application is trying to mimic a real paper-based calendar that you
might find on the desk in many places.

00:01:54

You have something that looks like paper. We have leather covering at the top. We can even
see under the leather covering a ripped paper.

00:02:04

We are trying to actually mimic that real object that you might see on the desk in many offices

00:02:11

and make sure that if people are familiar with that specific object, they will identify that specific
screen as a calendar.

00:02:19

So this is the idea behind skeuomorphism. We are trying to actually mimic those real-world
objects

00:02:26

so people have an easy time relating to that specific presentation.

00:02:32

Another nice example of that is the bookshelf. The bookshelf application is trying to mimic a
real-world bookshelf, so we see the books standing on the shelf,

00:02:42

we see a three-dimensional shelf made of oak or maple, I don't really know. But the fact that
we can debate whether that's an oak or maple

00:02:50

means that someone put lots of effort into replicating that specific fine design that makes it look
like real wood.

00:03:00

Skeuomorphism has been with us for a very long time. In recent years, we are actually trying
to move away from that specific design.

00:03:09

It's not that this design is bad, but there are some things that make flat design even better. In
order to actually create this real-world representation,

10

00:03:19

I need to actually invest in lots of resources. I need a graphic card actually able to render those
fine details. I need to create it on the screen, which takes time.

00:03:29

I need to invest a lot of time in actually creating those representations. So it's not something
that's easy to create and it's very resource-intensive on the system.

00:03:40

Another problem with skeuomorphism is that objects are sometimes very culture-specific. So
the calendar that they have on the desk in many offices in the U.S.

00:03:50

is not necessarily the same thing that you find in other places in the world. And in fact in many
cases we see a specific representation of a phone, or a specific representation of a camera,

00:04:01

that doesn't mean that in another culture they look the same or that a modern phone looks the
same way as the classical representation of the phone with a rotary dial that is usually made in
a graphic design.

00:04:13

So what's happened in recent years is we try to move away from these three-dimensional realworld objects

00:04:19

into things that are more flat and more...I wouldn't say abstract, but a schematic
representation.

00:04:27

One of the biggest examples for that in recent years is the move from iOS 6 to iOS 7, the
Apple iPhone operating system.

00:04:38

iOS 6 was very, very skeuomorphism. You will see if you look on the left side of the screen, we
see the camera application, we see the photo application,

00:04:46

we see the calendar application that tries to mimic that real-world application.

00:04:51

Now as I mentioned, those applications or this representation is very resource-intensive. It

takes time. It takes battery. So we don't really want to continue with that.

00:05:01

And what Apple did with iOS 7 is tried to simplify the design. So if you look at the camera and
the photo and the calendar, you see that you can still identify the icon, but it looks much
simpler.

00:05:15

If we look at the video app, we don't see any shading at the moment. So it's something that is
easy to render and very easy to create.

00:05:23

Another example for that is the calculator application. In the past, the calculator application
tried to mimic three-dimensional buttons.

00:05:32

In the new calculator application, it's totally flat. No 3D, no shading.

00:05:37

Simple, easy to understand, and to me, looks much better. Very, very modern.

00:05:45

So this is basically one of the biggest trends that we see today in Web design, in graphic
design overall, in application design.

00:05:51

Let's move away from those real-world representations and skeuomorphic design to something
that is much simpler and easy.

00:06:00

It doesn't mean that it's easier to design it; sometimes a simple design is more complicated to
come up with.

00:06:07

But it's easy on the eye and it's very, very intuitive for the user to understand that specific
design.

00:06:15

Another big trend that we've seen in recent years is the change in the pointing device, the

11

evolution of the pointing device.

00:06:23

In the past, we used to communicate with our system through a keyboard. Later we moved to
use the mouse and the mouse pointing device. Today we're using our finger.

00:06:33

So if we are changing the pointing device, we definitely need to change the design of the
application.We need to make sure that I can use my finger to actually mark something on the
screen

00:06:43

or press on something on the screen, meaning some elements need to be bigger, some
elements need to behave in a different way. And that's also something we need to remember.

00:06:52

When you design a Fiori application, make sure you understand that users might use that
specific application on a tablet, on a mobile phone,

00:07:00

and they are going to use their fingers to actually interact with that specific application.

00:07:05

And again, one of the good examples of the shift from a mouse-based pointing device to a
finger pointing device is the new UI for Windows 8, the metro design.

00:07:16

And we see that instead of having lists of elements and menus that I can very easily point with
the mouse,

00:07:24

I have big tiles on the screen that I can point with my finger. I'm not going to miss it because
they are big enough for a human finger to point at.

00:07:33

And it is very easy to see what is going on.

00:07:36

If you are already familiar with Fiori, you will see that the same principles happen in the Fiori
launchpad and the Fiori applications.

00:07:42

We are trying to move to a tile-based design so it's very easy to interact with the system.

00:07:49

Now when we try to create something that is flat, there are several principles that we need to
understand.

00:07:56

The first: Let's get rid of all the effects. We don't need to have three-dimensional. We don't
need to have gradients.

00:08:04

We don't need to have animation and screens that are flowing on the screen and moving and
shifting and things like that.

00:08:11

Let's have something that's very simple, very flat, one layer of information. I might have
something with a very, fine shadow, but I don't want to have too many shadows there.

00:08:21

So let's get rid of all the effects. Effects are something that take resources from the system, so
it's going to make it more demanding and they need better hardware to run it on.

00:08:33

And in many places, those effects are a distraction to the user.

00:08:37

Another principle of flat design is that once I remove all the effects, I will also try to remove all
kinds of boxes and frames and things like that.

00:08:47

I don't need to have a text box or an input field with a frame around it. Sometimes you can
have something very simple as if I'm writing on a paper.

00:08:58

If I look at that specific image, I can fill in the values in the form without actually having a threedimensional input field inside a specific form.

00:09:06

A simple dotted line can actually replace that. Looks much cleaner, much easier for the user to

12

understand that this is a place to insert data.

00:09:15

We want to use simple elements. You saw the shift on the iOS device from something that
looks like a camera aperture to a simple representation of a camera.

00:09:25

And today, we have libraries of icons that you can find everywhere that represent almost any
object and any activity in a very fine way.

00:09:34

Linear icons. Something very simple, very easy, black and white or duotone, two colors.

00:09:41

So this is much easier to actually use, to create, and make the design extremely easy and
intuitive

00:09:51

so a user can still understand what they see and they don't need to try and understand do I
have a shadow there, what exactly is this object, what is this trying to imitate?

00:10:03

So try to use simple elements. SAP is providing libraries of simple elements, and we'll talk
about it in one of the other sessions.

00:10:11

Since we're talking about something simpleno shading, no gradients, simple elementshow
can I make things more interesting to the user?

00:10:19

One way of making it more interesting to the user is you can use typography. Use a different
font, use font size, use font kerning, try to play with the font colors.

00:10:29

So you can actually play with the font and make the whole look and feel of the screen more
interesting by actually applying all kinds of typographic criteria.

00:10:38

I'm not talking about calligraphy. Don't use handwriting font or fonts that are not easy to read.

00:10:43

Use very, very simple fonts, but try to play with the colors of the font, try to play with the
positioning of the font, with the spacing, to make the overall look and feel much more
interesting.

00:10:54

Colors are very, very important, but we need to be careful when using colors. We don't want to
use neon colors, we don't want to use bright colors.

00:11:03

We want to use candy colors. We want to use simple colors.

00:11:07

Now one thing to remember about SAP applications: SAP applications don't have lots of color
in them.

00:11:14

And we need to remember we are designing business applications. We are not creating
games.

00:11:19

People are going to use those applications for many hours a day. People are going to sit in
front of the screen and look at those colors for many hours a day.

00:11:26

That's why we want it to be slightly boring. We don't want bright colors, we don't want
distracting colors. We want very, very light shades.

00:11:35

As I mentioned, candy colors, light grey, light blue, things like that, work perfect in business
applications.

00:11:41

If you are going to design a computer game, use whatever color you want. If you want to
design a business application, try to be more subtle.

00:11:51

And, of course, the basic principle of flat design: Make it minimalistic.

00:11:56

One of the best examples for many years of a flat design, a minimalistic design, is the Google

13

Web page.
00:12:05

There is not a lot going on there. One big logo which used typography and some colors, and
one input field.

00:12:15

That's all it takes. And no one is going to argue with that specific design.

00:12:20

So keep that in mind when you are going to design an application. You want it to look more like
the Google page than any other complex page you are familiar with.

00:12:29

Another principle that you need to remember is something called attention span.

00:12:34

People don't like to try and look for information. People don't want to search and drill down and
click.

00:12:43

What we call attention span is the time that it takes a user to lose attention or the time that the
user is actually focusing on what I present in my application.

00:12:53

It is something like 8 seconds. We are saying that the attention span of people today is less
than the attention span of a goldfish, which is 9 seconds.

00:13:03

So I want to mention that all the important elements on the screen are visible to the user in
less than 8 seconds. Otherwise, I'm going to lose the user.

00:13:13

So make sure that when you are creating something, don't make me look for the information.
Don't make me spend time dreaming and finding information.

00:13:22

I want to see it. I want to see it now, or else I'm going away.

00:13:28

So overall, we need to remember that when we design a new applicationand Fiori is a new
design for our application

00:13:35

we want to make sure that the UX and the overall experience is very, very simple, very, very
easy, and very, very flat.

00:13:43

And you need to remember that the user interface is like a joke. If you have to explain it, it's
probably not good.

00:13:50

Thank you.

14

WEEK 1, UNIT 4
00:00:12

Hello and welcome to week 1, unit 4 of the Build Your Own SAP Fiori App in the Cloud
openSAP course.

00:00:20

In this session, we have a fun discussion on SAP Fiori tools and resources. So let's get
started.

00:00:27

The first, most important thing to start before we start playing around with tools and resources
is to know that technology is just one step in the process of designing and building a Fiori app.

00:00:38

As you'll see throughout the weeks of this course, we've structured it in a logical way where
you want to start with trying to figure out what you want to accomplish,

00:00:47

how you want to design that, and really before you touch any tools, there's a lot of work to do
first.

00:00:52

So in some ways, this session is a little premature because you haven't done design thinking,
which we'll cover in the next week.

00:00:59

But we want to give you these resources up front now so that you're prepared to have them at
your fingertips when you're ready for that build process.

00:01:08

So first up is the Fiori apps reference library. Before you build a Fiori app or even think about
designing one,

00:01:17

it's best to know which Fiori apps already exist that SAP has created, because you don't want
to reinvent the wheel and do a lot of work if there's already a solution available for you that
accomplishes

00:01:28

the task that you're trying to design for.

00:01:31

This is a great resourceand I'll be demoing all of these in just a secondfor you to doublecheck which Fiori apps are available. And it's updated regularly.

00:01:40

And it's a nice browser-based way to do that.

00:01:44

Next is the SAP UI Theme Designer. Sometimes people confuse theming for designing, so let
me be clear and explain the difference.

00:01:54

When you design an app, there's a process flow, there's a logical experience that happens,
there's a story. You're going to be learning a lot more about this in the coming weeks.

00:02:04

And at the very end, often times color palettes and actual look and feel can be overlaid on top
of the fundamental design.

00:02:15

I'll show you here an example of some of the original Fiori screens that you see, and then
themes that have changed on top of them.

00:02:26

So the actual design of the app isn't what's changing, it's just the theming, so background or
colors or font type.

00:02:35

Those sorts of things can be manipulated once you have the Fiori app designed and built.

00:02:42

The next set of resources is found on the SAP Community Network. We've got a lot of great
links here for you.

00:02:49

There are several communities. The first one is more about user experience and the general
strategy from SAP.

15

00:02:57

There's a Fiori Learning Community, which is where you'll go to learn specifics on best
practices for implementing Fiori.

00:03:06

Sometimes there's articles on deploying and configuring the original Fiori apps versus
changing things for your own landscape and more resources on the creation process.

00:03:17

There's a whole section dedicated to the Web IDE, which is the cloud-based integrated
development environment that we'll be leveraging throughout the course.

00:03:26

So you can learn some of the finer details on how to take advantage of these available
resources.

00:03:33

Now again, in the course itself, we're going to structure it so that we give you everything you
need to know end-to-end to design and build a Fiori app, but we're covering things at a certain
level

00:03:42

and sometimes you'll want to go deeper and go into these communities where there's a lot
more detail than we can cover in the videos that we're doing here for you.

00:03:50

And finally, there's a User Experience Community for rapid-deployment solutions, which is a
topic we'll discuss here in a second.

00:03:58

And that's an expert community for best practices on how to deploy and configure and design
your Fiori apps.

00:04:04

And then in the second part of the screen here you'll see there are a couple of links on
SAPUI5.

00:04:10

You'll learn more about this in the coming sessions. This is a framework based on HTML5,
optimized for SAP systems.

00:04:19

So this is a set of resources for how you actually build apps.

00:04:25

And I'll walk you through a demo of those resources and I just wanted to make sure you had
the links here so that you're able to look at some of these resources after you watch this
session.

00:04:37

Okay. Here we have rapid-deployment solutions. I mentioned this briefly before. This is an
implementation methodology that SAP has

00:04:48

that makes it very predictable for any solutions that you're interested in deploying.

00:04:54

We have several rapid-deployment solutions for user experience, and I'm just going to walk
through them quickly.

00:05:00

We have the Fiori Apps RDS, which is all about deploying and configuring Fiori apps that SAP
has created.

00:05:07

We have the SAP Fiori Design RDS , which is similar to this course. It has some details on
designing and creating your own Fiori apps.

00:05:15

We have the SAP Mobile Platform RDS, which is all about enhancing and mobilizing your Fiori
apps so that they can take advantage of even more specific mobile features.

00:05:25

That's outside of the scope of this course, but again these are just resources for you to be
aware of if you want to learn more details on some of these more specific topics.

00:05:33

And then there's the Mobile Secure RDS. This is for once you've created an app and you want
to take the authentication and security to the next level.

16

00:05:42

This is a set of best practices to help you do that.

00:05:46

And then there's a Screen Personas RDS. Screen personas is another tool for personalizing
your SAP GUI screens

00:05:56

and also increasing productivity of end users through this personalization. It's quite different
than Fiori, and we're not going to be covering it throughout the course,

00:06:05

but again this is another user experience tool that you can read up on on your own time.

00:06:12

So all of these rapid-deployment solutions are fast, predictable, easy to use. And again, its an
implementation methodology that you can take advantage of offline.

00:06:23

So with that, let me just demo several of these tools and resources. I'm going to start here with
the Fiori apps library.

00:06:32

You can see that it's a browser-based tool for getting a list. It's much like a Fiori app itself, with
kind of a master detail look.

00:06:40

So as you browse through, you can see all the different Fiori apps that are already available.

00:06:45

Here there appears to be 17 different approval apps, which is a popular scenario that you
might be designing and needing to create an app for.

00:06:53

So again, you want to double-check that you don't already have the solution available at your
fingertips through an app that SAP has created.

00:07:02

So this is a really great resource for you to check that. You can see you can learn more about
the installation and configuration of each of these apps, and there's evenin some of them
screenshots for each of them.

00:07:13

Next, I just wanted to show you the SAP UI theme designer briefly. You can see here that this
is a Fiori app with different components.

00:07:22

It's a purchase order with, again, a master detail layout. And over on the right-hand side, you
can manipulate the color palette of the foreground and background and other components
inside the app.

00:07:34

So again, this is a tool that often times is best used after you have already designed and
created your app,

00:07:40

and then you want to brand it or theme it in a way that it adheres to whatever your company's
logo or brand is.

00:07:49

So next is the UI5 development toolkit for HTML5, also known as SAPUI5.

00:07:58

This is where you can see all of the resources available associated with this optimized version
of HTML5 that you leverage to build your apps.

00:08:10

There's a section here called Explore, and if you click on that you'll come to a page that has all
of the different

00:08:18

buttons or menu bars and layouts that make up Fiori apps, because Fiori is based on SAPUI5,
which you'll be learning about in future sessions.

00:08:28

And each of these different components that make up a UI5 app or a Fiori app have example
code

00:08:38

and you can just click in the upper right on any of these example pages to see the code and
then you can copy and paste that and use it in your creation process.

17

00:08:47

But again, I'm getting a little ahead of where this course is going. This is just for you to have in
advance so that when you come to that point in the design and build process

00:08:57

where you'd like to do more advanced things, you have these resources at your fingertips.

00:09:01

Okay. So now just to show you the SAP Community Network. This is the User Experience
Strategy community,

00:09:10

which has a lot of links and discussions on SAP's user experience strategy. And this is
updated regularly.

00:09:17

The next one is the Fiori Learning Community on SCN.

00:09:22

This is where you can get more best practices and some specific technical details on certain
ways to implement and create Fiori apps.

00:09:33

Next is the Web IDE, the SAP Web IDE Enablement community on the SAP Community
Network.

00:09:41

This is great because it has these tabs for Create, Extend, Mobile. There's links and
explanations for how to get started with the SAP Web IDE.

00:09:51

We'll be covering this in more detail throughout this course, but this is just for your reference
offline.

00:09:58

And then finally, let's take a look at the Service Marketplace. This is available only to existing
SAP customers and partners.

00:10:07

This is where you go to download the SAP rapid-deployment solutions. So you can see here
on the page this is the SAP Fiori apps rapid-deployment solution.

00:10:17

Here are all the different scope items included in the solution and you can just hit this big
orange button to download the package, which is this set of best practices.

00:10:26

Now I know this is a lot of information, and it may seem overwhelming, and most of this isn't
required for participation and full completion of this course.

00:10:36

This is just if you want to go above and beyond in your design and creation process. But
anything that's required or that you need to leverage in the course itself

00:10:45

will be covered in its own session as we go through the course.

00:10:52

And last but not least, there's this User Experience Rapid Deployment Solutions community on
SCN. It's basically these rapid-deployment solutions that we covered.

00:11:01

If you are interested in them and you want to talk with experts and bounce off some ideas on
how best to deploy and configure Fiori apps effectively,

00:11:10

this is the community for you, which has great topical areas for those of types of discussions.

00:11:17

So with that we will conclude, and thank you for joining.

18

WEEK 1, UNIT 5
00:00:12

Hello and welcome to unit 5 in week 1 of the Build Your Own Fiori App in the Cloud course.

00:00:18

In this session, I will introduce you to the basics of OData and UI5.

00:00:23

Naturally, we can't cover everything related to OData and UI5 in one session, but I will try to
give you the highlights and the important things and terminology that you might need later in
this course.

00:00:35

There are many other resources you can find about OData and UI5, and since Fiori is based
on both standards,

00:00:43

it's advisable from time to time to go and learn more and see what's new in these specific
areas.

00:00:48

So let's start with OData.

00:00:51

OData is an open standard based on many other standards. OData is based on the Atom
standard, Atom Syndication, Atom Publishing.

00:00:57

It is using SOAP and REST to communicate between systems. And it's extensible. That's the
standard definition for OData.

00:01:05

But what do we get from OData? As I mentioned, it's a standard way to communicate with a
system.

00:01:13

It's a standard way to ask for information from our back-end system.

00:01:18

Once we have an OData service, a NetWeaver Gateway provides us with the ability to very
easily create OData services that expose information from our back-end system.

00:01:30

Now it's very easy for me, as a user and as a developer, to ask for that specific information in a
standard way using HTTP, using XML.

00:01:40

And that's the basic idea behind OData.

00:01:44

I mentioned that OData is based on existing industry standards like Atom, SOAP, REST. But
what these extra added benefits of OData?

00:01:55

And that's what maybe is important to understand: that OData makes it easy to communicate
with a system by enriching the information that a service provides me with message metadata.

00:02:08

That way I can actually understand what is the information I am going to receive from a
service.

00:02:15

And it also enables me to define the message with additional information like data types, like
complex data types in the message, like queries.

00:02:27

I can actually do a SELECT, UPDATE, INSERT, OVER, REST, and SOAP calls.

00:02:34

So as I mentioned, the main thing to remember about OData is that it is a standard way for me
to communicate with other systems, remote systems,

00:02:44

using standard protocols like HTTP, SOAP, and XML.

00:02:51

What does it look like? Here we have an example of a very, very simple OData request.

00:02:58

That request is part of the HTTP header. So it's passed over HTTP to a service that's available
somewhere online. Once I send that specific request, I can get a response.

19

00:03:09

And in that response, I find the information that I requested. And based on that information, I
can either create a UI, put it into a database, and do whatever I want with that specific
information.

00:03:20

It's something very, very generic.

00:03:23

The information can be retrieved in different ways. There are different formats for that specific
information.

00:03:29

The two most common formats that we use in OData are either the JSON (JavaScript Object
Notation) and/or XML.

00:03:39

It's up to you to decide whether you want to retrieve the information using JSON or XML. It
doesn't really matter; I'm not going to read it either way.

00:03:47

But my system, my development environment, maybe my application, knows how to consume

either one of them.

00:03:53

So you need to remember what system you're working on and which information is most
appropriate for that specific system.

00:04:01

As I mentioned, one of the important things that we have in OData is the ability to ask the
service what it can provide me.

00:04:08

Actually to understand the contract that I'm going to create between two systems or between
the UI and the back-end system. And this is what we call the metadata of the service.

00:04:18

So when I create a request for information and I add the metadata parameter,

00:04:24

I am going to get back something that we call an Entity Data Model, or EDMX, file.

00:04:30

That response is always going to be in XML, but that XML is going to describe the actual
structure of the data.

00:04:38

What are the data sets that I'm going to get? What are the different data elements? What is the
data type of each and every element?

00:04:47

Based on that information, I can actually structure a complete UI. I don't need the actual data.

00:04:53

I just need the schema that describes the data that I'm going to get. And that's the purpose of
the metadata.

00:05:02

Besides the metadata, there are different parameters that I can actually add in the URL when
structuring an OData request.

00:05:11

And those parameters actually enable me to get different types of responses when I ask for
information.

00:05:16

I can add the $orderby parameter if I want to get information in a certain sequence, ascending,
descending, based on something.

00:05:24

I can ask for a subset of information, like I want to have only the top five data elements.

00:05:32

I can skip several data elements. I can add filters, so just to get a specific subset of elements.

00:05:40

I can do a more complex $select, so I can really fine-tune the way I'm asking for information
over OData.

00:05:48

And that provides me with a lot of strengths when I want to create a system that is integrated
with another system over those standard protocols.

20

00:05:59

You're going to make lots of OData query requests later in this course. In most cases, the tools
that we are going to use are going to handle that for you.

00:06:09

But it's also important to try to understand what happens behind once you actually make that
request.

00:06:16

So when you start building your Fiori application later and you are going to call a service, you
will see that information. That specific information is based on the metadata that the service
provides.

00:06:27

You will get an EDMX file from us if you want to build a services based on that. And again, that
is metadata for a service that you can use to build your own UI.

00:06:37

Now once we have something that is going to provide me with data, I can start to construct a
UI.

00:06:44

Fiori applications are based on UI5. SAPUI5you've all probably heard about this termis a
client-side HTML5 and JavaScript rendering library.

00:06:56

And we are using that to consume SAP data and to create a UI out of it.

00:07:05

The UI5 library provides me with all the information I need and all the tools that I need, or the
APIs, to create a business UI that matches SAP look and feel.

00:07:21

So it extends the standard HTML5 libraries. It provides me with something that supports all the
standards that exist in the market for UI.

00:07:31

But it enables me very easily to create a UI that looks the way I want it if I am creating an SAPbased application.

00:07:40

What do I mean by that? Instead of me as a user that is creating a Web page or Web-based
application,

00:07:49

I don't need to start and put specific graphical elements on the screen, because those libraries
that come as part of UI5 are actually creating those graphical elements for me.

00:07:59

And those graphical elements match everything that we discussed before in the course in
terms of flat design, in terms of icons, in terms of colors and things like that.

00:08:09

And it's all running on the client side. So when I start to build that, I can use different libraries
and those libraries can actually work with different screen size and different devices.

00:08:22

I have specific libraries that can work a desktop, with laptops, with mobile devices. And those
libraries can actually interact very nicely with the data models that I get from my OData
queries.

00:08:34

And based on those tools, those APIs, those libraries, I can actually start and build my UI.

00:08:41

You need to be familiar with some of those libraries. And again, when you use the tools that
you will get to know later in this course,

00:08:49

those tools make most of the work for you. But if you really want to understand what is
happening behind the scenes, you might want to get to know more some of those libraries.

00:09:00

So one of the most important libraries we have today is sap.ui.m. And that library includes all
kids of controls, mainly for mobile applications.

00:09:10

We also use many of those controls in Fiori applications. We have the ui.common that includes
standard controls, things like text fields, bullets, and other controls.

21

00:09:22

The core includes all kinds of functionality like queries, icons, and stuff like that.

00:09:29

And you might want to go and learn more about it with the documentation of UI5 that describes
very nicely each and every library and the content of that.

00:09:39

Here are two examples. We have a library for table, and that provides me with the ability to
create a table that is

00:09:50

very rich in data but also responsive. And we have a library with common controls like text
fields, like bullets, things like that.

00:09:59

As part of the core library, we have a set of icons, a few hundred icons.

00:10:06

They all match the flat design that we are looking for in Fiori. If you need an icon in your
application, you can just pick one from that specific library.

00:10:15

You will also see that the tools provide you with the ability to choose an icon using a graphical
interface.

00:10:22

And that graphical interface is actually using this specific library to provide you with the icon.

00:10:30

Another important thing to know about UI5 and OData when we develop is that we like to
actually use a concept called the Model View Controller when we create UI5 applications.

00:10:42

That model is actually a very nice concept that helps you design an application in a better way.

00:10:51

It creates a separation between the user and the data.

00:10:56

It defines an element called a view. And the view is what the user is going to interact with.

00:11:02

It also defines an element called model. That element actually holds the data, so the
communication between my back-end system through the OData service is managed by the
model.

00:11:15

The model and the view are linked together so the data is moved between the model and the
view, but any other interaction

00:11:24

any change to the view or any change to the modelis handled by another element called the
controller.

00:11:32

So the controller manipulates both the view and the model. There are not manipulating each
other directly.

00:11:40

That enables me as a developer to focus with the view on the layout of the UI, with the model
on the data elements,

00:11:50

and any other functionality that happens in the UI layer should be part of the controller.

00:11:57

Most of my JavaScripting is going to happen in the controller, while most of my HTML is going
to be part of the view.

00:12:04

And you will see it when you start building your Fiori application. Just to look at one example of
that, how we do the separation between the controller and the view.

00:12:11

If you look at that specific example, we are going to create a controller in the beginning and in
that controller we are going to have two functions.

00:12:19

One is a mandatory function called an onInit, and in this case we are actually going to reset a
counter.

22

00:12:25

And then we define another function called sayHello. That specific function is going to create
an alert with the word Hello and the number in the counter.

00:12:35

This is going to be something that happens in file in the controller.

00:12:40

Now in my view, which is another element, it's another file, I'm going to define where that
specific functionality is going to be triggered from.

00:12:49

So I'm going to put a button on the screen and once someone is going to press the button,
then I'm going to call a specific function from the controller.

00:12:59

So that's why I actually create the link between a controller and a view.

00:13:05

Another important thing when we talk about UI5 is data binding. Data binding is the link
between a view and a model.

00:13:13

The view should present you with data coming from the model itself. So if I'm asking for
information about the customer,

00:13:20

I'm going to actually put information that I got from the back end through the OData service
using OData model.

00:13:29

I need to put it somewhere on the screen. So I need to create a link between my data model
and my view.

00:13:35

And that link is called the binding. The binding can be unidirectional or bidirectional, meaning
sometimes I can just take information from my model and put it in the view.

00:13:47

And if that information changes in the model, then it will also change in the view.

00:13:52

In other cases, I can have a binding that is two-way. And then if I update the information as a
user in the UI, that information is going to be updated also in the model.

00:14:05

So those are different types of binding and again, you will use those types when you start to
create your application.

00:14:12

Just to summarize. OData is used to provide information from a Fiori application where UI5 is
used to actually render the UI.

00:14:24

A standard application has multiple files. When I start to program that application and create a
project, and you will do it later in the course,

00:14:32

you will see that some of those files that you have in a project are actually views. Some of
those files are controllers.

00:14:40

Some of those files are data elements, metadata, EDMX files from OData.

00:14:45

So when you go and create your project, try to understand each and every file that you have in
your project.

00:14:51

Where does it come from and what purpose does it serve as part of this overall model of
OData UI5 and model view control?

00:14:59

Thank you.

23

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.