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

2

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.

3

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.

4

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!

5

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 diagram—and we're trying to provide that specific user with the

tasks that he or she needs to do in their daily activities.

6

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

7

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 roles—I'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

8

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

9

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.

10

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 slides—don't look at me—because 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,

11

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 real-

world 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

12

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 three-

dimensional 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

13

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 simple—no shading, no gradients, simple elements—how

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

14

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 application—and 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.

15

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 resource—and I'll be demoing all of these in just a second—for you to double-

check 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.

16

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.

17

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 even—in 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.

18

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.

19

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.

20

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.

21

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. SAPUI5—you've all probably heard about this term—is 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 SAP-

based 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.

22

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 model—is 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.

23

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.

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 SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.