MOB260 Exercise1

LEARN TO IMPLEMENT OFFLINE IN MOBILE
APPS
MOB260
Exercises / Solutions
Matt Borges, Milton Chandradas, Davinder Singh,
Midhun VP,Raca Jha, Chris Jobson, Wolfgang Scheer / SAP
SE
MOB260
TABLE OF CONTENTS
1 Before you start ..................................................................................................................................4
2 Preparations .......................................................................................................................................5
2.1 Start SAP Mobile Platform Server...................................................................................................5
2.2 Copy Files .......................................................................................................................................6
2.3 Open up Important Windows ..........................................................................................................8
2.4 Connect Android Device .................................................................................................................10
3 Application Setup ................................................................................................................................12
3.1 Setting up the Application ...............................................................................................................12
3.2 Try out the Application ....................................................................................................................15
4 Exercise #1 .........................................................................................................................................23
4.1 Exercise 1 .......................................................................................................................................23
5 Exercise #2 .........................................................................................................................................25
5.1 Exercise 2 .......................................................................................................................................25
5.2 Exercise 2 Device ...........................................................................................................................30
6 Exercise #3 .........................................................................................................................................33
6.1 Exercise 3 .......................................................................................................................................33
6.2 Exercise 3 Device ...........................................................................................................................40
7 Exercise #4 .........................................................................................................................................43
7.1 Exercise 4 .......................................................................................................................................43
7.2 Exercise 4 Device ...........................................................................................................................49
8 Exercise #5 .........................................................................................................................................53
8.1 Exercise 5 .......................................................................................................................................53
8.2 Exercise 5 Device ...........................................................................................................................59
9 Exercise #6 .........................................................................................................................................65
9.1 Exercise 6 .......................................................................................................................................65
9.2 Exercise 6 Device ...........................................................................................................................70
10 Exercise #7.........................................................................................................................................73
10.1 Exercise 7 .....................................................................................................................................73
10.2 Exercise 7 Device .........................................................................................................................85
2
MOB260
11 Exercise #8.........................................................................................................................................93
11.1 Exercise 8 .....................................................................................................................................93
11.2 Exercise 8 Device .........................................................................................................................98
3
MOB260
1 BEFORE YOU START

All the required code in the app has been written.
The exercises consist of uncommenting out blocks of code inbetween lines like:
Exercise #1: Uncomment block 1a - start

<code to uncomment>
Exercise #1: Uncomment block 1a - end
and commenting out code inbetween lines like:
Exercise #1: Comment block 1a - start

<code to uncomment>
Exercise #1: Comment block 1a - end
Most of the time, uncommenting code simple requires removing a "/*" and a
"*/". Most of the time, commenting out code simple requires adding a "/*" and
a "*/".
Each exercise also has one or more notes in the code that pinpoint some of
the more important pieces. These can be found by searching for "NOTE
#<Exercise>" (for example, "NOTE #1"). Read the notes while waiting for the
app to launch.
Chapter 1: Preparations
Estimated Duration: 5 minutes
Chapter 2: Application Setup

Chapter 3: Exercise #1

4
MOB260
2 PREPARATIONS
Overview
Estimated time: 5 minutes
Objective
In this unit you will learn how start the local SAP Mobile Platform Server, set up your
workspace and connect your device.
2.1 Start SAP Mobile Platform Server

Explanation Screenshot
1. Click
2. Double click .
3. Your screen should now look

like this as soon as the server
finished initializing.
5
MOB260
2.2 Copy Files

1. Click
.
2. Click on
with the right mouse button.
3. Click .
4. Click
.
5. Click with the right mouse

button inside you local
MOB260 folder.
6. Click .
7. Click on
with the right mouse button.
6
MOB260
8. Click
.
9. Click .
10. Now you can use the

cordova project.
7
MOB260
2.3 Open up Important Windows

1. The first window you should
constantly have opened is the
index.html in Notepad++.
The file is located in

D:\Files\Session\MOB260\mob
260_app\www.
If you closed it navigate to the

directory and right click on the
file .
2. In the context menu

click
.
3. The file is now opened. You

will need it often.
4. The second window you will

need often is the cordova
project in a command
prompt. Go
to
8
MOB260
5. Click somewhere in the
folder with the right mouse
button while holding down the
SHIFT key.
6. A context menu with the

option
will appear. Click on "Open

command window here".
7. A command prompt opened

with the cordova project path.
In there you can execute
cordova commands
corresponding to your project.
9
MOB260
2.4 Connect Android Device

1. Click .
2. Enter cmd in the search bar.
3. Click .
10
MOB260
4. Enter adb devices to check
if there are any devices already
connected.
5. Enter adb connect <IPv4 of

your device>:5555. You can
find it in the settings:
WLAN/Adavanced
6. Enter adb devices to check

if your device is ready.
7. The device is listed as

device. Now its ready to be
used for testing.
Summary
You have completed the exercise!
You are now able to:

Connect your device for debugging purposes
Set up your workspace
Start the local SMP Server
11
MOB260
3 APPLICATION SETUP
Overview
Objective
In the this unit you will learn how to set up the application, deploy it, and register with the
SMP server.
3.1 Setting up the Application

1. Open up a command prompt
or use the one opened in the
preparation section.
Enter ipconfig to see the

network configuration of your
pc.
2. Select the
IPv4 adress .
3. Now copy the formerly

selected.
Therefore click .
4. Click .
12
MOB260
5. Click .
6. Open up the index.html file

in Notepad++.
Now select the value of the

smpServerHost
variable .
7. Remove the old Value and

click on with the right
mouse button to paste the
formaly copied IPv4 adress.
8. Click
.
9. Now replace the vlaue of the

backEndUser with
your own user ID.
13
MOB260
10. Click to save your

changes.
11. Click .
12. Open up a command

prompt.
Enter cordova run android to

build the application and deploy
the application to the device.
13. Your screen should now

look like this.
14
MOB260
3.2 Try out the Application

1. Enter your password in
the field.
15
MOB260
2. Click to log in.
3. Press
to skip this step.
16
MOB260
4. Navigate some of the data to
see that you can follow
relationships.
The following steps are an

example:
Press .
5. Press
to see details of the customer.
17
MOB260
6. You can navigate back by
using the button.
7. Click .
8. Choose an item. E.g.:

.
18
MOB260
9. Click .
10. Press
The app will now do online

reads. You can again optionally
navigate some
of the data.
19
MOB260
11. Click
.
12. Click .
20
MOB260
13. Click .
14. Press
This is important because in

exercise #1 we will be changing
the defining requests.

look like this.
Summary

Set up the application
Deploy your app
21
MOB260
Register with the SMP server
22
MOB260
4 EXERCISE #1
Overview
Objective
In this exercise you will learn how to change defining requests so that relationships are
downloaded without using $expand.
4.1 Exercise 1
In this exercise the defining requests get modified so that all needed data and relationships
are fetched from the backend without using $expand.
in Notepad++. If you need help
performing that, take a look at
Open up Important Windows.
Uncomment the uncomment

section of exercise 1 by
removing .
2. Remove also the end of the

comment section .
3. Comment the comment

section of exercise 1 by adding
/* .
4. Make sure to close the

comment section again by
adding */.
23
MOB260

changes.

like this.
We will rerun the app after

completing the next exercise.
Summary

Modify the defining requests so that you can download relationships without using
$expand
24
MOB260
5 EXERCISE #2
Overview
Objective
In this exercise we will set the request format for the gateway backend and mark the
Products defining request as shared.
5.1 Exercise 2
1. Open up a Internet Explorer
window. Then enter the
following link:
https://localhost:8083/Admin/ .
You can also click the link
directly.
2. Click
in order to proceed.
3. Enter smpAdmin as user

name.
25
MOB260
4. Enter "Welcome16" as
password.
5. Click .
6. Click to
enter the application section.
26
MOB260
7. Click on the Application
ID .
8. Click on the tab.
9. Click to
import a .ini file.
10. Click to navigate

to the file.
27
MOB260
11. Go to
D:\Files\Session\MOB260\mob
260_app and select the .ini file
.
12. This is required before re-

running the app because it sets
the required request format to
use for the gateway backend.
This INI file also marks the
Products defining request as
shared.
Click to confirm
your selection.
13. Now open up your cordova

application folder
again in
order to start a command
prompt to execute your cordova
project.
14. Enter cordova run android

to build the application and
deploy the application to the
device.
28
MOB260
look like this.
Re-run the app with the

updated index.html. The offline
store will have to be
redownloaded so it may take a
few seconds.
Read all notes for exercise #1

in the code. (Yes exercise #1...)
29
MOB260
5.2 Exercise 2 Device

1. Navigate some of the data
as shown in the following steps.
Notice that despite removing

the expands all relationships
are still available offline.
Click .
2. Click .
3. Click .
30
MOB260
4. Click
5. Click .
31
MOB260
6. Click .
7.
You can still navigate and follow dependencies. But this
time the offline store was used.
Summary

Set the required request format to use for the gateway backend
Mark the Products defining request as shared
32
MOB260
6 EXERCISE #3
Overview
Objective
This exercise will show how to use client-driven paging in your application.
6.1 Exercise 3
Place the cursor at the top of

the index.html file.
Press CTRL + F on your

keyboard.
2. Click to find all

occurences of "Exercise #3".
You can also use the Find tab.
33
MOB260
3. Enter Exercise #3 in the text
field then press ENTER or use
the button "Find Next".
4. Uncomment the uncomment

section by removing .

comment section .
6. Find the next occurence by

pressing ENTER in the search
window.
34
MOB260

comment section .

window.
10. Uncomment the

uncomment section by
removing .
35
MOB260
window.

section by adding //.

window.

section by adding /*.

adding */.
36
MOB260
window.
17. Uncomment the

removing .

comment section .

window.
20. Uncomment the

removing .
37
MOB260
comment section .

window.
23. Now we finished changing

Now you can close the search

window by clicking .

changes.
25. Click and open up a

command prompt to execute
your cordova application.

device.
38
MOB260
look like this.

updated index.html.

in the code while waiting for the
app to start.
39
MOB260

1. Notice that the data is now
paged.
Click .
2. You can now navigate

through the pages.
Click .
40
MOB260
3. By altering the number in the
input field you can

change the number of items
per page.
4. In order to see the effect you

need to press
.

like this.
As you can see the number of
items per page is now 10.
41
MOB260
Summary

Use client-driven paging in your app
42
MOB260
7 EXERCISE #4
Overview
Objective
In this exercise you will learn how to use server-driven paging in your app.
7.1 Exercise 4


keyboard.
2. Enter Exercise #4 in the

text field.
43
MOB260
3. Click to
find the next occurrence.


comment section .
6. Click to
44
MOB260

comment section .
9. Click to
10. Uncomment the

removing .
11. Click
to find the
next occurrence.
45
MOB260
comment section .
13. Click
to find the
next occurrence.
14. Uncomment the

removing .
15. Click
to find the
next occurrence.
46
MOB260
16. Uncomment the
removing .
17. Click
to find the
next occurrence.
18. Uncomment the

removing .

comment section .


47
MOB260

changes.


device.

look like this.

app to launch.
48
MOB260

1. Select
2. Press to use
server-driven paging.
49
MOB260
3. Increase the number of items
per page to the total of existing
entries. In this case it is 39.
4. You need to
hit for the
change to take affect.
5. Because every item fits on

the first page there is no need
for a button to the next page.
6. Now
select
50
MOB260
7. Press to
see the changes.
8. Notice that with client-driven

paging the Next link still shows
up even though there is no
more data. This is because to
know we have read all the data
with client-driven paging would
require retrieving an inlinecount
or executing a $count query up
front, neither of which are
necessary with server-driven
paging.
Press .
9. Click .
51
MOB260
look like this.
Optional: Close the offline

store. Client driven paging also
works with online read
requests.
11. Optional: Close the offline

store. Client driven paging also
works with online read
requests.
Click
Summary

Use server-driven paging in your app
52
MOB260
8 EXERCISE #5
Overview
Objective
In this exercise you will learn how to enable the app to edit line items that were downloaded
from the backend.
8.1 Exercise 5


keyboard.

text field.
53
MOB260
3. Click to


comment section .
6. Click to
54
MOB260
8. Click to

comment section .
10. Click
to find the
next occurrence.
55
MOB260
11. Uncomment the
removing .

comment section .
13. Click
to find the
next occurrence.
14. Uncomment the

removing .

comment section .
56
MOB260
16. Click
to find the
next occurrence.



changes.


device.
57
MOB260
look like this.
Read all notes for exercise #5 in

the code while waiting for the
app to start.
58
MOB260

1. First choose a RANDOM
sales order. The remaining
steps show the exercise based
on selecting 0500000002.
2. Follow the line items link.
Click .
59
MOB260
3. Choose a RANDOM line
item. The remaining steps
show the exercise based on
selecting 0000000020.
4. On the details screen, press
60
MOB260
5. Edit the quantity.
6. Edit the note.
7. Click .
61
MOB260
8. Press to
navigate back.
9. Notice that the line item is

annotated with "*UPDATED*"
on both the detail
screen and the list screen.
Do a .
10. make sure there are no

errors (Extras->Check Errors).
Go to .
62
MOB260
11. Click .
12. If there is an error fix it by

re-editing the entity and
flushing again.
Click .
13. Click
14. Click
.
Notice that the line item is still

annotated with *UPDATED*.
This is because the refresh has
not occurred.
15. Click to update

the local store.
63
MOB260
16. To see the changes follow
the next steps:
Click .
17. Click
.

look like this.
Notice the entity is no longer

annotated with "*UPDATED*".
Summary

Edit line items that were downloaded from the backend
64
MOB260
9 EXERCISE #6
Overview
Objective
In this exercise you will see how to create a line item.
9.1 Exercise 6


keyboard.

text field.
65
MOB260
3. Click to

5. Click to

comment section .
66
MOB260
7. Click to


comment section .
10. Click
to find the
next occurrence.
67
MOB260
11. Uncomment the
removing .

comment section .
13. Click
to find the
next occurrence.


68
MOB260

changes.


device.

look like this.
Read all notes for exercise #6 in

the code while waiting for the
app to launch.
69
MOB260

1. Choose a RANDOM sales
order. The remaining steps
show the exercise based on
selecting 0500000003.
Click .
3. Click to create a
new line item.
70
MOB260
4. Enter the Quantity (positive
integer).
5. Enter a note.
6. Click .
71
MOB260
7. Notice that the line item is
annotated with
on both the detail screen and
the list screen.
Try to click on the new line item

on the list screen.
8. You will get an error. That's

because the app is currently
trying to use key values to
construct the URL but the key
doesn't exist.
Click .

like this.
Summary

Create line items
72
MOB260
10 EXERCISE #7
Overview
Objective
In this exercise you will see how to correctly use URLs returned from the SDK to read and
edit both locally created entities and ones that are downloaded from the backend.
10.1 Exercise 7


keyboard.

text field.
73
MOB260
3. Click to

5. Click to

7. Click to
74
MOB260

comment section .
10. Click
to find the
next occurrence.


adding */.
75
MOB260
13. Click
to find the
next occurrence.
14. Uncomment the

removing .

comment section .
16. Click
to find the
next occurrence.

76
MOB260
18. Click
to find the
next occurrence.
19. Uncomment the

removing .
20. Click
to find the
next occurrence.

22. Click
to find the
next occurrence.
77
MOB260
23. Uncomment the
removing .
24. Click
to find the
next occurrence.

26. Uncomment the

removing .
27. Click
to find the
next occurrence.

29. Uncomment the

removing .
78
MOB260
30. Click .


adding */.
33. Uncomment the

removing .

comment section .
35. Click
to find the
next occurrence.
79
MOB260
37. Uncomment the

removing .
38. Click
to find the
next occurrence.

40. Uncomment the

removing .
80
MOB260
41. Click
to find the
next occurrence.

43. Uncomment the

removing .
44. Click
to find the
next occurrence.
81
MOB260
46. Uncomment the

removing .
47. Click
to find the
next occurrence.

49. Uncomment the

removing .
50. Click
to find the
next occurrence.
82
MOB260
51. Uncomment the
removing .

comment section .
53. Click
to find the
next occurrence.



changes.

83
MOB260
device.

look like this.

updated index.html.

app to launch.
84
MOB260

1. First choose a RANDOM
sales order. The remaining
Click .
3. Choose a RANDOM line

item. This should not be
the line item you added in
exercise #6. The remaining
85
MOB260
4. On the details screen, press
86
MOB260
6. Edit the note.
7. Press .
Notice how you can update an

entity that has a real key (you
are updating an entity that was
downloaded from the server in
a refresh).
87
MOB260
8. Click .
9. Navigate to the details page

of the line item you created in
exercise #6.
Also notice how the

relationships to the sales order
and the product exist even
though the change has not
been flushed. The relationships
exist offline because a bind
operation to the Product was
used to relate the line item to
the product and a POST to
navigation property was used
to create the line item and
relate it to the sales order.
Click .
88
MOB260
10. Edit the line item you
created in Exercise #6.
Click .
89
MOB260
12. Edit the note.
13. Click .
Notice that you can now read

and edit both entities that were
downloaded from the server
and that were created locally
without any special code to
distinguish between server
keys and local keys.
14. Click .
15. Do a .
90
MOB260
16. Do a .
17. Click .
18. Click

look like this.
91
MOB260
Summary

Correctly use URLs returned from the SDK to read and edit both locally created
entities and ones that are downloaded from the backend
92
MOB260
11 EXERCISE #8
Overview
Objective
In this exercise you will learn how to create a new sales order and a new related line item
using Content-ID referencing in a change set (instead of a deep insert).
11.1 Exercise 8


keyboard.

text field.
93
MOB260
3. Click to

5. Click to
6. Click .
94
MOB260
7. Click to


comment section .
10. Uncomment the

removing .

comment section .
95
MOB260
12. Click
to find the
next occurrence.
13. Uncomment the

removing .

comment section .
15. Click
to find the
next occurrence.
96
MOB260


changes.


device.

look like this.

updated index.html.

app to launch.
97
MOB260

1. Create a new sales order.
Press .
2. Enter the quantity.
3. Add a note to the sales

order.
4. Click .
98
MOB260
5. Go to the new sales order
detail screen.
6. Notice that the sales order is

related to an existing customer
(business partner). This is
because the sales order was
POSTed to the navigation
property of the customer (the
business partner in the
metadata).
Click .
7. Click .
8. Notice that the sales order is

related to the new sales item.
This is because the line item
was POSTed to the navigation
property of the sales order
using a Content-ID reference.
Click .
99
MOB260
9. Click .
10. Click .
Notice that the sales item is

related to an existing product.
This is because the line item
was related to the product
using a bind operation.
11. Do a .
100
MOB260
12. Do a .
13. Click .

look like this.
Summary

Create a new sales order and a new related line item using Content-ID referencing in a
change set
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://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.
101

MOB260 Exercise1

Uploaded by

Document Information

Original Title

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

MOB260 Exercise1

Uploaded by

Copyright:

Available Formats

LEARN TO IMPLEMENT OFFLINE IN MOBILE

1 Before you start ..................................................................................................................................4

2.1 Start SAP Mobile Platform Server...................................................................................................5

2.2 Copy Files .......................................................................................................................................6

2.3 Open up Important Windows ..........................................................................................................8

2.4 Connect Android Device .................................................................................................................10

3 Application Setup ................................................................................................................................12

3.1 Setting up the Application ...............................................................................................................12

3.2 Try out the Application ....................................................................................................................15

4.1 Exercise 1 .......................................................................................................................................23

5.1 Exercise 2 .......................................................................................................................................25

5.2 Exercise 2 Device ...........................................................................................................................30

6.1 Exercise 3 .......................................................................................................................................33

6.2 Exercise 3 Device ...........................................................................................................................40

7.1 Exercise 4 .......................................................................................................................................43

7.2 Exercise 4 Device ...........................................................................................................................49

8.1 Exercise 5 .......................................................................................................................................53

8.2 Exercise 5 Device ...........................................................................................................................59

9.1 Exercise 6 .......................................................................................................................................65

9.2 Exercise 6 Device ...........................................................................................................................70

10.1 Exercise 7 .....................................................................................................................................73

10.2 Exercise 7 Device .........................................................................................................................85

11.1 Exercise 8 .....................................................................................................................................93

11.2 Exercise 8 Device .........................................................................................................................98

1 BEFORE YOU START

Exercise #1: Uncomment block 1a - start

and commenting out code inbetween lines like:

Exercise #1: Comment block 1a - start

Chapter 2: Application Setup

Chapter 10: Exercise #8

2.1 Start SAP Mobile Platform Server

3. Your screen should now look

2.2 Copy Files

5. Click with the right mouse

10. Now you can use the

2.3 Open up Important Windows

The file is located in

If you closed it navigate to the

2. In the context menu

3. The file is now opened. You

4. The second window you will

6. A context menu with the

will appear. Click on "Open

7. A command prompt opened

2.4 Connect Android Device

2. Enter cmd in the search bar.

5. Enter adb connect <IPv4 of

6. Enter adb devices to check

7. The device is listed as

You are now able to:

3.1 Setting up the Application

Enter ipconfig to see the

3. Now copy the formerly

6. Open up the index.html file

Now select the value of the

7. Remove the old Value and

9. Now replace the vlaue of the

10. Click to save your

12. Open up a command

Enter cordova run android to

13. Your screen should now

3.2 Try out the Application

2. Click to log in.