openSAP

Developing Web Apps with SAPUI5

Week 1 Unit 1

00:00:10 Hello and welcome to Week 1, Unit 1 of our openSAP course "Developing Web Apps with
SAPUI5".My name is Andreas and I am a development architect in the SAPUI5 area.
00:00:22 Those who attended the preparation week – welcome back! You should now be well
prepared for the following units.
00:00:29 In this unit, you will learn some basics about SAPUI5, and we will also start developing a
very simple application.The rest of the week looks like this.
00:00:40 After this introduction unit, there will be a unit about controls and views, and how you can
use them to create the user interface.Then there will be a unit about structuring your
application code with controllers and modules.
00:00:53 The next unit will be about components and their configuration with the app descriptor.Then
there will be a unit about models, data binding, and internationalization.
00:01:04 And finally, the last unit of this week will be about containers and layout, and applying CSS
classes for content paddings. All of these units will have some demos, where we will do live
coding.
00:01:16 There's no need to follow them – you will have handouts in which you can read the
exercises and do the code on the very newest codebase.So why are we doing Web
applications?
00:01:29 The most important reason is that Web apps can run on all kinds of devices, such as
desktop browsers, smartphones, tablets, big screens, small screens, touch interaction, or
mouse interaction.
00:01:42 So you only need one codebase for all of these devices, and only one programming
language.So there's no need to have multiple skill sets for the developers, multiple
programming environments, and so on.
00:01:53 Web applications can also be made responsive, so they adapt to the size of the screen or to
other capabilities of the devices.Week 3 will have more information about this.
00:02:04 Last but not least, Web applications can even access more and more native capabilities of
devices like the camera or GPS position.What is SAPUI5, and how does it help you to
develop Web applications?
00:02:21 The name stands for SAP UI Development Toolkit for HTML5.It is a client-side JavaScript
library for creating Web user interfaces, so it all runs inside the browser using JavaScript
code.
00:02:35 The most important features of SAPUI5 are as follows.The controls – there is a huge set of
about 500 controls ranging from tiny things like buttons or input fields
00:02:48 to complex controls like tables or even 3D visualization controls.The next important set of
features is a very consistent user experience.
00:02:59 There is a common design language programmed into these controls, and a common user
interaction concept.So your application can profit from all this power that has gone into our
controls.
00:03:13 To help you develop your applications, there are lots of powerful development concepts, like
model view controller support, data binding, routing, HTML templating, and much more.

00:03:23 So this helps you to develop, structure, and maintain your applications.Because SAPUI5 is
used for many SAP applications, it also needs to be enterprise- ready.

1
00:03:35 This means it needs to be very robust, well tested, there is support for internationalization,
translation, right-to-left languages like Hebrew or Arabic, extensibility, security, accessibility,
and much more besides.
00:03:51 Finally, as I've already mentioned, it's responsive, so it adapts the screen size and the
interaction type of the user.From the very beginning, SAPUI5 had the guideline to not
reinvent the wheel.
00:04:08 So we try to use open standards and open- source libraries wherever possible and
reasonable.For example, SAPUI5 is based largely on HTML5, CSS3, AJAX, ARIA, and
more open standards.
00:04:23 And we use lots of open-source libraries, like jQuery – the famous DOM manipulation library
is the foundation of SAPUI5.Other examples are LESS, the CSS preprocessor, datajs for
OData support, or D3 for graph visualization.
00:04:41 And many more – we use dozens of libraries.All of these libraries and contained in SAPUI5,
and we update them whenever they have a significant update.
00:04:50 So you just get the latest features from them when you update UI5.Of course, you can add
more libraries if you need additional functionality that is not contained in SAPUI5.
00:05:06 The main building blocks of UI5 are the core, which is all the non-UI5 functionality, so the
model view controller support, data binding, translation, loading modules, and so on.
00:05:22 Then there's the OpenUI5 delivery package, which is the open-source version of UI5.It
contains the entire core, so it's the same code, plus all the themes – the visual designs –
00:05:34 and many control libraries with about 250 controls.Finally, there's the SAPUI5 package
which adds even more control libraries,
00:05:46 some of which are SAP-specific or specific to SAP tools or services.So what are the
differences between SAPUI5 and this OpenUI5 package?
00:06:02 One difference – maybe the most important one – is the license.SAPUI5 is not sold as a
separate product, but is available as part of other SAP products and platforms
00:06:12 like NetWeaver ABAP, NetWeaver Java Server, HANA Cloud Platform, and so on.And
when you have an SAP license for these products, SAPUI5 is also free to use.
00:06:24 OpenUI5, on the other hand, can be used for free on commercial projects without paying
anything because it comes under the open-source license Apache 2.0.
00:06:35 So you can just get it for free and download it.Just go to openui5.org, download your copy of
OpenUI5, and you are ready to start.
00:06:44 As I said, SAPUI5 is already shipped with several other SAP products.But both SAPUI5 and
OpenUI5 can also be used without even downloading from our content delivery network.

00:06:57 That's powered by Akamai, who host thousands of servers around the world, and it can be
used live from the closest data center in your applications.
00:07:09 SAPUI5 is released to customers after sufficient testing.So there are several weeks of
testing after we finish the coding of a release, and then it's finally released to customers.
00:07:19 For OpenUI5, on the other hand, we offer preview releases, so even before the release is
done, you can download it to try it out, give early feedback, do early testing, and so on.
00:07:32 As it's open source, OpenUI5 is developed at GitHub, so you see every code change we
make just a second after we make it.So you can follow the development very closely, but
you can also even contribute code to OpenUI5.
00:07:48 While you cannot do this for SAPUI5, the codebase is the same, so every contribution to
OpenUI5 also becomes part of SAPUI5.If you encounter an issue, there are different ways
to report such issues.
00:08:01 For SAPUI5, there's the SAP support – Service Marketplace – where you can report the
issues, and, as a customer, you have a certain service level agreement from SAP to get
these issues fixed.
00:08:13 For OpenUI5, there's the GibHub issue reports functionality, where you can also report
issues.There's no guarantee because it's free, it's open source, but the issues will be fixed
nevertheless,
00:08:26 and wherever the fix is done, it's part of the common codebase, so both sides profit from all
these bug fixes.If you want to discuss questions about UI5, SAP offers the SAP Community
Network, SCN,
00:08:43 where there is a forum with two or three thousand posts per month, so it's very
popular.Open-source people, OpenUI5 users, might use StackOverflow or the OpenUI5
Slack channel.
00:08:58 They might prefer that one, but people from both sides discuss in both places so it's not
specific to one of our releases.While we have talked a lot about the differences between
SAPUI5 and OpenUI5, this course covers both,
00:09:14 so it's the same code, and all the functionality we are talking about is in OpenUI5 and
SAPUI5.This also means that we will often just say "UI5" and mean both of them because
it's the same code.
00:09:29 But enough talking – let's get to a demo.Let me go to the HANA Cloud Cockpit to start the
Web IDE.
00:09:42 Of course, you could use other editors, but we are using Web IDE throughout this course.In
the HANA Cloud Cockpit, you have a Services
00:09:54 where you find all kinds of services, and you can filter for "web", then you will find your Web
IDE.Click Open SAP Web IDE, and the Web IDE will open.
00:10:18 Now we start with a blank workspace. We create a new folder here called My App.Inside
this folder we create another one called webapp, which is a very popular convention.
00:10:39 And inside we will create an index.html file.That's what the browser will load to start the
application.
00:10:49 UI5 applications are single-page applications, meaning that they usually remain on one
HTML page, and even when the content is exchanged, this happens inside this document
without loading another page from the server.
00:11:03 So to write this index.html page, I have prepared a code snippet here.This is just a plain
HTML page, so it starts with the HTML5 doctype,
00:11:19 at the head, we have a meta tag to make Internet Explorer load the newest version of its
rendering engine, give the character set, that's UTF-8, a title for the page,
00:11:30 and finally we have the body, where we just have some static text "Hello World".Let me
save this, and run it.
00:11:42 And we see the "Hello World" text here. Okay, that's not UI5 yet, so let's go one step
further.I'll copy some more code.
00:12:08 Okay, what have I done now? First, we load UI5, so this script tag has a certain ID, which is
mandatory.
00:12:16 Then we load sap-ui-core.js, which is the UI5 core from a server called
sapui5.hana.ondemand.com.That's the content delivery network I mentioned.
00:12:27 So it's already available in the cloud and you can directly download UI5 from there without
installing it.Then we configure a theme called sap_bluecrystal.
00:12:38 We say which control libraries we want to use, that's the sap.m library.We say that UI5
should use the newest version of its APIs,
00:12:50 and we configure these control libraries to be loaded asynchronously.After this script tag,
UI5 is loaded and ready to be used.
00:12:58 As I said, the libraries are loaded asynchronously, you have to register to the core attachInit
event, which is the event handler, and then inside "UI5 is ready".
00:13:11 So this sap.ui.getCore gets access to the singleton of the UI5 core, and then it fires the init
event which we attach to.So once all the control libraries that have been requested are
loaded, this alert box "SAPUI5 is ready" will pop up.
00:13:27 Okay, let's try it. Run it.There it is: "SAPUI5 is ready".
00:13:34 So this means we have now loaded SAPUI5. We would be ready to start the application, but
that's something for the next units.So we have arrived at the end of this unit.
00:13:49 We have learned the basics about what SAPUI5 is and how you can load it in a Web
application.In the next unit, my colleague Thilo will show you how you can create your user
interface using SAPUI5 controls.
00:14:01 Thanks for your attention.
Week 1 Unit 2

00:00:10 Hello and welcome to Week 1, Unit 2 of our openSAP course "Developing Web Apps with
SAPUI5".My name is Thilo and I am an SAPUI5 developer.
00:00:20 Today we want to learn how we can build up the user interface using SAPUI5
controls.Additionally, we will learn something about the usage of a special control called
View to structure the content.
00:00:34 In UI5, controls span from simple UI elements showing texts or images up to complex UI
widgets called composite controls that consist of several individual controls and build
complete interaction patterns.
00:00:47 An example of this is the list.On a high level, it can be said that each control has
configuration options
00:00:54 and a specific renderer that will build up the DOM structure for this control.In addition, the
UI5 runtime will hold reference to all instantiated controls and organize these internally in a
"control tree".
00:01:09 But before we get a feeling for how to work with controls, let me briefly explain to you how
libraries are used in UI5.These libraries are organized semantically, and only specific
combinations are encouraged.
00:01:25 If you have to support mobile scenarios as well, we advise you to take the libs from the left
side as these were developed to work with mobile devices as well as on desktops.
00:01:36 The libs on the right side were designed for desktop-only scenarios.That's why we will
concentrate in this course on development with sap.m and other libraries from the left side.
00:01:50 The best tool for understanding how to work with individual controls is the Explored
application, which has already been introduced.Here you can find technical information on
how to use and configure controls, code examples, and you get a feel for how they look and
work.
00:02:11 Let's start with an image as a simple example.I can simply search for it up here...
00:02:19 and open the image.Now let's have a look at the control configuration and usage from a
developer's perspective.
00:02:30 Each control has different configuration options.These are properties, events, aggregations,
and associations.
00:02:39 For the current example, we see that the image has 12 properties.Of course, I don't want to
explain them all – I simply want to get you started with control usage.
00:02:51 It mainly follows the same principle.You pick the properties you want to set, for example, to
explain an image we need an image source, and maybe width and height,
00:03:01 and hand it over as values to the control constructor.So let's do this in the code.
00:03:11 From the previous lesson, we have a simple bootstrap for the SAPUI5 core, and in the init
callback, we will add a new control.
00:03:23 So here we create a new variable, let's call it "oImage", and we say we want to instantiate a
new sap.m.Image and add a new configuration object to it.
00:03:40 If you instantiate controls from specific libraries, you always use the library namespace as a
prefix followed by the name of the control.We will now set a source for this control, and we
can use an image from the Internet.
00:03:58 I prepared a nice globe here, so let's copy the URL and paste it into the constructor.Now we
will chain the placeAt function.
00:04:12 Every control comes with a placeAt function, which expects the ID of a DOM element that
already exists.Down here, we see that our body has the ID "content", so we use that one.
00:04:30 If we now run this, we see that our image is displayed, but it's actually too big for our use
case.
00:04:38 So let's go back to the code and use the height property here.UI5 controls have
autogenerated getters and setters for all your control properties.
00:04:52 So now we can get our variable and set the height in the coding.We specify this with 400
pixels,
00:05:06 and rerun it.Something went wrong. Let's have a look. oImage. setHeight.
00:05:30 I think it's like that. Let's try it again.And there we go. If you do it right, it works, and the
image is displayed in a nice size now.
00:05:40 As programming applications, it's not about scattering your UI elements across the screen,
but to orchestrate them, we need containers.There are some of them in SAPUI5, and one
kind in particular that I want to introduce now.
00:05:53 There it is: the sap.ui.core.mvc.View.In SAPUI5, you can choose between different types,
ranging from JavaScript views, across HTML and XML views, up to JSON views.
00:06:07 It has become good practice in app development in SAPUI5 to use descriptive XML views
and to enforce the MVC pattern.We will learn more about that in the upcoming lessons.
00:06:20 We now want to create our first view and translate the existing Image control into XML.For
that, we will remove the image for now.
00:06:36 Simply comment that out and create a new view.We can use the view factory function here.

00:06:51 And the same for all the other controls – we add an object for the configuration here.We
have to define a viewName, and now we want to introduce the namespace for our
applications.
00:07:10 We specify this as "opensap.myapp" as a namespace, the views always live in the view
folder, and we call this one "App".Finally, we have to chain the placeAt function to it, and as
with the image, it goes to the content DOM element.
00:07:33 With this namespace, we need to make this familiar to the UI5 runtime.For that, we add a
new configuration property to the bootstrap.
00:07:46 It goes with data-sap-ui-resourceroots.And here, we define the new namespace,
00:08:05 and assign it to the root that our index file lies Now, with that set, we still have to create a
view file.
00:08:19 For this, we create a new folder in the project root and call it "view".In this folder, we create
a new file, and we call that one "app" – as it's the name for our view – ".view.xml".
00:08:42 In here, we have to use standard XML and therefore define our namespaces correctly.So
we create a new "mvc:View" and the closing tag is generated automatically.
00:08:58 Now let's create the namespaces.We first add the setting "displayBlock" to it
00:09:08 and set this as "true".This is to display it nicely, so let's not worry about that. Let's continue
to define our namespaces.
00:09:18 We have the namespace for the MVC tag in front of our view, xmlns is
"sap.ui.core.mvc".And we define – of course, we need the "mvc" here – and we define the
default namespace, which is ="sap.m"
00:09:50 because we will use the controls from the sap.m library within our view.Now let's switch
back to the index file and see what we had for the Image control.
00:10:00 We created the Image control with the "source" attribute, and we will copy that over and
now create the image in XML.We create a new tag "Image". As we have a default
namespace, we don't need the library prefix here. We add the "source" property.
00:10:21 Simply copy that over. We also had the height defined, and we do that here as well: 400
pixels. Close the tag.And look back to see if we did everything right.
00:10:40 It looks good, the view gets created, it gets placed, and within the view... something
here."end tag name not found for: mvc:View"
00:10:52 What's wrong here? Ah, we missed the "=" sign.
00:11:12 Now no complaints any more. Let's hope it works.Something wrong in the bootstrap. Let's
look that one up.
00:11:37 Ah, we need an object here.All right, let's run this.
00:11:47 And there we go again. It works.Now let's get a little more familiar with how to work with
controls in the XML view and introduce the aggregations.
00:12:03 For that, we will look up the carousel in our Explored application.The carousel has an
aggregation – we see this here on the tab – which is called "pages".
00:12:17 The pages aggregation expects 0 to n child controls and is of the Control type.So now let's
try to add the Carousel control to our view and place images within the carousel.
00:12:36 For that, we go back to the view. We can keep the image here, but create a new Carousel
tag.The Carousel tag – as I said – has the aggregation pages, so we add a lowercase tag
for "pages" and copy the image into it.
00:12:56 Of course, it's "pages" and not "page", so don't make this mistake.Finally, as we might want
to show more than one image here, let's add two images to it.
00:13:11 And now, run it, and we see we have an image in a carousel, and we can swap back and
forth between the two images.
00:13:25 And all this with just a bit of XML and by the use of Views.That's it, that concludes today's
unit about the usage of controls.
00:13:38 We have learned that we can use controls to populate our screen and directly benefit from
the defined control design and functionality it provides.
00:13:47 Thank you.
Week 1 Unit 3

00:00:09 Hello, my name is Michael.Welcome to Week 1, Unit 3 of our openSAP course "Developing
Web Apps with SAPUI5".
00:00:17 This unit is called "Structuring with Controllers and Modules".So far, we have created a very
simple SAPUI5 app with an XML view that showed a carousel.
00:00:30 So let's take a look at our application project.Here you can see the app running, so it's just a
carousel with two images and nothing else.
00:00:40 In this unit, you will see how to implement this interaction in a controller by adding a button
to the view and how to structure modules in SAPUI5.
00:00:49 So let's get started with the code.We open our view, and somewhere here is where we want
to add our button control.
00:01:00 But before we do that, let's take a quick look at the Explored app to see what the API for the
button is like.So I'm just going to the Explored application on the SAPUI5 cloud
documentation,
00:01:15 where I'm filtering for "button".This is the control that we want to use.
00:01:26 Let's quickly see what this looks like.It's just a simple button that I can press, and maybe I
also want to use this interaction here so it displays a message on the screen.
00:01:37 But more on that later.Let's take a look at the API.
00:01:42 In Properties, I see that it can have an icon, for example, and a text.I'm just going for a very
simple text property here.
00:01:52 And I want to make use of events, so if I press the button, I want to attach a function that is
executed.This should be enough to use it in my application.
00:02:08 I'm just going to add it below the carousel here, so I just type "Button" as the control
name.The text is "Say Hello".
00:02:20 And as the press handler, I register a function called "onShowHello".And the closing tag,
either directly or I can just close it directly, too.
00:02:36 The function "onShowHello", or the "press handler", is a callback that will be added to the
view controller.Let's check the application again.
00:02:46 Here, down below the carousel, we now have a button.We could even improve the carousel
to not be as big as right now, but for now I'll just scroll down.
00:02:57 Okay, we said we want to add the logic to be executed when I press the button to the
controller.So let's go back to our presentation for a second and take a look at the model
view controller concept.
00:03:11 In SAPUI5, we use the model view controller concept to realize this.And you can see this
here.
00:03:19 The view contains the UI of the app and now defines the controller when events are
triggered.Then controllers take action and update the view, either directly as we do in this
lecture,
00:03:32 or indirectly by updating the model, which we will do later this week.Now we will create the
controller, so let's switch back to our code.
00:03:44 And by our best practices, all the views are in the "view" folder, and we create a new folder
called "controller", where all the controller artifacts are located.
00:03:56 In this new folder, we create a file with the same name as the application view.So I call it
"App.controller.js" because controllers are actually written in JavaScript.
00:04:16 This will then hold the event handler for our button, but before we start with that, let's just
define the module for the controller.
00:04:27 The controller – like everything else in SAPUI5 – is a module, and all the modules are
defined with the following syntax.
00:04:35 So I type in "sap.ui.define", and the first argument is always an array, and the second one is
a function.So this is our scaffolding for the module definition,
00:04:54 and it's the so-called AMD – asynchronous module definition.That means that all the
dependencies that we need in this module should be loaded before the actual module code
is executed.
00:05:09 Let's just take a look at the concept before we actually do it.So for performance reasons and
to not block the browsers,
00:05:19 any dependencies should be loaded asynchronously in the beginning before the module
code is executed.The modules can be defined as an array of the sap.ui.define function,
00:05:30 and whatever you pass in here is then passed to the callback function, which is the second
argument of this defined syntax.And then at runtime, instead of this synchronous execution
that you can see here on the upper part,
00:05:44 where the user interface is actually blocked until the resources are loaded, you would load it
before the module is executed, and then if everything is in place, the callback function is
executed.
00:06:03 So how do we do this in the code? We will load a dependency here...
00:06:10 and everything that we define as a module usually inherits from a base class, so we inherit
from "sap/ui/core/mvc/Controller".
00:06:23 And I give it the same name here as a function argument.And this is used to define our
custom controller in the application, it just inherits from the SAP- based controller.
00:06:38 And then I will extend from this object, so I call "Controller.extend".And I give it the
namespace that I defined the application with, so in our case, it's "opensap.myapp".
00:06:54 Then the name of the folder, "controller", and the name of the artifact, which is "App".And
then I extend it with a custom object which I pass in here as the second argument.
00:07:08 And in here, I can put any functionality that I want to do in my controller file.So extension is
a very important concept in SAPUI5,
00:07:19 and every artifact that you will see in this course extends from one of the base classes in
the sap/ui/core namespace.It means that our controller will inherit base functionality and is
ready to use in our application.
00:07:35 Now we can add our press handler to the controller object.So I said it's named
onShowHello, now we just define the key here as I did in the view,
00:07:47 and we just do this callback function here that will be executed when the button is
pressed.There's still a syntax error here, so let me just quickly fix that before we continue.
00:08:02 Usually, we indent it like this.And... okay, there's no dot here, it should be a comma. And
then also we can see it.
00:08:15 You can see this ESLint highlighting here in SAP Web IDE is also pretty handy for error
notices.Okay, we said that we want to do something in our onShowHello function –
00:08:26 we want to display this message toast that we saw in the button example.And if I search for
"message toast" here...
00:08:40 then I can...oh, it's loading still...
00:08:51 then I can just try it out.And it's pretty much what we want to do here, so it displays a
message and the API is quite straightforward, too.
00:09:00 It's actually a special control that just has one method called "show".And, of course, we also
needed to load it as a dependency because it's another control that we want to use.
00:09:14 So I put the second dependency here in my define statement, and this time, it's from the
sap.m namespace,
00:09:24 as we can see here in Explored, so the namespace is always listed here.And it's the same
for the controller – here I just put "MessageToast" as a variable name.
00:09:39 And then I can say "MessageToast.show", and give it a text, for example, "Hello openSAP!"

00:09:54 There we go.So that should do it.

00:09:58 If you think that this syntax of defining modules is a bit hard to remember, don't worry.What
looks a bit complicated at first will appear over and over in many files that we create
throughout this course.
00:10:09 It's a great mechanism that helps you structure your app project.Modules such as our
controller encapsulate functionality, and by having the controller file written in JavaScript
and the view in XML
00:10:22 we have a very clear separation of the UI and the controller logic.Let's go back to our
presentation for a second because there's one more thing about controllers that I want to
show you,
00:10:34 and this is the controller lifecycle hooks.You don't really need it right now in our application
project, but it's good to know that controllers can actually have
00:10:44 certain lifecycle events that are called by the SAPUI5 core when the right point in time is
matched.So the onInit event is called when a view is instantiated and its controls have
already been created.
00:10:58 It can be used to bind event handlers and to do other one-time initialization at the beginning
of the application workflow.In contrast to that, the onExit method is called when the view is
being destroyed,
00:11:11 and there you can free resources and clear up events, animations, or any kinds of callback
that you have registered inside the controller.Right, enough of the theory. Let's go back to
the application project and run the application again.
00:11:30 If we now click the button, we see that nothing is still happening, and this is because the
view has not been connected to our controller yet.So this is the link that we still have to
establish here.
00:11:44 And it's done by defining a reference here in the root tag, in the "view" tag.And we write
"controllerName" as an attribute,
00:11:55 and the argument we can just copy from the controller file, and it's the same one that we
defined here in our extend statement.
00:12:05 So if I put this one here now and save my file again, we should actually see our message,
and you can see it here, just above the image, saying "Hello openSAP!"
00:12:23 So thank you, that's really everything for this lecture.In this unit, you have seen how to
create view controllers and how to define modules.
00:12:32 We have loaded a dependency and instantiated a control directly in the controller.In the next
unit, Janina will show you how to use models in SAPUI5 to make our MVC pattern
complete,
00:12:46 because – as you might have spotted already – we have only talked about views and
controllers so far, and not about models.So thank you, and see you next time.
Week 1 Unit 4

00:00:10 Hello and welcome to Week 1, "Learn the Essentials" of the openSAP course "Developing
Web Apps with SAPUI5".My name is Janina, and in this unit 4 called "Creating a
Configurable App Component",
00:00:22 we will encapsulate all UI assets in a "component", and we will also introduce the app
descriptor.But before we do this, let's have a look at a typical SAP Fiori app which, for
example, runs in an SAP Fiori launchpad (FLP),
00:00:38 which you can see here on the slide.What you see here is the SAP Fiori launchpad, which is
a shell that hosts SAP Fiori apps.
00:00:47 The SAP Fiori launchpad is one entry point to SAP Fiori apps and acts as a "component
container", which manages and loads the apps by loading the corresponding component of
the app.
00:00:59 Another possibility is to run your app standalone.If you want to do this, you need to create
an index.html file, where you instantiate the component within a component container.
00:01:10 Okay, but what are components? Components are independent and reusable parts used in
SAPUI5 applications.
00:01:18 Whenever we access resources, we will do this relatively to the component now, instead of
relatively to the index.html.This architectural change allows our app to be used in a more
flexible environment than our static index.html page.
00:01:38 Oops, sorry.Okay, let's first create an initial Component.js file in the webapp folder that will
hold our application setup.
00:01:54 Be careful with the name – it has to start with an uppercase letter.To avoid typos, I just copy
the text, but don't worry, you'll have the text later in the handout, so you don't have to
remember it.
00:02:13 Okay.In the init function here of the component, we automatically instantiate the component.

00:02:22 As we have overwritten it, we have to call the init function of the parent, which we do
here.From the base class, our component inherits the sap.ui.core component, which is done
here,
00:02:34 and because of this, it's obligatory to make this call to the parent when we overwrite the init
function.And usually, you will do additional initialization in this line here.
00:02:47 Our Component.js file now consists of two parts: We have this metadata section here, which
references the app descriptor which we still have to implement,
00:02:58 and also the previously introduced init function that is called when the component is
initialized.This is done automatically by UI5.
00:03:08 Instead of displaying the root view directly in the index.html file as we did previously, the
component will now manage the display of the app view.
00:03:19 To do this, we have to go to the index.html file and copy this, and here, instead of
referencing the app view,
00:03:35 we now create a component container, and inside this component container, we reference
the Component.js.
00:03:46 So the component then automatically loads the root view.We still have to define the root
view in the manifest.json, which we still have to create.
00:03:57 The component container automatically searches for a file called Component.js in the
namespace we just gave here within the name.
00:04:07 This is why we had to create the Component.js directly inside the webapp folder.Okay, all
application-specific configuration settings will now be put in a separate app descriptor file
called manifest.json.
00:04:21 To help you better understand this, let's go back to the slides.As you can see here, your app
usually consists of several files.
00:04:29 So we have the Component.js here in the middle, we have the manifest.json, which we still
have to create,
00:04:36 and on the left side, which is the UI of our app, we have the root view – in our case, it's the
app view.The app descriptor clearly separates the application coding from the configuration
settings and makes our app even more flexible.
00:04:53 For example, all SAP Fiori applications are realized as components and come with an app
descriptor file in order to be hosted in the SAP Fiori launchpad.
00:05:02 The FLP and other external components then take information out of this file.For example,
the FLP just takes the app title and description before loading the app to display this
information on the tile.
00:05:15 Later in this course, in Week 3, we will also use an SAP Fiori launchpad for our
application.So let's now define the app descriptor within a file called manifest.json.
00:05:32 This also has to be done directly under the webapp folder, so this starts with lowercase.And
we just have to copy several things.
00:05:51 You can switch here between Descriptor Editor and Code Editor.Because there was no
code, the descriptor editor was not working,
00:05:59 So this is the descriptor editor, where you can switch between the different tabs, but I will
explain everything to you in the code editor.The content of the manifest.json file is a
configuration object in JSON format
00:06:15 that contains all global application settings and parameters.The manifest file is called the
descriptor for applications, components, and libraries
00:06:23 and is also often referred to as "descriptor" or "app descriptor" when used for
applications.As I said, it is stored in the webapp folder and is read by SAPUI5 to instantiate
the component that we already created.
00:06:38 Right now, three important sections are defined by namespaces in the manifest.json file:
sap.app, which is here,
00:06:46 sap.ui, and sap.ui5.
00:06:50 I will briefly explain some of the settings, but not everything.The sap.app namespace, which
is this part here, contains the title and description for the FLP, which is this part.
00:07:05 This is then the title and description that is displayed at the FLP tile.We will have a closer
look at this part in the next unit.
00:07:16 The sap.ui section contains the device types you support in your app, so this is this part.In
our case, we want to run the app on a desktop, tablet, and phone,
00:07:29 and right now, we only have one supported theme, which is SAP Blue Crystal, which is the
default theme of UI5 right now.The biggest part is the sap.ui5 namespace.
00:07:42 This adds UI5-specific configuration parameters that are automatically processed by
SAPUI5.Within the rootView we specify the root view which will be automatically instantiated
by the component when it is loaded.
00:07:57 We also define our dependencies here, and we can define models that will be automatically
instantiated by SAPUI5 when the app starts, but no models are available yet, so this will be
done in the next unit.
00:08:13 If we now call the index.html – if we run our app – it will still look the same, but it will be
packaged into a UI component.So if we run it now – I hope I saved everything –
00:08:27 it still looks the same as before: we have a carousel with a button here.But if we have a look
at the developer tools and go to the Elements –
00:08:38 I'll make this a little bit bigger so that you can see everything – you can see here that we
now have a sapUiComponentContainer surrounding our application.
00:08:53 Inside the sapUiComponentContainer, we then have a component.Inside our component,
we then have the XML view, and inside our XML view, the carousel.
00:09:05 So it's pretty much the same structure – just two surrounding divs more.Okay, let's have a
look at what really happens when you now start your app
00:09:17 because there's a lot of stuff going on that you might not be aware of.Therefore, we just go
to the Demo Kit because there's a really nice overview.
00:09:27 So if we go to Demo Kit and then navigate to Developing Apps and App Initialization, you
can see here what really happens when an app is started.
00:09:42 When the user starts the app, the component container loads the component of the app,
which is sometimes the FLP, or in our case, it's the index.html and there inside the
component container.
00:09:55 Then the component loads the app descriptor, which is the manifest.json file.Then the
models are created, but we still don't have any models.
00:10:05 Then the init function of the Component.js is created.Then you have to implement the init
function call of the parent.
00:10:14 Then we will create the router and the root view.We don't have a router right now, but we
have the root view.
00:10:22 Then the root view creates the root control and everything goes further on, so there's a lot of
stuff.And if we have a look at it in the debugger – so we go back to our application and we
go to Sources,
00:10:35 with Ctrl + O we open the index.html file, we scroll down to the attachInit, we set a
breakpoint here, and then we reload our application –
00:10:56 we now see here that the component container has been created, and let's just add another
breakpoint, so with Ctrl + O we search for the Component.js... Where is it?
00:11:14 Oh, I don't think it's there yet. So just continue until everything is loaded and we open the
Component.js.We set a breakpoint here within the init, and now we reload the application
again.
00:11:29 So now we first stop in the index.html file, where the component container is created.And if
we now continue, you see that the component is now instantiated, so the init function is
called.
00:11:44 Now the UI component init function is called and everything is loaded, so that's what goes
on.Okay, so that's all for today.
00:11:54 We implemented a component and an app descriptor, and we used both in our app.In the
next unit, we will look at data models and internationalization, and how this can be done in
our app.
Week 1 Unit 5

00:00:10 Hello and welcome to Week 1 "Learn the Essentials" of the openSAP course "Developing
Web Apps with SAPUI5".My name is Janina, and in today’s Unit 5 called "Managing Data
Models and Internationalization",
00:00:23 we will talk about the "m" in MVC.What we will implement within our app is an input field that
binds its value to the model, and we will also prepare for internationalization,
00:00:34 which means that we will move the texts of our UI to a separate resource file, so everything
is in a central place and can be easily translated.
00:00:43 Therefore, we will use a special UI5 model, called resource model.But before we start with
the coding, let's have a look at the MVC pattern again.
00:00:54 The model manages the application data.SAPUI5 uses data binding to bind two data
sources together to keep them in sync.
00:01:05 This means that all changes in one source are also reflected in the other one.For data
binding, you need a model and a binding instance.
00:01:15 The model instance holds the data and provides methods to set the data or to retrieve the
data from a server.It also provides a method for creating bindings to the data.
00:01:25 When this method is called, a binding instance is created, which contains the binding
information and provides an event, which is fired whenever the bound data changes.
00:01:35 An element can listen to this event and update its visualization according to the new
data.The UI uses data binding to bind controls to the model which holds the application data

00:01:49 so that the controls are updated automatically whenever application data changes.This is
called one-way binding.
00:01:56 The data binding is also used the other way round when changes in the control cause
updates in the underlying application data, for example, data entered by the user.
00:02:06 This is called two-way binding.Okay, let's use this now in our app.
00:02:11 What we again want to implement is an input field to bind it to data within a model, and we
also have to define and show the user input within the label next to it.
00:02:22 To achieve this, we will add a JSON model as a container for the data on which our
application operates.JSON is the abbreviation for Java Script Object Notation,
00:02:33 which is an open standard format where the data objects consists of attribute-value
pairs.The JSON model has a simple binding path syntax because it consists of named
objects, such as properties, arrays, or nested objects.
00:02:49 The example you can see here on the slide shows a simple JSON model and the absolute
binding paths within this model.In our app, we only need one recipient which has an
additional property for the name.
00:03:02 So let's go to our app.Right now, our app looks like this: we have the carousel and the
button.
00:03:10 Next to the button, we then want to display the input field.To do this, we first have to create
the JSON model.
00:03:21 So within the webapp folder, we create a new folder called "model".And within "model", a
new file called "HelloPanel.json".
00:03:38 This is where our data goes.Whenever JSON, XML, and resource models are created, the
data they contain is loaded in a single request,
00:03:47 either from a file stored locally on the client – like we have it here – or by requesting it from
a Web server.In other words, after the model's data has been requested, the entire model is
known to the application.
00:04:00 These models are known as client-side models, and tasks such as filtering and sorting are
performed locally on the client.An OData model, however, is a server-side model, but we
will come to this topic in a later unit.
00:04:13 So let's now define the model.First we just have to put some data here, and don't worry,
you'll find all the coding within the handout later.
00:04:26 As I said, we have only one recipient with a name.Now we add a new model to the SAPUI5
section within the app descriptor.
00:04:38 So let's go to the manifest.json, switch to the code editor, and go to the end.Here, right
before "contentDensities", we copy this part.
00:05:01 We want a JSON model, so we set the type to sap.ui.model.json.JSONModel.The URI key
is the path to our test data relative to the component.
00:05:15 With this little configuration, our component will automatically instantiate a new JSON
model, which loads the helloPanel data from the HelloPanel.json file.
00:05:25 Finally, the instantiated JSON model is put onto the component as a named model
helloPanel because we put the name here.
00:05:34 The named model is visible throughout our app and can be used as needed.Just to let you
know: you can also have one unnamed model, but as many named models as you like in
your app.
00:05:47 Now let’s add an input field to our view where the user can enter a recipient.To check the
available properties for the input, we just go to the API, so we just go to the Demo
00:06:02 switch to API Reference and search for "input", and we select sap.m > Input, and then we
scroll down.
00:06:15 Here you can see there are lot of properties available, but in our case, we don't need all the
properties.So let's go back.
00:06:26 We only want to bind the value of the input to our JSON model by using the declarative
binding syntax for XML views.So we go to our App view.xml and we want to add an input.
00:06:42 And as we want to have it displayed after the button, we just add it here after the
button.Okay.
00:06:54 So we bind the description, which is here, to the same value.And also set the
valueLiveUpdate to "true" and the width to "60%",
00:07:05 so the value and the description are now bound to the same property in the JSON
model.The curly brackets enclosing a binding path are automatically interpreted as a
binding.
00:07:16 These binding instances are called property bindings.In this case, the control's value
property is bound to the recipient name property at the root of our named model which is
stated first,
00:07:27 and the slash (/) at the beginning of the binding path denotes an absolute binding path as
you saw on this slide.The description uses what's known as a complex binding syntax as it
is a combination of text and data binding.
00:07:42 So here we have "Hello", which is the text, and then the binding path.To enable complex
binding syntax, we have to enable it in our app,
00:07:53 which can be done in the index.html with the parameter data-sap-ui-
compatVersion="edge".It's already set in our app, but if you wanted to use it in your app and
this is not set, the complex binding syntax wouldn't work.
00:08:16 And if we now run our app, I hope we see an input.Here we see the input – we have World
and Hello World – and if we go back to our HelloPanel.json data,
00:08:32 we see the name is "World" so this is what we have bound to the input.Here we have "Hello
World", which is "Hello" plus the binding.
00:08:46 When you change something in the input field, you see that it's automatically changed here
in the label next to the input field because they are bound to the same property and
because valueLiveUpdate is enabled on the input field.
00:09:03 Again, the concept we are using here is two-way binding.In the next step, we will prepare for
internationalization.
00:09:12 SAPUI5 offers a lot for this out of the box.The texts within controls from UI5 will be
automatically translated.
00:09:20 But if you have additional texts within your UI, SAPUI5 offers an easy way to handle them
via what is known as the resource model.The implementation we just did was overly
simplistic as we stored language-specific text directly in a JSON model object.
00:09:40 Generally speaking, unless language-specific text is derived directly from a back-end
system, it is not considered good programming practice to place translatable texts directly
into a model.
00:09:53 So let's correct this situation by placing all translatable texts, such as field labels, into a
resource bundle, which you can see here on the right side.
00:10:02 For each language your app supports, you should have a corresponding i18n file.During
runtime, SAPUI5 tries to load the correct i18n_*.properties file based on your browser
settings and your locale.
00:10:19 If there is a corresponding i18n file, this is taken, otherwise the default – which you can see
here, the last one – is taken.Now we have to move all our texts which we want to translate
automatically into a separate file called "i18n.properties".
00:10:39 So we go back to the Web IDE and under webapp we create a new folder called "i18n",
00:10:51 and within this one, we create a new file called "i18n.properties", which is the default one
and will be used if there's no language-specific
00:11:04 Within this file, we have to put the text as name- value pairs, so let's do this.So we take the
text of the panel... and we copy it here.
00:11:23 If you would like to have a parameter within the text, as we have it here for the Hello
message, you have to put a number inside curly brackets, and usually it starts with "0" so
you could also have several parameters.
00:11:38 You should never concatenate strings that are translated – always use placeholders.We
now have our first text within this file.
00:11:48 But we only created the default i18n file, which will be used as a fallback if you do not
provide the specific language file.In your real application, you would need to provide another
i18n file for each language you support.
00:12:03 For example, for English i18n_en.properties and so on.But keep in mind that you should do
as much translation within the back end as possible to minimize the translation within the
i18n files.
00:12:19 Now we want to use the i18n file we just created.Therefore, we have to define the resource
model within the manifest.json and state the bundle name where the i18n file can be found.

00:12:32 So we go to the manifest.json, and right here, within the model section, we put the i18n
model, the resource model.
00:12:46 So the manifest.json, and we copy it here, and we save it.Our file only consists of the
application namespace,
00:13:02 and the type, so it's in ResourceModel, and then we just state where the bundle can be
found, so it's within our namespace and then within the i18n folder.
00:13:14 The SAPUI5 runtime calculates the correct path to the resource; in our case, this is the path
to our i18n.properties file.We also have to write one more line within the manifest.json.

00:13:33 This has to go at the top, under sap.app.So we just have to state that this is what our file is
called.
00:13:45 Next, we also have to use the model instance.We want to use the text from this file, so we
just go within the app controller, copy this part,
00:14:00 and within the controller folder, we open the app controller.Within the onShowHello, at the
moment we only have a message saying "Hello openSAP", so we replace this one.
00:14:16 In this event handler, we now access the i18n model to get the text from the message
bundle, so here we get the message bundle.Then we say that we want to display the
recipient, so we get the data of this one.
00:14:35 Then we put it together, and this is the message we show.The getProperty method can be
called in any model and takes the data path as an argument.
00:14:45 In addition, the resource bundle has a specific getText method that takes an array of strings
as a second argument.Finally, we now use data binding to connect the button text to the
sayHelloButtonText property in the i18n model.
00:15:02 This has to be done within the App.view.xml file.So within the App.view, we replace the
button that currently says "Say Hello!", and now the text is also bound to the i18n file.
00:15:25 As a resource bundle is a flat structure, the preceding slash (/) can be omitted for the
path.So we just save the name – usually the convention is to name the i18n model "i18n" –

00:15:37 and then we just reference the text we want to If we run the app, what we should see now is
that it should look the same as before but the texts are not hard-coded any more.
00:15:51 So if we write something, it's still here, and if we click this, we get the message telling us
where our input text is displayed.Additionally, we can now add the app title and app
description to the i18n.properties file
00:16:10 which we are already using within the manifest.json to display the app title and description if
you're using an FLP tile.This is what we do now, so we go back to the i18n.properties file
00:16:26 and we copy this part.Here we have the app title and the app description, and we're using it
within the manifest,
00:16:39 so here's the description and here's the app title.So within the manifest.json, you left the
i18n file here.
00:16:48 And then you can reference the app title – you just have to put two curly brackets around
it.Okay, so that's it for this unit.
00:16:58 We'll just have a look at the application again, so this is what it looks like.Maybe something
interesting for you as well: if you open the debugger and go to the console,
00:17:11 and we just reload, and disable our breakpoints as we don't need them now, we see here
that because our browser language is English, it first tries to load the English properties file.

00:17:27 And because this isn't available, it then takes the default i18n file.Okay, so that's it for this
unit.
00:17:35 You learned about the "m" in MVC, the different binding modes, as well as
internationalization, and you used these within your app.
Week 1 Unit 6

00:00:10 Hello, my name is Martin. Welcome to Week 1, Unit 6.In this unit, I would first like to
introduce you to the UI5 container controls.
00:00:20 Next I would like to show you our UI5 icon explorer, which comes in handy when you're
looking for icons to enrich your user controls.To arrange the controls, containers can use
layouts, which will be the third topic.
00:00:34 For additional fine-tuning, UI5 provides predefined CSS margin and padding classes, which
will be our last topic in this unit.So let's start.
00:00:46 Containers in UI5 are special controls that can contain other controls or other
containers.Let's first have a look at our Explored application, where we show all available
UI5 controls,
00:00:59 including samples and API descriptions.Here you see a searchable list of the controls, so
let's find containers.
00:01:18 You can see there's quite a list of different container controls.I think the most prominent and
most often used are the page control, scroll container, of course,
00:01:30 the split container, panel, and I would say the icon tab bar.Let's have a closer look at the
icon tab bar.
00:01:42 As you can see, our Explored application provides you with information on the API, on
aggregations – that means contain controls –, events and properties, and there's also
samples.
00:02:02 Let's have a look at one of these samples.The source code also comes with it,
00:02:13 and I'd also like to show you how you can download all these samples and import them into
your Web IDE, so you can play around with the sample and get more acquainted with the
control functionality.
00:02:29 I'd like to do that quickly.So let's go back to the Web IDE and import the ZIP file, which is
here.
00:02:46 Okay, there we go.And now, we can immediately display the sample running from a Web
IDE, as you can see here.
00:03:00 And we can manipulate the source code and see what happens, which is a very nice feature
of our Explored application.Let's now have a look at the application from the last unit.

00:03:18 I'm going to run it again.So what do we have? There is a Carousel control, which is also a
container.
00:03:28 And there's a couple of controls at the bottom: we see there's a button, an input field, and a
label.So now I would like to add an icon tab bar as a container which has two tabs:
00:03:43 the first tab will contain all the controls that we already see here, and in the second tab, I
would like to add some more controls later on in this unit.
00:03:56 So let's get started.For convenience, I've already prepared the necessary code here.
00:04:07 I'm going to just copy it and I'll explain it in a second.Okay, so what did I do here?
00:04:35 First of all, I added an "App control", which serves for navigation purposes, it contains
pages, so I added a page.And this page now contains an icon tab bar,
00:04:51 which is the control that we were talking about.To structure icon tab bars, there are "icon tab
filters" – I now have two of them.
00:05:06 In the first one, I added all the controls that were in our app before, and there's also a
second icon tab filter, which is still empty. We will populate this later on, so let's see what
this looks like.
00:05:19 I'm going to run our MyApp again.Now you can see here, we have the two tabs.
00:05:31 In the first one, which we called Getting Started, as you can see there's all the controls we
had before.And there's a second, empty tab.
00:05:43 All right, so let's populate this second tab now.First I would like to add a "message strip"
here,
00:05:55 then a toolbar, and then there'll be two buttons in the toolbar.So let's do that now.
00:06:08 First comes what is known as a "message strip", which is a control for displaying information
messages.And next in line will be a toolbar... which is still empty.
00:06:43 And into this toolbar we will add two buttons.So... okay.
00:07:03 As you can see, the toolbar contains a "toolbar spacer".We use this because we want our
buttons right- aligned, so the spacer fills all the available space and pushes everything to
the right.
00:07:16 So let's see what the outcome of our operation is, and let's refresh our application.Oh,
maybe I should save – it always helps.
00:07:38 Okay, this is better.Here you see there are two buttons which are right-aligned, and here is
a message strip
00:07:50 with a detailed text that you can choose to describe what you are doing on some kind of
panel.In the next step, I would like to introduce you to our Icon Explorer.
00:08:14 This is a collection of searchable and categorized icons.So let's have a look at the Explorer.

00:08:44 As you can see, there are all kinds of categories that may come in handy for your
application.For example, if we search for something called "save", there is a Save icon.
00:09:00 It's also worth mentioning here that these icons you see here come from icon fonts, so they
scale nicely and smoothly into all kinds of sizes.
00:09:15 I'd like to present this to you.So I'm going to just add a simple icon into our app view.
00:09:50 Okay, we need a namespace for the core namespace for this to work, so I'm going to
quickly add this to the header.Okay, so now we should be able to see an icon here.
00:10:19 As you can see, it's still really tiny, so now let's make it really big so we can see how
smoothly it scales.Okay, just add the size here.
00:10:57 There you go.I'm going to remove this again now – it was just to demonstrate to you the
advantages of our icon library.
00:11:12 Now though we going to add some descriptive icons from our icon library to our buttons.For
this purpose, we will first have what is known as the "outbox icon".
00:11:42 And the second button will just get the Save icon.Let's see what this looks like.
00:12:04 All right.Okay, let's proceed with layouts.
00:12:22 Now we would like to add several rows with labels and input controls, where the labels
should be right-aligned and the input controls left-aligned.
00:12:31 UI5 provides several layout controls which can be used within containers to arrange controls
according to your requirements.So let's have a look at the Explored app again,
00:12:49 and let's see which layout controls are available for us.As you can see, there are quite a
few.
00:12:58 I encourage you to browse through the collection and check out the samples.For our
purpose, the simple form layout seems to be a good fit, so let's have a look at one of these
examples.
00:13:16 You see there are these labels, and on the right- hand side, there are values.Let's make it
editable.
00:13:23 The labels are aligned to the right, whereas the input controls are aligned to the left.So we
will use this simple form, and we will use it in our icon tab bar.
00:13:45 So let's go over here...and copy the necessary code, which I will explain in a second.
00:14:04 Okay.As you see, this is an editable form.
00:14:18 It has a special namespace, which is "f" here.Let's look it up, so this is the
sap.ui.layout.form.
00:14:29 It is editable, and as you see, it contains interchanging labels and inputs.This simple form
always takes a label input couple and places them – as we saw in the sample – with labels
right-aligned,
00:14:51 whereas the input is left-aligned.Let's run this and see what it looks like.
00:15:07 You may wonder where the data comes from which is placed into the input fields.This is
actually from a named model called "address" – we have prepared a JSON file for this here.

00:15:23 And this new model is declared in the manifest.json, as you can see here.Okay.
00:15:43 That's that, and with that, I'd like to proceed to our next topic, which will be margins and
paddings.What we saw is all good and well, but we'd like to have an extra final polish,
00:16:08 we'd like to add a little space around the form and on top of the toolbar.For this purpose,
UI5 comes with predefined margin and padding classes, which have several advantages.
00:16:23 They come with predefined sizes called tiny, small, medium, and large, which stand for
specific steps in sizes and so on.Tiny is 0.5 rem or 8 pixels, whereas small is 16 pixels,
large is 32, and so on.
00:16:59 This is important because, with these steps, you can make sure that the margins look
consistent in your whole app.A second advantage is that we offer some directions called
begin, end, top, and bottom.
00:17:20 Begin and end depend on whether you are running in "Right to Left Mode" or not, which is
interesting for localizations that read from right to left, for example.
00:17:35 So these margins automatically adapt to countries with right-to-left mode, such as Arabic or
Hebrew-speaking countries.So they automatically adapt their beginning and end to this.
00:17:58 Let's look for this in Explored, which will probably make it clearer.Here we can just look for
"margins and paddings".
00:18:17 And, in this sample here, we have standard margins.Let's have a look at single-sided
margins.
00:18:26 As you can see here is a sample with a LargeMarginBegin and a LargeMarginBottom, as
you can see here and here.For demonstration purposes, we can now show this in "Right to
Left Mode".
00:18:51 So now you see that this margin's on the right side.Okay, let's go back to standard mode.
Okay.
00:19:06 For our purposes, we will use what is known as a "responsive padding" and add it to our
icon tab bar.Let's do this now.
00:19:32 We'll just add this to the whole icon tab bar.Okay, and in addition, we'd like a little space on
top of the toolbar that we have, which can be achieved by a margin.
00:19:59 So we'll simply add a little margin between the form and the toolbar, which we'll do
here.Okay, so let's look at the result.
00:20:31 So this is before introducing the padding and the margin, and we'll refresh it.So now there's
a little more room now in between,
00:20:43 and also, the padding made sure that the space between the border and the content is a
little bigger.With this, I'd like to come to the end of this unit
00:21:08 and let's briefly wrap up what we learned today in this unit.So we learned firstly about
container controls,
00:21:18 after that we looked at the Icon Explorer, which provides scalable icons for all kinds of
purposes, then we got acquainted with layout controls, which can be used within containers
to arrange their controls,
00:21:32 and finally we applied predefined margins and paddings to our form and our toolbar to give
it a final polish.So with that, I'd like to thank you, and see you in the next unit.
 www.sap.com

© 2016 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.