OpenSAP Ui51 Week 4 All Slides

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

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.

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

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

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

Thank you
open@sap.com

Week 4 Unit 3:
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

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

Thank you
open@sap.com

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

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
Thank you
open@sap.com

Week 4 Unit 5:
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

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

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

Custom control type examples
Extend Existing Control (Lightbox) External Library (D3 Chart Control) Composite Control (Rotary Knob)

Thank you
open@sap.com

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)

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)

Recap Week 1: Learn the Essentials
MVC Concepts / Internationalization / Layout
MyApp
Develop and Test

SAP Web IDE

Recap Week 2: Become a Data Binding Expert
ES4 Models / Binding / OData

data
MyApp
Develop and Test

SAP Web IDE

Recap Week 3: Create Responsive Apps
ES4
Templates / Responsiveness / Reuse
data
SAP HANA
Cloud Platform
deploy
Manage
Products
Develop and Test

SAP Web IDE

Recap Week 4: Master SAPUI5
ES4
Navigation / CRUD Operations / Testing
data
SAP HANA
Cloud Platform
deploy
Manage
Products
Develop and Test

SAP Web IDE

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

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.

Thank you
open@sap.com

OpenSAP Ui51 Week 4 All Slides

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

OpenSAP Ui51 Week 4 All Slides

Diunggah oleh

Hak Cipta:

Format Tersedia

Week 4 Unit 1: Navigation and

Understand & extend the

Rest of this week:

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

Your App listens to changes manipulates

Developer Guide Essentials Routing and Navigation

National product specifications may vary.

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

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

Controller OData Model

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

Error Handling: Specific error messages for create and update

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

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

National product specifications may vary.

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

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

Ready to be extended with your

Developer Guide Developing Apps with Templates Testing

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

Less manual testing

Avoid regressions and bugs in your code

High code quality

Developer Guide Essentials ... Unit Testing with QUnit

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

National product specifications may vary.

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

Explored Samples for OPA

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

National product specifications may vary.

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

ManagedObject Data Binding

sap.ui.base EventProvider Eventing

Further Reading on Base Classes in SAPUI5

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

Developer Guide Developing Content Developing SAPUI5 Controls

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

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

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

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

National product specifications may vary.

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

Watch the deadlines!

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

MyApp week 3+4

Develop and Test Publish the App Store/Fetch Data

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

MVC Concepts / Internationalization / Layout

Develop and Test

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

ES4 Models / Binding / OData

Develop and Test

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

Develop and Test

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

Develop and Test

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

SAPUI5 SDK Demo Kit

Related openSAP courses

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

You can find us on