Week 0 Unit 1: Course

Environment and Setup

Course Environment and Setup Video Lectures
Course structure, points, and requirements Exercises (optional)

Watch the deadlines!

Week 0 Week 1 Week 2 Week 3 Week 4 Week 5
Get Started Learn the Become a Create Master Final Exam 4 weekly
Essentials Data Responsive SAPUI5 & Events assignments
Binding Apps 4x30 = 120 points
Expert
+
Final exam
Weekly assignments for each week Exam 120 points

* Bonus * Bonus +
2 bonus exercises
* (2x10 points)
=
Record of achievement
when results above
 Online forums during entire 6 weeks of course  120 points
Learning effort: ~4-5 hours/week (max. 240 points)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Course Environment and Setup
Week 0 – Preparation

Unit 0.1 Unit 0.2 Unit 0.3 Unit 0.4 Unit 0.5
Course Environment Do You Really SAPUI5 SDK – Debugging and A Glance at the
and Setup Understand Demo Kit Troubleshooting Coding Exercises
JavaScript?

Learn about the

development scenario
and set up accounts

Rest of this week:

Get ready for the course

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Course Environment and Setup
Scenario and tools

Cloud
Connector *

Web Server / Back-End

IDE deploy data
App Platform System

DB

Develop and Test Publish the App Store/Fetch Data

SAP Web IDE SAP HANA SAP Gateway
Cloud Platform (EPM Services)

* Establishes secure tunnel between cloud and on-premise systems

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Course Environment and Setup
SAP Web IDE

SAP Web IDE is a powerful, Web-based integrated development tool that simplifies the end-to-
end application development lifecycle for SAP Fiori apps, Fiori-like apps, and SAPUI5 apps

Develop Test Package Extend

and Deploy

Developing with SAP Web IDE SAP Web IDE – Enablement @ SCN

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Course Environment and Setup
SAP HANA Cloud Platform (HCP)

Integration User Experience Analytics

Dev & Ops Collaboration Security

More details:
hcp.sap.com
Business Data & Storage Mobile

Internet of Things

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Course Environment and Setup
SAP Fiori

SAP Fiori User Experience SAP Fiori Design Guidelines SAP Fiori, Demo Cloud Edition

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7

Course Environment and Setup
Related openSAP courses

Course Scenario Main Focus

Developing Web Apps  Develop SAPUI5 Web apps Learn the main concepts of the
with SAPUI5 (ui51)  Deploy apps to SAP HCP SAPUI5 UI library by
 Use generic OData services developing responsive apps
Build Your Own SAP Fiori  Design and develop SAP Fiori apps Use the SAP Fiori design
App in the Cloud (fiux2)  Deploy apps to SAP Fiori launchpad guidelines and development
 Extend existing apps resources to build your own
SAP Fiori app

Developing Mobile Apps  Develop mobile-enabled apps Build, extend, integrate, and
with SAP HANA Cloud  Deploy apps to mobile devices mobilize SAP Fiori apps by
Platform (mobile2)  Learn about mobile features adding (native) mobile features

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Thank you

Contact information:

[email protected]
© 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://global12.sap.com/corporate-en/legal/copyright/index.epx 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.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 10

Week 0 Unit 2: Do You Really
Understand JavaScript?
Do You Really Understand JavaScript?
Recommended JavaScript tutorials

If you are fairly new to JavaScript, you might want

to read one of the following free tutorials during
the preparation week of this course:

Codecademy: JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Do You Really Understand JavaScript?
How to test your knowledge

Do self-test questions
for this unit

while (aQuestions) {
aQuestions.pop().answer();
}
Use documentation
Enjoy the rest of this
link in question to
video as a recap!
learn the concept!
You really
understand JavaScript!

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Do You Really Understand JavaScript?
JavaScript & browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
Internet Explorer
JavaScript engines. Chakra
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript, but with slight
Mozilla Firefox
variations in the range of supported features and SpiderMonkey
implementation details (e.g. the exact details of how
XMLHttpRequest, XML API, and the DOM API have Safari
been implemented vary between browsers). Nitro
Client-side JavaScript is executed in a sandbox
For security reasons, you cannot access the local (file) Google Chrome
system from a Web page. V8

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Do You Really Understand JavaScript?
Client-side scripting

All presentation logic is done on the client

Only resources (HTML file, code, data) are loaded from
the Web server. The code is then processed on the client
to create DOM elements on the screen.
Compose UI
JavaScript is single-threaded
There is only one JavaScript thread per window. Other
activities like rendering or downloading resources may be JSON or XML
managed by separate threads but can be blocked by DB
scripts.

Data is loaded with XHR requests

During execution, data is often requested from a back-end
system such as an OData or a REST-based service. The XHR Requests
data is usually supplied in JSON or XML format.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Do You Really Understand JavaScript?
Linguistic inheritance of JavaScript

Java Scheme

JS

JavaScript
Self Perl

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Do You Really Understand JavaScript?
Types and implicit conversions

There are only 6 data types in JavaScript: “5” * “2”

Implicit type
 Number  10 conversions can be
double-precision 64-bit format (IEEE 754) nice or dangerous;
Typeof (“Hello” + 1)
 String try to avoid them
Sequences of Unicode characters  String

 Boolean
1 == true Beware of
True or false
 True truthy/falsy values,
 Object always use “===” for
Function / Array / Date / RegExp 1 === true strict checks
 Null  False
Deliberate non-value
var iAmount = 23; Use Hungarian
 Undefined
var sString = “Hello”; notation
Indicates an uninitialized value

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7

Do You Really Understand JavaScript?
Objects

Objects are unordered collections of name-value pairs // object literal

Names are called “properties”, values can be of any type. var oObjLiteral = {};
If it is a function, it becomes an object “method”.
// an Object object
Objects may have a constructor function var oObject = new Object();
Attributes can then be stored and accessed with the “this”
pointer in the current context // properties referenced using dot notation
oObject.property;

Everything except for core types is an object oObject.method([parameter]);

Even functions are just objects “with an executable part” // properties referenced using array notation
oObject["property"];

Inheritance is not based on classes but prototypes

// adding a property to an object
Properties and/or methods can be added to the object
oObject.newProperty = "Property Value";
itself or to the prototype and deleted at runtime.
// deleting properties or methods
delete oObject.myMethod;

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Do You Really Understand JavaScript?
Functions

Functions are objects with an executable part // function expression (anonymous)

They can be created and destroyed dynamically. Since var fnAdd = function(a, b) {
a function is just an object, in addition to its executable
return a + b;
code you can also assign your own properties (name,
};
arguments, …) to it.
Functions can be passed as arguments to other // function declaration (named)
functions
function add(a, b) {
Functions are frequently passed as parameters to other
return a + b;
functions in JavaScript. This is the basis upon which
“asynchronous callbacks” work. }

JavaScript variables exist within the scope of a

// function calls
function
fnAdd(2,3); // 5
All variables declared with a function are visible to all
coding within that function. This is known as “function add(2,3); // 5
scope”. There is no block scope in JavaScript.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 9

Do You Really Understand JavaScript?
Asynchronous processing

Be careful! JavaScript is single-threaded

Long-running or resource-intensive tasks should be performed
asynchronously, otherwise the UI might become unresponsive
and your users might see a message like this.
 Asynchronous module definition (AMD)
Helper tools for module loading: requireJS, sap.ui.define
 Divide long-running tasks with setTimeout(…, 0)
It will continue with the execution immediately after all other tasks are
processed
 Use callback functions, event listeners, promises, and framework
hooks
These patterns help you to efficiently structure and process application logic
 Use asynchronous XHR calls
Avoid synchronous server requests because script execution will pause until
the resource is loaded

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 10

Do You Really Understand JavaScript?
Method chaining (cascading)

If a function returns a reference to the current context then a programming technique called
method chaining can be used
Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

jQuery("#myButton")
.text("Click me")
.css("color", "#c00")
.bind("click", function(e) {
alert("Thanks for clicking");
});

 Chaining is a nice time-saver (the element in the example has to be looked up only once)
 Debugging long method chains is more difficult

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 11

Do You Really Understand JavaScript?
Closures

Nested functions inherit the scope of their function outer(param) {

parent function var attr1 = “One”;
inner();
Closures adapt to variable changes, even if the
changes happen a long time after the function was // the nested function inherits all
created. So you have to think of a closure as of a // the outer variables and parameters
“live” thing. function inner() {
var attr2 = “Two”;
“A closure is a special kind of object that combines alert(attr1); // “One”
two things: a function, and the environment in alert(attr2); // “Two”
which that function was created. The environment alert(param); // “Three”
consists of any local variables that were in-scope }
at the time that the closure was created.” }
outer(“Three”);
Source: MDN

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 12

Do You Really Understand JavaScript?
Scope: this or that?

this is a reference to the current var myObj = {

execution context and depends on the whatsThis : function(that) {
setTimeout(function () {
scope // this is the global window object
 Global scope: window console.log(this);
}, 0);
 Object scope: current object instance }
};
 Function scope: depends on us! var that = this;
When using callbacks, the context may setTimeout(function () {
// access “that” closure
be lost // for working with the context
this in an asynchronous callback function is by }, 0);
default the global window object!
setTimeout(function () {
Often, the “that” or “bind” construct is used to
// this is still the context
build a closure and ensure that the value of }.bind(this), 0);
this is set correctly.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 13

Week 0 Unit 3:
SAPUI5 SDK – Demo Kit
SAPUI5 SDK – Demo Kit
Releases

Latest release:
https://sapui5.hana.ondemand.com/
https://openui5.hana.ondemand.com/

Beta OpenUI5 release:

https://openui5beta.hana.ondemand.com/

Specific release:
https://sapui5.hana.ondemand.com/1.28.8/
https://openui5.hana.ondemand.com/1.32.5/

Your ABAP release:

https://<host>:<port>/sap/bc/ui5_demokit/

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAPUI5 SDK – Demo Kit
Explored
Metadata
Settings
Full Screen
Filter
Source Code

Preview

Controls

Samples

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

SAPUI5 SDK – Demo Kit
Communities and social networks

SCN Community: http://scn.sap.com/community/developer-center/front-end

Stackoverflow: http://stackoverflow.com/questions/tagged/sapui5

Slack: http://slackui5invite.herokuapp.com/

YouTube: https://www.youtube.com/openui5videos

Twitter: https://twitter.com/OpenUI5 (@openui5)

Blog: http://openui5.tumblr.com/

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Thank you

Contact information:

[email protected]
© 2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx 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.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Week 0 Unit 4: Debugging and
Troubleshooting
Debugging and Troubleshooting
SAPUI5 support tools

Technical information dialog

 CTRL + ALT + SHIFT + P
 Main features: enabling of debug sources & checking of SAPUI5 version
 Works on our supported desktop browsers

Diagnostics window
 CTRL + ALT + SHIFT + S
 Main features: SAPUI5 control tree, view & change control properties & bindings
 Works on our supported desktop browsers

UI5 inspector
 Chrome developer tools extension (F12)
 Main features: SAPUI5 control tree, view & change control properties & bindings (more to come)
 Works only with Google Chrome

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Debugging and Troubleshooting
Useful SAPUI5 methods for debugging

Retrieving a control in the console

 yourControl =
sap.ui.getCore().byId(“yourID”);
 yourControl = $($0).control(0);
(if the respective DOM element is selected
in the Elements tab)

Getting information about a control

 yourControl.getMetadata()  useful to check for the class details
 yourControl.getParent()  returns the parent control in the control tree
 yourControl.  shows you all available methods in the console

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Debugging and Troubleshooting
Tips & tricks

General
 Use Google Chrome if possible for debugging
 Check the console log for errors (press F12 key in Chrome)
 Set breakpoints and step through your code to understand where something is going wrong

SAPUI5
 If your control is not visible, check in the DOM inspector if your respective HTML exists
 Use debug sources for easier debugging
 Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab
 Check if your respective file contains the changes you made on the Sources tab
 Have a look at the Troubleshooting section in the Demo Kit

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Thank you

Contact information:

[email protected]
© 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://global12.sap.com/corporate-en/legal/copyright/index.epx 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.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Week 0 Unit 5: A Glance at the
Coding Exercises
A Glance at the Coding Exercises
A typical unit this course – Learning by doing

write.some.code();
?!

Watch the video Coding Exercise Validate Code Do Self-Test

optional but recommended

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

A Glance at the Coding Exercises
How to do a coding exercise

write.some.
code(); SAP Web IDE
Testing Tools

SAP Web IDE

Unit Exercise Handout Validator Script

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

A Glance at the Coding Exercises
How to run the validator

Preparation:
Include validator
script in index.html
and run the app

Select a Unit

1 3
Press the
Check
Button or
Results
F9
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4
A Glance at the Coding Exercises
How to do a bonus exercise

Task
Backlog write.some.code(); 08154711

Read Task Coding Exercise Validate Code Unlock Points

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Thank you

Contact information:

[email protected]
© 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://global12.sap.com/corporate-en/legal/copyright/index.epx 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.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7