OpenSAP Mobile2 Week 5 Exercises

openSAP Developing Mobile Apps with SAP
HANA Cloud Platform

Exercises and Solutions for Week 5 - Creating an Offline
App
openSAP Developing Mobile Apps with SAP HANA Cloud Platform: Week 5 - Exercises and Solutions
TABLE OF CONTENTS
INFORMATION ................................................................................................................................................. 3
WEEK 5 UNIT 3................................................................................................................................................. 4
Exercise ............................................................................................................................................................ 4
Solution ............................................................................................................................................................ 8
WEEK 5 UNIT 4............................................................................................................................................... 15
Exercise .......................................................................................................................................................... 15
Solution .......................................................................................................................................................... 16
Welcome to the exercises and solutions of week 5 of the openSAP course Developing Mobile Apps
with SAP HANA Cloud Platform.
INFORMATION
In the following exercises we will go through building a hybrid application based on UI5 with SAP Web IDE
that supports offline use. You will be guided through using a SAP Web IDE template to create a offline app.
Following that you will deploy the offline app to an Emulator/Simulator or Device and test it.
Please Note: the performance of this offline app will be poor due to the HCPms Trial landscape and limited
resource. Depending on use at the time, flushing and refreshing your offline store can take up to 2 minutes
(normally around the 1 minute mark, sometimes much less).
WEEK 5 UNIT 3
Exercise
Objective
In this exercise you will learn how to create and configure a hybrid application using the SAP Web IDE offline
template.
Exercise Description
Logon to the your SAP Web IDE trial account.
Create a new Template Project. File > New > Project From Template
Select Template: A SAPUI5 Master Detail Kapsel Offline Application
Click Next to start the template wizard.
Name the Project: OfflineOpenSAPApp. Click Next.
On the Data Connection screen select Service URL as your source.
Select your service destination from the dropdown and then enter the OData Service URL you have
been using in the input field (make sure /V2 is in the same spot show below):
Click Next.
In the Offline Data Entity Collections screen select the Products and Suppliers collections.
Click Next.
On the Template Customizations screen in the Project Settings area enter the Project Namespace:
com.sap.open.offline
In the Master Section enter the following:
Title
Products
OData Collection
Products
Search Placeholder
Name
Search Tooltip
Enter Product Name
Search Field
Name
In the Main Data Fields area enter the following:

Item Title
Numeric Attribute
Units Attribute
Name
Price
ID
In the Detail Section area enter the following:

Title
Additional Attribute1
Product Details
Name
Description
In the Information Section area enter the following:

OData Navigations
Navigation Attribute1
Supplier
Name
Address/City
Address/State
In the Create/Edit Section you can select the Create Input Fields for Key Properties checkbox. This will
generate some input fields for the key fields.
Click the Next button.

On the Confirmation screen click the Finish button to generate your new offline project.
Your application named OpenSAPApp will be generated:
Highlight the Project node and click the Run button on the menu bar to launch the application.
In the Web IDE right click on the project node of the OfflineOpenSAPApp project and select Project
Settings.
In the Project Settings go to Device Configuration.
Set the App Name: OfflineOpenSAPApp
Set the App ID: com.sap.open (the application configuration you created on HCPms).
Enter the Version: 1.0.0
Select the Device Platform you will be running on (Android or iOS).
From the Cordova plugins select Debug Console and Network Connection.
From Kapsel plugins select Logon Manager and Offline OData.
Save your changes.
Open the devapp.js file found in the projects dev folder.
In the Application Contructor area find the var s definition. This is the line of code that defines the
defining requests that are used for creating the Offline Store. Comment out the var s line of code
which assumes the OData Service supports delta queries. Replace it with the var s line of code
shown below (copy it from the txt file associated with this exercise, copying from a PDF will result in
errors)
var s = "{"Products":"/Products?$expand=Supplier"}";
This line of code sets up the defining requests to load both Products and their related Suppliers with a
single defining request which is recommended when the backend doesnt support delta queries. Your
code should now look like the following:
Save your changes.

Thats it! You have completed the exercise!
Extra Credit: open file dev/devlogin.js and view the code. Locate the offline portions of the code. Find
the functions that create the offline store, flushes it, and refreshes it.
Solution
Explanation
1. Logon to your SAP Web IDE
Trial Account
Screenshot
2. Create a new Template

Project. File > New > Project
From Template.
3. Select Template: A SAPUI5

Master Detail Kapsel Offline
Application.
Click Next to start the Template
Wizard.
5. Enter the name of the of the

project: OfflineOpenSAPApp.
Click Next.
Explanation
6. On the Data Connection screen
select Service URL as your
Source.
Screenshot
Select your Northwind Simple

OData Service Connection.
Enter your OData Service URL
you have been using into the
Input Field. Make sure /V2 is in
the same position shown here in
the image to the right.
Click the
next tot he input
field. This will query the service
and display the service details.
7. On the Offline OData Entity
Collections step, select the
Products and Suppliers
collections as shown here:
8. On the Template
Customizations screen in the
Project Settings area enter the
Project Namespace:
com.sap.open.offline
9. In the Master Section enter the
following:
10. In the Main Data Fields area

enter the following:
Title
OData Collection
Search Placeholder
Search Tooltip
Search Field
Products
Products
Name
Enter Product Name
Name
Item Title
Numeric Attribute
Name
Price
Explanation
11. In the Detail Section area

enter the following:
12. In the Information Section

area enter the following:
Screenshot
Units Attribute
ID
Title
Product Details
Name
Description
OData Navigations
Navigations Attribute1
Supplier
Name
Address/City
Address/State
13. In the Create/Edit Section you

can select the Create Input Fields
for Key Properties checkbox. This
will generate some input fields for
the key fields.
Click the Next button to go to the
next step in the wizard.
10
Explanation
14. Click the Finish button to
complete the wizard and generate
your project.
Screenshot
Your application named

OpenSAPApp will be generated:
15. Highlight the Project node and

click the Run button on the menu
bar to launch the application.
14. A new browser tab will open

and will display your application.
11
Explanation
15. In the Web IDE right click on
the project node of the
OpenSAPApp project and select
Project Settings:
Screenshot
16. In the Project Settings go to

Device Configuration.
17. In the Application area set the

following:
App Name
App ID
Version
OfflineOpenSAPApp
com.sap.open
1.0.0
Notice that the App ID is still

com.sap.open
This is the app ID used to connect
to HCPms and we will reuse the
one already created there.
18. Scroll Down to the Platforms

area and select the platform(s)
you wish to support:
12
Explanation
Screenshot
19. Scroll Down to the Plugins

area and on the Cordova tab
select Debug Console plugin and
the Network Connection plugin:
Note: the Network Connection

plugin is used to check if the
device is online or offline.
20. In the Plugins area select the
Kapsel tab and select the Logon
Manager plugin and Offline OData
plugin:
Make sure that HANA Cloud

Platform mobiles services is
selected and the hostname points
to your trial HCPms server.
21. Save your Device

Configuration Settings.
Thats it! You have completed the
exercise!
22. Open the file devapp.js found

in the dev folder.
23. Find the line that initializes var

s.
This is the line that sets up the
defining requests for the offline
store.
13
Explanation
Since the OData Service we are
using doesnt support delta
queries, we are going to change it
to load the supplier data with a
$expand. So instead of having 2
defining requests (Products and
Suppliers), we will have one that
loads all Products and their
related Suppliers.
24. Comment out the var s = line
of code.
Screenshot
var s =
"{"Products":"/Products?$expand=Supplier"}";
Add the new var s = line of code

shown to the right (copy it from
the txt file associated with this
exercise, copying from a PDF will
result in errors)
Your code should now look like
the following:
25. Save your changes.
14
WEEK 5 UNIT 4
Exercise
Objective
In this exercise, you will use the SAP Hybrid Application Toolkit to deploy to build your Web IDE application
as a hybrid native application and run it on a device or emulator. You will then test the offline functionality of
the app.
Exercise Description
Uninstall the OpenSAPApp on your device. Both apps have the same app ID (com.sap.open), so as
far as the device knows, they are the same. So you should clear that app off the device before
proceeding.
Start the SAP Hybrid Application Toolkit (HAT).
o Open a Command Prompt / Terminal and change directory to your HAT installation folder.
o On Windows execute: run.cmd
o On OS X execute: run.sh
Logon to your SAP Web IDE trial account.
Right click on the OfflineOpenSAPApp project node and in the context menu select Run > Run on >
<Device/Simulator/Emulator>
This will start the process of building and deploying the app. It can take some time. Open the Console
on the Web IDE to view status updates. Web IDE menu path: View > Console
When the application is deployed to the Device/Emulator/Simulator it will be opened.
Logon to the app with your HCP Trial user and password.
Enter a passcode or disable it completely. Click Submit to display the initial application screen.
Note: to enforce entering a passcode, go to your HCPms application configuration and on the Client
Policies tab select the Enable Password Policy checkbox. And set any further password
configuration details.
The application will be displayed.
Note: it will take a few seconds to load the Offline Store DB, so the product list will be delayed during
this time.
Select a product in the list. Go into change mode for the product and change the description. Save the
changes.
Select another product. Delete it.
If you are using a device, turn airplane mode on. And see that you can still view and edit the data in
the app.
Make sure you turn airplane mode off if you are on a device and that you are connected back to the
network.
On the Product List view, click the flush/refresh button (bottom left hand corner). This will cause Offline
Store to be Flushed, if the flush is successful, the Refresh is called.
Please Note: the performance of this offline app will be poor due to the HCPms Trial landscape and
limited resource. Depending on use at the time, flushing and refreshing your offline store can take up
to 2 minutes (normally around the 1 minute mark, sometimes much less).
Once the flush/refresh is finished, go and call user OData Service Products entity set with a REST
Client and make sure the data has been changed there.
Thats it! You have completed the exercise of creating a secure online application!
15
Solution
Uninstall the OpenSAPApp on your device. Both apps have the same app ID (com.sap.open), so as far as
the device knows, they are the same. So you should clear that app off the device before proceeding.
Explanation
1. Start the SAP Hybrid
Application Toolkit (HAT).
Screenshot
Open a Command Prompt /

Terminal and change directory to
your HAT installation folder.
On Windows execute run.cmd.
On Mac execute run.sh.
You will need to enter your Key
Store password to start HAT.
2. Login to your SAP Web IDE.
16
Explanation
3. Right click on the
OfflineOpenSAPApp project node
and in the context menu select
Run > Run on >
<Device/Simulator/Emulator>
Screenshot
4. Android Only: you will need to

create a key for buildingselect
Test Key and click OK.
5. This will start the process of

building and deploying the app. It
can take some time. Open the
Console on the Web IDE to view
status updates. Web IDE menu
path: View > Console
17
Explanation
6. When the application is deploy
to the Device/Emulator/Simulator
it will be opened.
Screenshot
7. Logon to the app with your

HCP Trial user and password.
Click Register.
18
Explanation
Screenshot
8. Disable the Passcode or enter

a passcode, then click Submit.
Note: to enforce entering a
passcode, go to your HCPms
application configuration and on
the Client Policies tab select the
Enable Password Policy
checkbox. And set any further
password configuration details.
9. The initial application screen

will be displayed.
Note: it will take sometime to
initially load the offline db. During
this time a blank white screen will
be displayed (you could change
this to show a progress dialog of
course, this is just how this
application works).
19
Explanation
Navigate around the application.
Screenshot
20
Explanation
10. Select a product in the list. Go
into change mode for the product
and change the description. Save
the changes.
Screenshot
21
Explanation
11. Open select a product in the
list. Delete it.
Screenshot
22
Explanation
12. Back in the Product List view
notice that the changed product is
updated and the deleted products
are no longer in the list.
Screenshot
13. Go to a rest client and see if

the deleted/changed products in
your service are updated. They
shouldnt be because we havent
submitted the changes yet!
Issue a GET request to the Products entity set:

http://services.odata.org/<your_service>/Products
In my example the Fruit Punch product is still there but it was

deleted on the device.
23
Explanation
14. Submit the changes on the
device.
Screenshot
Please Note: the performance of

this offline app will be poor due to
the HCPms Trial landscape and
limited resource. Depending on
use at the time, flushing and
refreshing your offline store can
take up to 2 minutes (normally
around the 1 minute mark,
sometimes much less). You will
see the status bar displayed in the
second image shown below. The
startus bar will be removed when
the flush/refresh is finished.
24
Explanation
15. Once the flush/refresh is
finished. Execute the REST client
call to the Products entity set.
Ensure that your changes are
reflected there.
Screenshot
Thats it! You have completed the

exercise!
25
www.sap.com
2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form
or for any purpose without the express permission of SAP SE or an SAP
affiliate company.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark 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.

OpenSAP Mobile2 Week 5 Exercises

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenSAP Mobile2 Week 5 Exercises

Uploaded by

Copyright:

Available Formats

openSAP Developing Mobile Apps with SAP

HANA Cloud Platform

In the Main Data Fields area enter the following:

In the Detail Section area enter the following:

In the Information Section area enter the following:

Click the Next button.

Your application named OpenSAPApp will be generated:

Save your changes.

2. Create a new Template

3. Select Template: A SAPUI5

5. Enter the name of the of the

Select your Northwind Simple

10. In the Main Data Fields area

11. In the Detail Section area

12. In the Information Section

13. In the Create/Edit Section you

Your application named

15. Highlight the Project node and

14. A new browser tab will open

16. In the Project Settings go to

17. In the Application area set the

Notice that the App ID is still

18. Scroll Down to the Platforms

19. Scroll Down to the Plugins

Note: the Network Connection

Make sure that HANA Cloud

21. Save your Device

22. Open the file devapp.js found

23. Find the line that initializes var

Add the new var s = line of code

Open a Command Prompt /

4. Android Only: you will need to

5. This will start the process of

7. Logon to the app with your

8. Disable the Passcode or enter

9. The initial application screen

13. Go to a rest client and see if

Issue a GET request to the Products entity set:

In my example the Fruit Punch product is still there but it was

Please Note: the performance of

Thats it! You have completed the

2015 SAP SE or an SAP affiliate company. All rights reserved.

You might also like