Developing Web Apps with SAPUI5

Week 0
User: P2001929743
Unit 2: Do You Really Understand JavaScript?
Unit 3: SAPUI5 SDK – Demo Kit
Unit 4: Debugging and Troubleshooting
Unit 5: Self-test
Week 1
Unit 1: Introducing SAPUI5
Which open standards and tools are the foundation of SAPUI5 technology? (3)

Open Standards

HTML5, CSS3, ARIA

Open Libraries

JQuery DOM, less CSS Pre-processor, datajs oData Support

Which of the following statements regarding SAPUI5 are true? (3)

Shipped with other SAP Products

-NetWeaver ABAP
-NetWeaver JAVA

OpenUI5 comes under the Apache 2.0 license. What does this mean?

For free and commercial projects without paying anything.

Unit 2: Defining the UI Using Controls and Views

https://cockpit.hanatrial.ondemand.com/cockpit/#/home/trial
Unit 3: Structuring with Controllers and Modules
Model View Controller (MVC)

View: Contains the UI of the App and notifies the controller when events are triggered

Controller: Take action and update the view

Unit 4: Creating a Configurable App Component

Component: Independent and reusable paths used in SAPUI5 applications.

Will hold the application setup. The component inherits from the base class, the SAPUI
component.

The component will manage the display of the App.view

All application specific configuration settings will now be put in a separate app descriptor file
named manifest.json
The manifest JSON file contains all global application settings and parameters

"sap.app" : contains the title and description for the FLP

"sap.ui" : contains the device types you support within your app

"sap.ui5" : this add sap ui5 configuration parameters

What Happens When an App Is Started?

Unit 4: Self-test
Unit 5: Data Models and Internationalization

Special UI5 Model called Resource Model.

Unit 5: Self-test
Unit 6: Containers and Layout
https://open.sap.com/courses/ui51/items/7sHnOKGkPYodjR8O306NJg

Containers in UI5 are special controls which can contain other controls or other containers.

Let’s get started by adding a sap.m.IconTabBar container to our app.

ToolbarSpacer fills all available space and pushes content to the right.

Icon Explorer is a collection of searchable and categorized icons.

https://sapui5.hana.ondemand.com/test-
resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons

Layout Controls
Simple Form Layout – Labels aligned to the right, Input control text aligned
to the left

Margins and Paddings

To add space around the form

UI5 comes with predefined margins and padding classes, they come with predefined sizes: Tiny is 8
pixels, Small is 16 pixels and so on. They offer directions that are begin, end, top and bottom.
Begin and end margins automatically adapt to countries in right-to-left mode.
Week 2 – Become a Data Binding expert
Unit 2.1: Using a Remote Service with Aggregation Binding
How to connect the application to a remote service
User: P2001929743

Binding Types – Data Binding: Data binding is the process that establishes a connection between
the application UI and business logic.

In a OData service, entities are usually organized in entity sets

Property binding
It allows properties of the control to get automatically initialized and updated from model data.

Aggregation binding
Aggregation binding is used to automatically create child controls according to model data.
Unit 2.1: Self-test
Unit 2.2: Working with Expressions and Formatters
Expression Binding
To indicate that we want to use an expression binding we start with an equal sign (=)

To add a reference to the data in out model we start with a dollar sign ($)

Custom Formatter
Converting technical data into human-readable texts
Unit 2.2: Self-test
Unit 2.3: Automatic Conversion with Data Types
Primitive Types:

Boolean
Currency
Date
DateTime
sap.ui.model.type. FileSize
Float
Integer
String
Time

A formatter allows to format what will be displayed in the UI, while leaving the actual value in the
model untouched.

Usage of types for form validation

Unit 2.3: Self-test

Unit 2.4: Sorting, Grouping, and Filtering

https://open.sap.com/courses/ui51/items/5LywjgiVWhRy6FYKKLcTPi

https://sapui5.hana.ondemand.com/1.36.6/docs/guide/c4b2a32bb72f483faa173e890e48d812.ht
ml

To make Lists and Tables searchable SAPUI5 provides filters.

For the ‘search’ event we provide the handler function ‘onFilterProducts’ which we need
to implement in the controller.
The event oEvent is generated by the search field and it contains a String which is entered in the
search field.

In the controller we get access to the control in the view by entering:

oList = this.getView().byID("productList"),

Note: If the metadata field contains sap:filterable="false" it is not available for filtering.

Since we are using Filter and FilterOperator, this classes should be defined.
Unit 2.4: Self-test
Unit 2.5: Binding Contexts with Element Binding
Property binding
Allows to make a connection from the properties of a control to particular paths in the model.
When this connection is established these properties automatically get initialized and updated
from model data.

Aggregation binding
Are used to automatically create controls for an aggregation at a parent control, from model data.

Relative paths

Aggregation binding is perfect when you need to create the same representation on the UI for
multiple children of a parent.

Element binding
Allows you to create a binding context for any parent control, allowing the children to have
relative paths resolving to this context.

You can “rebind” the parent control to a different context by using the bindElement(path)
method .
 The growing property enables the paging mechanism.
By setting the property growingThreshold to 5 we tell the list to
initially display 5 items

path is a property

From this object, we can get the control which has triggered the event by using
oEvent.getSource().

We start with the grid layout. As we have defined the namespace for the layout library as ”l”, we
need to put this prefix in front of the control name.
Unit 2.5: Self-test
Unit 2.6: Working with OData Services
OData is an open protocol that allows us to consume data following REST principles.

Navigation properties show how this entity can be connected to some other entities in our service.

https://docs.microsoft.com/en-us/graph/query-parameters
Unit 6: Self-test
Week 3 – Create Responsive Apps
Unit 3.1: Creating Apps with Templates
In the real world we start with an application template that gives a well-defined structure along
with best practices.

https://developers.sap.com/tutorials/cp-ui5-ms-graph-create-destination.html

User: P2001929743

https://account.hanatrial.ondemand.com/cockpit/#/acc/p2001929743trial/destinations
Project Name: ManageProducts

Title: Manage Products

Namespace: opensap.manageproducts
https://manageproducts-p2001929743trial.dispatcher.hanatrial.ondemand.com/index.html?
hc_reset

The folder called dist contains a version of the application that has been optimized

Unit 3.1: Self-test

Unit 3.2: Defining a Responsive Table
https://open.sap.com/courses/ui51/items/2T8hL7pMRdZcWQsI83P3eh

SAPUI5 applications can run as well on desktop browsers as mobile devices.

To add the name of the product in the Worklist.view.xml the ObjectIdentifier has the text
property

The property minScreenWidth in the Column means the column will be shown in screens larger
than the phone.

The property demandPopin in the Column means that if there is no space to show the column it
is shown in the Popin
In the items aggregation we have the definition of the different cells
Unit 3.2: Self-test
Unit 3.3: Adding Quick Filters
https://open.sap.com/courses/ui51/items/4TBeLOs4o9pznqq4QyeUMR
We add a new “helper” object called _mFilters, for storing our filter objects. The underscore
( _ ) signals the users that the object is private.

Define abstract filter

Create a Filter object

Define a data binding path
A filter operator
One or two values, depending on the operator

If a standard Filter is not enough you can also

specify a test function and the just define a
JavaScript that tests just the value.

You can also combine multiple filters either with AND

or with OR and this is done by passing in an array as a
filters argument.

This way we can define exact filters without having to touch the model.
Unit 3.3: Self-test

1.What are semantic colors?

Semantic colors can be used to represent a negative, critical, positive, neutral, or information
status

2.Which of the following are semantic states in SAPUI5?

Critical, negative and positive

3.How can you compose filters in SAPUI5?

4.Where are filters applied in SAPUI5?

5.Which filter operation can you use to filter items with a numeric value lower than X?

sap.ui.model.FilterOperator.LT
Unit 3.4: Adapting to the User's Device
The SplitApp which is used to display two different pages side by side on desktops

In the PullDownRefresh, the user pulls down the page to refresh data, in desktop browsers there’s
a refresh button to refresh the list.
 The _bindView method is called to bind the data on
the detail page to the product page

The SAPUI5 responsive margin class sapUiResponsiveMargin works with media queries to
determine the available screen width and adapts its margin.

There are 5 css classes to hide elements based on the width of the screen:
 sapUiHideOnPhone - will be hidden if the screen has 600px or more
 sapUiHideOnTablet - will be hidden if the screen has less than 600px or more than
1023px
 sapUiHideOnDesktop - will be hidden if the screen is smaller than 1024px

The binding mode of this JSON model is set to

“OneWay” to keep the application from overwriting
data in the device API.

The device API (sap.ui.Device) is an API which provides information about device specifics, like the
operating system along with its version, the browser and browser version, screen size, current
orientation and support for specific features like touch event support, orientation change and so on.
This method is called in the Component.js file

It sets the model with the name “device” on this,

so in the entire application, this device model will be
available with the “device” name.

This makes the Panel expandable when running on a phone.

And is expanded by default.

SAPUI5 provides a “content density” factor, which allows the size of the controls to be adjusted
depending on the interaction style.

 The cozy factor displays controls with dimensions large enough to enable fingertip
interaction. This factor is ideal for devices operated by touch.
 The compact factor reduces the dimensions of the controls, allowing more information to
be displayed on the UI. This factor is ideal for devices operated by mouse and keyboard.
 This adds the StyleClass to the root view
of the application.

Unit 3.4: Self-test

Unit 3.5: Fragments and Code Reuse
https://open.sap.com/courses/ui51/items/77wFYAyHTN40FBC3138Vb5

View nesting
In a XML view you can use a single line of code to include a different view.

A nested view can have its own controller, and hence come with methods completely different
from the surrounding view.

Fragments
A fragment can contain one or multiple controls and it does not have its own controller like a view
usually does. It is a very lightweight element in UI, and will simply have its controls rendered
wherever you include it. At runtime, a fragment’s content will be indistinguishable from other
parts of your view, so there will be no encapsulating DOM elements surrounding it.

The only line of code needed to get access to the fragment is:
Typical folder structures
When you have a number of different views it can be helpful for related views and fragments to be
put into subfolders. The same goes for controllers.

Reuse objects
As a dependency we are loading a controller that comes from our own application which is called
BaseController, this is done to avoid copying functions from one controller to the next.

The controllers in the application can extend this basic controller, and inherit all the functionality
from there.

Unit 3.5: Self-test

Unit 3.6: Implementing Dialogs
https://open.sap.com/courses/ui51/items/6AqUupX7BDh2Dz5NtfziCL
ResponsivePopover
The Responsive Popover is an abstraction of Popover and Dialog. On the phone a Dialog will be
shown. On tablet and desktop, a Popover is shown.

To open our Popover from somewhere. For this, we will set the ObjectIdentifier title into
an active state, so it can be clicked, and assign an event handler which shall open the Popover
To open the Popover here, we call its openBy method and pass the event parameter domRef,
so that the Popover is positioned very close to the right border of the actual link that was
clicked.

Fragments to make dialogs reusable

Unit 3.6: Self-test

Week 4 – Master SAPUI5
Unit 4. 1: Navigation and Routing Concepts
https://open.sap.com/courses/ui51/items/5y2Pw5AONS51Hu4GmT7d2g

SAPUI5 offers a hash-based navigation, which allows to build one-page applications where the
navigation is done by changing the hash.

A route is used to notify your application that the hash has changed to a certain value

When defining routes, the order is

important: Only the first route that
matches is informed.
config: contains the global router
configuration and default values that
apply for all routes and targets.

routes: here you define a route, and

each route defines a name, a pattern
and one or more targets to navigate
when the route has been matched.

targets: each target defines a view

to be displayed. And you can also
define the viewLevel, for animating
forward and back navigation.

We initialize the router otherwise the

router is not instantiated automatically.
Within the manifest.json we have the
Routing Configuration, which contains all
our Routes and Targets

Whenever the “object” route gets

matched, we execute this
“_onObjectMatched” function

“_onObjectMatched” function
 if the product we want to display is
not available then we display the
objectNotFound target

You can use targets to display a view without changing the hash as well.

When a route that is not defined as a

pattern is entered, then the
“bypassed” target is automatically
displayed.
Unit 4.1: Self-test

Unit 4. 2: Updating and Manipulating Data

https://open.sap.com/courses/ui51/items/4LCRqCZVO7Q5oLQKKKhKX1

In one-way data binding information flows in only one direction, and is when the information is
displayed, but not updated. In two-way data binding information flows in both directions, and is
used in situations where the information needs to be updated.

In one-way data binding when data is changed in the model its populated in the view, but when
its changed in the view, its not changed in the model.
Unit 4.2: Self-test
Unit 4.3: Writing Unit Tests with QUnit
https://open.sap.com/courses/ui51/items/7r5oQdWpOFY8aObQlanHZu

The test folder contains all the testing artifacts.

Inside the testing folder we have helper structures that help you test your application projects.

The URL parameter serverDelay can be used to slow down the app to test.

Integration testing
In the “integration” folder we have integration tests that are written with a tool called OPA, these
tests are written in JavaScript, but they test real user interaction.

Unit testing
There is a starting page called “unit.Tests.qunit.html” and here we can call all the unit tests.

Unit tests focus on testing logic and code behavior. Unit tests are written in QUnit, which is also a
part of UI5

Also, there is a file called “testsuite.qunit.html”, which runs all the integration and unit tests
together.
What is QUnit?

QUnit is a powerful, easy-to-use JavaScript unit testing framework.

Sinon.js is a library delivered in SAPUI5

https://sinonjs.org/releases/latest/stubs/

Test stubs are functions (spies) with pre-programmed behavior.

Why should you have automated tests for your application functionality?

 Less manual testing

 Avoid regressions and bugs in your code
 Measurable KPIs
 High code quality
Unit 4.3: Self-test
Unit 4.4: Writing Integration Tests with OPA
https://open.sap.com/courses/ui51/items/13L0ulRO17XYVfxwAyHk4o

OPA Tests: One-Page Acceptance Tests

Lets you check whether your specifications are met on a component level.

In the "integration" > "test" folder, you find "pages", each of which can provide arrangements,
actions, and assertions, which correspond to given, when, then.
The worklist page, only has
actions and arrangements.

The pages have two purposes:

1. They serve as a repository for reusable arrangements, actions, and assertions

2. They make the OPA test which refers to them more readable.

Let's execute our OPA test and see what that looks like.
To add our own OPA tests to the worklist journey to check if this button works correctly.

Ideally, you should put most of your efforts into unit tests, which is why they are at the very
bottom of the pyramid.
Unit tests are automated tests which check, for example, controller functions directly.

On the next level, there are the component or integration tests.

UI5 comes with third-party frameworks QUnit and Sinon, and provides OPA and a mock server for
integration tests.

Finally, there are manual tests. You test a system following a certain theme called a "tour". There
are, for example, "money", "supermodel", "back alley", and "antisocial" tours.

Unit 4.4: Self-test

Unit 4.5: Creating Custom Controls

You can extend certain classes in UI5 to build upon provided capabilities and implement custom
functionality.

Two flavors are possible here: build a completely new control, or

Content to the renderer.

We write our DOM structure

Unit 4.5: Self-test