open sap ui51_week0_all_slides
TRANSCRIPT
Week 0 Unit 1 Course
Environment and Setup
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Week 2
Become a
Data
Binding
Expert
Week 1
Learn the
Essentials
Week 4
Master
SAPUI5
Week 3
Create
Responsive
Apps
Week 0
Get Started
Week 5
Final Exam
amp Events
Course Environment and SetupCourse structure points and requirements
Video Lectures
Exercises (optional)
4 weekly
assignments
4x30 = 120 points
Final exam
120 points
Record of achievement
when results above
120 points
(max 240 points)
Watch the deadlines
+
=
2 bonus exercises
(2x10 points)
+
Online forums during entire 6 weeks of course
Learning effort ~4-5 hoursweek
ExamWeekly assignments for each week
Bonus Bonus
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Course Environment and SetupWeek 0 ndash Preparation
Learn about the
development scenario
and set up accounts
Rest of this week
Get ready for the course
Unit 01
Course Environment
and Setup
Unit 02
Do You Really
Understand
JavaScript
Unit 03
SAPUI5 SDK ndash
Demo Kit
Unit 04
Debugging and
Troubleshooting
Unit 05
A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Course Environment and SetupScenario and tools
IDEWeb Server
App Platformdatadeploy
Develop and Test
SAP Web IDE
Publish the App
SAP HANA
Cloud Platform
StoreFetch Data
SAP Gateway
(EPM Services)
Back-End
System
DB
Cloud
Connector
Establishes secure tunnel between cloud and on-premise systems
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN
Course Environment and SetupSAP 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Week 2
Become a
Data
Binding
Expert
Week 1
Learn the
Essentials
Week 4
Master
SAPUI5
Week 3
Create
Responsive
Apps
Week 0
Get Started
Week 5
Final Exam
amp Events
Course Environment and SetupCourse structure points and requirements
Video Lectures
Exercises (optional)
4 weekly
assignments
4x30 = 120 points
Final exam
120 points
Record of achievement
when results above
120 points
(max 240 points)
Watch the deadlines
+
=
2 bonus exercises
(2x10 points)
+
Online forums during entire 6 weeks of course
Learning effort ~4-5 hoursweek
ExamWeekly assignments for each week
Bonus Bonus
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Course Environment and SetupWeek 0 ndash Preparation
Learn about the
development scenario
and set up accounts
Rest of this week
Get ready for the course
Unit 01
Course Environment
and Setup
Unit 02
Do You Really
Understand
JavaScript
Unit 03
SAPUI5 SDK ndash
Demo Kit
Unit 04
Debugging and
Troubleshooting
Unit 05
A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Course Environment and SetupScenario and tools
IDEWeb Server
App Platformdatadeploy
Develop and Test
SAP Web IDE
Publish the App
SAP HANA
Cloud Platform
StoreFetch Data
SAP Gateway
(EPM Services)
Back-End
System
DB
Cloud
Connector
Establishes secure tunnel between cloud and on-premise systems
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN
Course Environment and SetupSAP 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Course Environment and SetupWeek 0 ndash Preparation
Learn about the
development scenario
and set up accounts
Rest of this week
Get ready for the course
Unit 01
Course Environment
and Setup
Unit 02
Do You Really
Understand
JavaScript
Unit 03
SAPUI5 SDK ndash
Demo Kit
Unit 04
Debugging and
Troubleshooting
Unit 05
A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Course Environment and SetupScenario and tools
IDEWeb Server
App Platformdatadeploy
Develop and Test
SAP Web IDE
Publish the App
SAP HANA
Cloud Platform
StoreFetch Data
SAP Gateway
(EPM Services)
Back-End
System
DB
Cloud
Connector
Establishes secure tunnel between cloud and on-premise systems
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN
Course Environment and SetupSAP 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Course Environment and SetupScenario and tools
IDEWeb Server
App Platformdatadeploy
Develop and Test
SAP Web IDE
Publish the App
SAP HANA
Cloud Platform
StoreFetch Data
SAP Gateway
(EPM Services)
Back-End
System
DB
Cloud
Connector
Establishes secure tunnel between cloud and on-premise systems
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN
Course Environment and SetupSAP 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN
Course Environment and SetupSAP 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Course Environment and SetupSAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev amp Ops
MobileData amp StorageBusiness
More details
hcpsapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
Course Environment and SetupSAP Fiori
SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Course Environment and SetupRelated openSAP courses
Course Scenario Main Focus
Developing Web Apps
with SAPUI5 (ui51)
Develop SAPUI5 Web apps
Deploy apps to SAP HCP
Use generic OData services
Learn the main concepts of the
SAPUI5 UI library by
developing responsive apps
Build Your Own SAP Fiori
App in the Cloud (fiux2)
Design and develop SAP Fiori apps
Deploy apps to SAP Fiori launchpad
Extend existing apps
Use the SAP Fiori design
guidelines and development
resources to build your own
SAP Fiori app
Developing Mobile Apps
with SAP HANA Cloud
Platform (mobile2)
Develop mobile-enabled apps
Deploy apps to mobile devices
Learn about mobile features
Build extend integrate and
mobilize SAP Fiori apps by
adding (native) mobile features
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Week 0 Unit 2 Do You Really
Understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Do You Really Understand JavaScriptRecommended 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Do You Really Understand JavaScriptHow to test your knowledge
Do self-test questions
for this unit
Enjoy the rest of this
video as a recap
Use documentation
link in question to
learn the concept
while (aQuestions)
aQuestionspop()answer()
You really
understand JavaScript
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Do You Really Understand JavaScriptJavaScript amp browsers
JavaScript code is interpreted at runtime
All modern desktop and mobile browsers are highly
optimized for processing JavaScript code with their
JavaScript engines
JavaScript is properly known as ECMAScript
Browser engines implement ECMAScript but with slight
variations in the range of supported features and
implementation details (eg the exact details of how
XMLHttpRequest XML API and the DOM API have
been implemented vary between browsers)
Client-side JavaScript is executed in a sandbox
For security reasons you cannot access the local (file)
system from a Web page
Internet Explorer
Mozilla Firefox
Safari
Google Chrome
Chakra
SpiderMonkey
Nitro
V8
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Do You Really Understand JavaScriptClient-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
JavaScript is single-threaded
There is only one JavaScript thread per window Other
activities like rendering or downloading resources may be
managed by separate threads but can be blocked by
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
data is usually supplied in JSON or XML format
DBJSON or XML
XHR Requests
Compose UI
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
Do You Really Understand JavaScriptLinguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
There are only 6 data types in JavaScript
Number
double-precision 64-bit format (IEEE 754)
String
Sequences of Unicode characters
Boolean
True or false
Object
Function Array Date RegExp
Null
Deliberate non-value
Undefined
Indicates an uninitialized value
ldquo5rdquo ldquo2rdquo
10
Typeof (ldquoHellordquo + 1)
String
1 == true
True
1 === true
False
var iAmount = 23
var sString = ldquoHellordquo
Do You Really Understand JavaScriptTypes and implicit conversions
Beware of
truthyfalsy values
always use ldquo===rdquo for
strict checks
Implicit type
conversions can be
nice or dangerous
try to avoid them
Use Hungarian
notation
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8
Do You Really Understand JavaScriptObjects
Objects are unordered collections of name-value pairs
Names are called ldquopropertiesrdquo values can be of any type
If it is a function it becomes an object ldquomethodrdquo
Objects may have a constructor function
Attributes can then be stored and accessed with the ldquothisrdquo
pointer in the current context
Everything except for core types is an object
Even functions are just objects ldquowith an executable partrdquo
Inheritance is not based on classes but prototypes
Properties andor methods can be added to the object
itself or to the prototype and deleted at runtime
object literal
var oObjLiteral =
an Object object
var oObject = new Object()
properties referenced using dot notation
oObjectproperty
oObjectmethod([parameter])
properties referenced using array notation
oObject[property]
adding a property to an object
oObjectnewProperty = Property Value
deleting properties or methods
delete oObjectmyMethod
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9
Do You Really Understand JavaScriptFunctions
Functions are objects with an executable part
They can be created and destroyed dynamically Since
a function is just an object in addition to its executable
code you can also assign your own properties (name
arguments hellip) to it
Functions can be passed as arguments to other
functions
Functions are frequently passed as parameters to other
functions in JavaScript This is the basis upon which
ldquoasynchronous callbacksrdquo work
JavaScript variables exist within the scope of a
function
All variables declared with a function are visible to all
coding within that function This is known as ldquofunction
scoperdquo There is no block scope in JavaScript
function expression (anonymous)
var fnAdd = function(a b)
return a + b
function declaration (named)
function add(a b)
return a + b
function calls
fnAdd(23) 5
add(23) 5
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10
Do You Really Understand JavaScriptAsynchronous processing
Be careful JavaScript is single-threadedLong-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 sapuidefine
Divide long-running tasks with setTimeout(hellip 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
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11
Do You Really Understand JavaScriptMethod 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
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
jQuery(myButton)
text(Click me)
css(color c00)
bind(click function(e)
alert(Thanks for clicking)
)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12
Do You Really Understand JavaScriptClosures
Nested functions inherit the scope of their
parent function
Closures adapt to variable changes even if the
changes happen a long time after the function was
created So you have to think of a closure as of a
ldquoliverdquo thing
ldquoA closure is a special kind of object that combines
two things a function and the environment in
which that function was created The environment
consists of any local variables that were in-scope
at the time that the closure was createdrdquo
Source MDN
function outer(param)
var attr1 = ldquoOnerdquo
inner()
the nested function inherits all
the outer variables and parameters
function inner()
var attr2 = ldquoTwordquo
alert(attr1) ldquoOnerdquo
alert(attr2) ldquoTwordquo
alert(param) ldquoThreerdquo
outer(ldquoThreerdquo)
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13
Do You Really Understand JavaScriptScope this or that
var myObj =
whatsThis function(that)
setTimeout(function ()
this is the global window object
consolelog(this)
0)
var that = this
setTimeout(function ()
access ldquothatrdquo closure
for working with the context
0)
setTimeout(function ()
this is still the context
bind(this) 0)
this is a reference to the current
execution context and depends on the
scope
Global scope window
Object scope current object instance
Function scope depends on us
When using callbacks the context may
be lostthis in an asynchronous callback function is by
default the global window object
Often the ldquothatrdquo or ldquobindrdquo construct is used to
build a closure and ensure that the value of
this is set correctly
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Week 0 Unit 3
SAPUI5 SDK ndash Demo Kit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2
SAPUI5 SDK ndash Demo KitReleases
Latest release
httpssapui5hanaondemandcom
httpsopenui5hanaondemandcom
Beta OpenUI5 release
httpsopenui5betahanaondemandcom
Specific release
httpssapui5hanaondemandcom1288
httpsopenui5hanaondemandcom1325
Your ABAP release
httpslthostgtltportgtsapbcui5_demokit
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3
SAPUI5 SDK ndash Demo KitExplored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4
SAPUI5 SDK ndash Demo KitCommunities and social networks
SCN Community httpscnsapcomcommunitydeveloper-centerfront-end
Stackoverflow httpstackoverflowcomquestionstaggedsapui5
Slack httpslackui5inviteherokuappcom
YouTube httpswwwyoutubecomopenui5videos
Twitter httpstwittercomOpenUI5 (openui5)
Blog httpopenui5tumblrcom
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Thank you
Contact information
opensapcom
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Week 0 Unit 4 Debugging and
Troubleshooting
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
Debugging and TroubleshootingSAPUI5 support tools
Technical information dialog
CTRL + ALT + SHIFT + P
Main features enabling of debug sources amp checking of SAPUI5 version
Works on our supported desktop browsers
Diagnostics window
CTRL + ALT + SHIFT + S
Main features SAPUI5 control tree view amp change control properties amp bindings
Works on our supported desktop browsers
UI5 inspector
Chrome developer tools extension (F12)
Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)
Works only with Google Chrome
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
Debugging and TroubleshootingUseful SAPUI5 methods for debugging
Retrieving a control in the console
yourControl =
sapuigetCore()byId(ldquoyourIDrdquo)
yourControl = $($0)control(0)
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
yourControlgetMetadata() useful to check for the class details
yourControlgetParent() returns the parent control in the control tree
yourControl shows you all available methods in the console
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
Debugging and TroubleshootingTips amp 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
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Week 0 Unit 5 A Glance at the
Coding Exercises
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2
A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing
Watch the video
Do Self-Test
optional but recommended
Coding Exercise Validate Code
writesomecode()
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3
A Glance at the Coding ExercisesHow to do a coding exercise
writesome
code()
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4
A Glance at the Coding ExercisesHow to run the validator
Press the
Button or
F9
Preparation
Include validator
script in indexhtml
and run the app
Select a Unit
Check
Results
1
2
3
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5
Read Task Coding Exercise Unlock PointsValidate Code
writesomecode()Task
Backlog 08154711
A Glance at the Coding ExercisesHow to do a bonus exercise
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Thank you
Contact information
opensapcom
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-
Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7
copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future
developments products andor 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
- openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
- openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
- openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
- openSAP_ui5_Week_0_Unit_4_DAT_Presentation
- openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
-