Professional Documents
Culture Documents
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
Open Libraries
-NetWeaver ABAP
-NetWeaver JAVA
OpenUI5 comes under the Apache 2.0 license. What does this mean?
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
Will hold the application setup. The component inherits from the base class, the SAPUI
component.
"sap.ui" : contains the device types you support within your app
Unit 4: Self-test
Unit 5: Data Models and Internationalization
Containers in UI5 are special controls which can contain other controls or other containers.
ToolbarSpacer fills all available space and pushes content to the right.
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
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.
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.
https://sapui5.hana.ondemand.com/1.36.6/docs/guide/c4b2a32bb72f483faa173e890e48d812.ht
ml
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.
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
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
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.
This way we can define exact filters without having to touch the model.
Unit 3.3: Self-test
Semantic colors can be used to represent a negative, critical, positive, neutral, or information
status
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 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
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.
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.
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.
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
“_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.
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 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?
https://sinonjs.org/releases/latest/stubs/
Why should you have automated tests for your application functionality?
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.
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.
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.