Anda di halaman 1dari 39

Week 4 Unit 1: Navigation and

Routing Concepts
Navigation and Routing Concepts
Week 4 Master SAPUI5

Unit 4.1 Unit 4.2 Unit 4.3 Unit 4.4 Unit 4.5 Unit 4.6
Navigation and Updating and Writing Unit Writing Inte- Creating Wrap-Up /
Routing Concepts Manipulating Tests with gration Tests Custom Engage with the
Data QUnit with OPA Controls Community

Understand & extend the


navigation within your app

Rest of this week:


Enhance the app and learn
how to test it

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


Navigation and Routing Concepts
Routing: How in-app navigation works
Browser
Address Bar: http://<your-host>/<some-path-to-the-app>/#/object/ID_5 Hash

Your App listens to changes manipulates

Described in manifest.json UI
Routing Configuration targets create, Views
display and Object.view.xml
Routes Targets navigate to views
"object/{objectId}" object

targets and routes fire Controllers
events when they are Object.controller.js
matches hash against displayed/matched
route pattern

Router

Developer Guide Essentials Routing and Navigation


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

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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


Week 4 Unit 2: Updating and
Manipulating Data
Updating and Manipulating Data
User interaction steps

1. Open
Add View

2. Enter
Data

3. Save
Product

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


Updating and Manipulating Data
Controller logic

App Back-End
1. Open System
Add View Routing Add View
2. Enter Smart Form
Data 1.a)
Route
3. Save
3.e) Pattern
Product
NavTo Matched
Route
1.b) Metadata
Loaded

1.c) Create
Add Entry

Controller OData Model


3.a) Submit 3.b) HTTP
Request
3.c) HTTP
3.d) Success
Response

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


Updating and Manipulating Data
Beyond this session

This unit only shows the first steps in setting up the complete update
scenario. The following requirements have been omitted:

Busy Indication: The view needs to be set to busy while the server is
processing the request

Error Handling: Specific error messages for create and update

Input Validation: The data needs to be validated and the resulting


messages displayed to the user

Value Help: The user needs assistance when entering the data

Data Loss Confirmation: If users try to leave the screen without saving
their data, they should be prompted to confirm the loss of data

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


Thank you

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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


Week 4 Unit 3:
Writing Unit Tests with QUnit
Writing Unit Tests with QUnit
Testing features shipped with the template

Clear separation of test and production code

Mock server setup with recommended options

Integration test setup (OPA) and basic test coverage

Unit test setup (QUnit) and basic test coverage

A separate HTML test page to call the app with mock data

A test suite that calls all your unit and integration tests

Ready to be extended with your


tests for new features!

Developer Guide Developing Apps with Templates Testing

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


Writing Unit Tests with QUnit
Why automated testing is really important for app development

Less manual testing

Avoid regressions and bugs in your code

Measurable KPIs

High code quality

Continuous integration

Developer Guide Essentials ... Unit Testing with QUnit

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


Thank you

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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


Week 4 Unit 4: Writing
Integration Tests with OPA
Writing Integration Tests with OPA
OPA? Whats that?

OPA (One Page Acceptance Tests) is an SAPUI5 package for writing integration tests
Modelled as a QUnit plugin that loads
opaTests.qunit.html
and tests the application
Common Page Object
Hides asynchronicity and eases access allJourneys.js
to SAPUI5 elements
Worklist Journey Worklist Page Object
Abstracts integration tests into
Journeys and Pages
Navigation Journey
Test cases are written in a Browser Page Object
Given When Then syntax

Explored Samples for OPA


Developer Guide Tutorials Testing
Developer Guide Essentials Integration Testing with OPA

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


Writing Integration Tests with OPA
Testing strategy

Exploratory Testing

Selenium

Included in
Component/
OPA, Mock Server SAPUI5
Integration Tests

QUnit, Sinon

Developer Guide > Tutorials > Testing > Overview and Testing Strategy
2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3
Thank you

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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


Week 4 Unit 5:
Creating Custom Controls
Creating Custom Controls
Base classes and inheritance

Control UI Widget
sap.ui.core
Element UI Element

ManagedObject Data Binding

sap.ui.base EventProvider Eventing

Object Lifecycle

Further Reading on Base Classes in SAPUI5


2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2
Creating Custom Controls
What are the options?

The extend() method is available on all controls and is


used to define a new subclass.
Warning:
Inherited Control Inheriting from SAPUI5
Inherit from any UI5 control class to reuse existing functionality objects may endanger the
sap.m.Image.extend(sName, oDefinition); updatability of your code.
Please refer to the SAPUI5
Individual Control / Composite Control Compatibility Rules
Inherit from control the base class for an entirely new control for more details
sap.ui.core.Control.extend(sName,
oDefinition);

Developer Guide Developing Content Developing SAPUI5 Controls

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


Creating Custom Controls
Control backlog

We want to give our users the possibility to rate a product


The rating for the product can be submitted by clicking a button
The new control should throw an event after the users submission that exposes the current vote
value
The button should only be enabled if the user has changed his vote. Initially, the button should be
disabled

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


Creating Custom Controls
Custom control type examples

Extend Existing Control (Lightbox) External Library (D3 Chart Control) Composite Control (Rotary Knob)

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


Thank you

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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


Week 4 Unit 6: Wrap-Up /
Engage with the Community
Wrap-Up / Engage with the Community Video Lectures
Course structure, points, and requirements Exercises (optional)

Watch the deadlines!


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

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

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


Wrap-Up / Engage with the Community
Scenario and tools

week 1+2

MyApp week 3+4


Web Server / Back-End
Manage deploy data
App Platform System
Products

DB

Develop and Test Publish the App Store/Fetch Data


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

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


Wrap-Up / Engage with the Community
Recap Week 1: Learn the Essentials

MVC Concepts / Internationalization / Layout

MyApp

Develop and Test


SAP Web IDE

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


Wrap-Up / Engage with the Community
Recap Week 2: Become a Data Binding Expert

ES4 Models / Binding / OData


data

MyApp

Develop and Test


SAP Web IDE

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


Wrap-Up / Engage with the Community
Recap Week 3: Create Responsive Apps

ES4
Templates / Responsiveness / Reuse
data

SAP HANA
Cloud Platform
deploy

Manage
Products

Develop and Test


SAP Web IDE

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


Wrap-Up / Engage with the Community
Recap Week 4: Master SAPUI5

ES4
Navigation / CRUD Operations / Testing
data

SAP HANA
Cloud Platform
deploy

Manage
Products

Develop and Test


SAP Web IDE

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


Wrap-Up / Engage with the Community
Further learning

SAPUI5 SDK Demo Kit


https://sapui5.hana.ondemand.com

SAPUI5 Tutorials
Developer Guide Tutorials

Related openSAP courses


Build Your Own SAP Fiori App in the Cloud
Developing Mobile Apps with SAP HANA Cloud Platform

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


Wrap-Up / Engage with the Community
Our communities

You can find us on


Good luck in
SCN the final exam!
Stack Overflow: sapui5 / openui5
Slack
Twitter
YouTube
GitHub
OpenUI5.org

Thank you for


participating in this
course and see you in
one of our communities.

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


Thank you

Contact information:

open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.

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

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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