https://blogs.sap.

com/2013/04/02/my-journey-creating-a-sapui5-mobile-app-at-home-part-i/

My journey creating a SAPUI5 mobile app at home [Part I]

April 2, 2013 | 150 Views |

Nicolas Busson

more by this author

SAP Mobile Platform
MobileSAP Gateway beginnerdeveloperMobilesap mobile platformsap netweaver gatewaysmp

share 0
share 0
tweet
share 0
like0

Follow

Make sure your phone can access SAP Gateway

All over SCN you can find a huge amount of content describing how to create very cool mobile apps in less
than 5 minutes, or even 25 seconds:

Developing SAP Android Apps is Just a Few Clicks Away

Developing SAP iOS Apps Its Simpler Than You Think!
So I wanted to give it a try myself and see how it goes. Here is the first part of my story (also known as How-
to create a simple mobile app for newbies):
Part I: Make sure your phone can access SAP Gateway
Part II: Create your first service with SAP Gateway
Part III: Develop your mobile app on Eclipse
Part IV: Test your mobile app on your phone
Part V: Troubleshooting and finally make it work!
Useful links:
Step by Step Installation Guide for SAP NetWeaver AS ABAP 7.02 SP6 32-bit Trial Version
Licensing Sneak Preview SAP NetWeaver 04 ABAP Edition

Starting point
Im a SAP CRM functional consultant (hence the serie for dummies), highly interested in the dark side,
a.k.a technical development. So Ive already downloaded and installed The specified item was not found. on a
virtual machine running Windows 7 64Bits using VirtualBox. This allows me to create any VM I need, scratch
them and come back with a fresh install in a second. But until now, I never used the Gateway capacity of my
Netweaver installation (my virtual machines were not even visible on my network, and didnt have any access
to the Internet as I used the Loopback Adapter technique). So to be able to communicate between my mobile
phone and my VM where SAP Gateway was running, the first thing I had to do was to adapt my VM
settings

1
Step 1: make your VM visible on the network
Go to your VM settings, click on the Network tab, mark the Enable Network Adapter and select the
Bridged Adapter as shown in the picture below :

Step 2: assign a static IP address to your VM

It will make your life a lot easier if your SAP system is always accessible from the same IP address. So go to
your router configuration, and use the MAC Address provided in the previous picture to assign any IP address
you like. In my case I chose 192.168.0.9. Remark: If you live in France and use Free as Internet access
provider, you can follow this link to configure the same: http://mafreebox.free.fr >> Rseau local >> Serveur
DHCP >> Baux statiques :

Step 3: configure your VMs network

connection
Start your VM and logon with user sapadm as you usually do. The system should now find a new network card
and a popup will ask you to configure your network connection. Select Home network:

2
Click Next until the end and close the popup (you can cancel the step where youre asked to enter a
password to join Workgroup domain).

Then go to Network and Sharing center from the control panel. Disable any other network connection (in my
case it was the loopback adapter). For this, first click on the Local Area Connection as shown in the picture
below:

In the popup that will come up, click the Disable button:

This network connection should no longer appear in the list.

3
 Now edit your host file located in C:\Windows\System32\drivers\etc to add those last 2 lines (of course youll
have to change 192.168.0.9 so that it corresponds to the IP address you chose at step 2):

Save and close the host file.

Try and start your SAP system via sapmmc: everything should work as before, and if you start Internet
Explorer from within your VM, you should have access to the Internet. If youre facing issues starting your
SAP instance (youre stuck with an orange light in your sapmmc console for example), try to shutdown and
reboot your VM. It should work.

Conclusion
It took me approx. 20 minutes to get everything ready, although I already had a SAP Netweaver ABAP trial
with SAP Gateway up and running that I used to develop many projects available on code exchange Lets
see what will come up with the next steps: go to Part II.

My journey creating a SAPUI5 mobile app at home [Part II]

April 2, 2013 | 169 Views |

Nicolas Busson

more by this author

SAP Mobile Platform
MobileSAP Gateway beginnerdeveloperMobilesap mobile platformsap netweaver gatewaysmp

share 0
share 0
tweet
share 0
like0

Follow

Create your first service with SAP Gateway 2.0

SP4
Here is the second part of my journey (also known as How-to create a simple mobile app for newbies):
Part I: Make sure your phone can access SAP Gateway

4
Part II: Create your first service with SAP Gateway
Part III: Develop your mobile app on Eclipse
Part IV: Test your mobile app on your phone
Part V: Troubleshooting and finally make it work!
Useful links:
New E2E Tutorial: Gain Hands-on Developer Experience with SAPUI5 and SAP NetWeaver Gateway
Gateway Service Builder (SEGW) with a focus on DDIC Importer

Step 1: activate SAP Gateway

Start tcode SPRO and click the following IMG to activate SAP Gateway:

A popup will be shown where you have to click the Activate button.
Then click the Manage SAP system aliases as shown below:

Add the following entry and save:

Start tcode SICF and activate service Default_Host/sap/opu and all its subnodes:

5
Step 2: create a new project
Start tcode SEGW and click the New button to create a new project which will hold our brand new service
dedicated to read business partner data (I created everything as local objects because obviously on my own PC
I do not intend to transport anything, but remember to enter a correct package on a real development
system):

Right click the Data Model Node and select Import >> DDIC Structure

6
In the next screen, select structure BUT000, flag checkbox As entity type and press Enter (if you do not
press enter at this point in time, the system will overwrite the name of the entity and give it the name of the
structure). Now fill in the name Partner and select the components you want. On my system I marked every
component with usage Ignore except the following ones:

Now double click on the node named Entity Set, and add the following entry:

Save and generate your service:

Step 2: fix any generation error

7
If you selected exactly the same components as I did, the system will probably throw the following error
during generation:

In fact, the name of my entity was the same as one of its component which seems to be forbidden. So lets
fix it by double clicking on the Properties subnode of our Partner entity, and rename component Partner
to PartnerNo:

Save and activate again.

If other issues are thrown, try to fix them accordingly.

Step 3: add some code to retrieve partner data

Now expand Service Implementation Node, and right click the GetEntitySet node to select Go to
implementation as shown below:

Ignore the popup that is telling you no implementation was found.

Redefine method PARTNERSET_GET_ENTITYSET (do not change it directly, otherwise your code will be
lost with next generation of the service):

8
To keep things very simple, I decided to return every entry found in BUT000 table (in my case this is a
sandbox system so this table contains only 2 entries):

Now redefine method PARTNERSET_GET_ENTITY. As far as Im concerned I used the same KISS
principle as above:

Save and activate everything.

Step 4: activate and test your service

Go to the SPRO and select the following IMG:

9
Click the Add service button

Fill-in the required information to retrieve your service and select its technical name:

In the popup that is displayed you do not have to change any value. Just fill in a package name:

10
Come back to the previous screen: you should now see your Z_Partner service. Click the Call browser
button to test it:

If everything goes as expected, you should see something like this (meaning the service is up and running):

11
Step 5: troubleshooting
OK nice, our service seems to work fine. But is it?

If you try to start the following URL, you should see a list of business partners:
http://<host>:<port>/sap/opu/odata/sap/Z_PARTNER_SRV_SRV/PartnerSet
But instead of the expected list, youll probably face an HTTP 500 error page:

In my case that was happening because I selected components CHDAT and CHTIM when I created the
Partner entity Unfortunately if those fields are left blank in the database, the service is throwing an
exception at some point in the program. So I expected this to be a bug in the software and searched for OSS
notes. [Update: thanks to Sebastien BENOIT who added a comment below, I now know that I should have
marked the checkbox nullable in the entity types properties to tell the system that this exception could be
ignored].
However, as I couldnt find any patch, I tried to simply remove those components from my service definition
by clicking the delete button (tcode SEGW >> Data Model >> Entity Types >> Partner >> Properties) :

12
 I saved and activated my service again.
But the problem still remained so I analyzed the service metadata via the following URL:

http://<host>:<port>/sap/opu/odata/sap/Z_PARTNER_SRV_SRV/$metadata
I realized that even though those components were successfully removed via tcode SEGW, they were still there
in the service definition So I suspected another bug in the software. [Update: to regenerate your service
after a change, it seems that you need first to delete the assignment to a system, then delete the service itself,
only then will your changes be taken into account]
Again, I couldnt find any notes, and I didnt know how to change the service metadata manually, so instead of
creating a new service from scratch again, I opened all business partners created in my system (they were only
2) to change of one their properties. After saving my modifications, fields CHDAT and CHTIM were no
longer empty in the database and the service was working smoothly:

Conclusion
It took me approx. 4 hours to reach this point where I finally have a Gateway service up and running on my
laptop Lets see if I can create a mobile app consuming that service now: go to Part III.
My journey creating a SAPUI5 mobile app at home [Part III]
April 3, 2013 | 169 Views |

Nicolas Busson

more by this author

SAP Mobile Platform
MobileSAP Gateway beginnerdeveloperMobilesap mobile platformsap netweaver gatewaysmp

share
share
tweet

13
 share
like0

Follow

Develop your mobile app on Eclipse

Here is the third part of my journey (also known as How-to create a simple mobile app for newbies):
Part I: Make sure your phone can access SAP Gateway
Part II: Create your first service with SAP Gateway
Part III: Develop your mobile app on Eclipse
Part IV: Test your mobile app on your phone
Part V: Troubleshooting and finally make it work!
Useful links:
Consume NetWeaver Gateway services via SAPUI5 Part 1
End-to-End How-to Guide: Building SAPUI5 Applications Consuming Gateway OData Services
How to Write Online Mobile Apps Consuming SAP Back End Systems

Step 1: Install Eclipse

As mentioned in Part I of this blog series, Im more a functional consultant, so not familiar with Eclipse at all.
And it took me a while to understand that I wouldnt be able to create my application via SAP Netweaver
workbench like Im used to (nowadays with SAP CRM7.01 its a matter of 4 clicks to create a complete BSP
application based on a GENIL model)
Then I realized that Eclipse is delivered through myriads of flavors and you have to pick up one of them.

But as in the end Im planning to use SAPUI5 to develop my application (because they say its cool), I
chose Eclipse IDE for Java EE Developers as mentioned in the corresponding installation guide (after wasting
my time on a few other versions, of course). By the way it is also mentioned in the very same document that
Java Runtime Environment 1.6 should also be installed.
Thats why I ran through those steps:

1. Download and Install the java runtime environment (version 6 = 1.6?) jre-6u43-windows-
x64.exe (16,4 Mo)
2. Download eclipse-jee-juno-SR2-win32-x86_64.zip (228 Mo)
3. Extract content of eclipse-jee-juno-SR2-win32-x86_64.zip to C:\
(apparently Eclipse is ready to go without the need for any further installation)

Step 2: Install SAP plug-ins for Eclipse

As far as I understand you have many options to develop mobile applications, but the first choice you have to
make is whether youre willing to create native apps or web apps. I decided to go for web apps to make it
easier to distribute among many device types. And I wanted to test SAPUI5, so I ran through the following
steps:

1. Download UI Development toolkit for HTML5 (I found this link in the second comment of
blog SAPUI5 version 1.8 is available but I guess for a production use you should always download
the latest version from SMP, see Note 1747308 Installation Guide UI development toolkit for
HTML5 (SAPUI5))
2. Extract content to C:\sapui5
3. Open Eclipse (I let the system choose the default workspace location)
4. Go to Help >> Install new software

14
 5. Click on Add >> Local >> C:\sapui5\tools-updatesite. Select everything displayed as below:

6. Click Next, accept Terms of use, then Finish.

7. Click OK for all security warning, and restart Eclipse.

At this stage I was able to create a very simple Hello World application using SAPUI5 libraries following
this article:How to Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development
Tool. However, in order to benefit from some wizards related to SAP Gateway when creating my a-little-
more-complex application (to search for existing services for example, let the system generate views for me,
etc.) I installed SAP Netweaver Gateway Plug-in for Eclipse too:

1. Download SAP NetWeaver Gateway plug-in for Eclipse (7,88 MB)

2. Copy the zip file to C:\sapui5
3. Open Eclipse and go to Help >> Install new software
4. Click on Add >> Archive >> C:\sapui5\SAPNetWeaverGatewayPluginForEclipse_2.6.400.zip. Select
items as follows:

5. Click Next, accept Terms of use, then Finish.

6. Click OK for all security warning, and restart Eclipse.
7. Then go to Window >> Preferences >> SAP Netweaver Gateway >> Connection
8. Click the Add button and fill-in the relevant connection settings (I unflagged the Use HTTPS
checkbox in order not to maintain any certificate stuff):

Step 3: Create your SAPUI5 mobile app

15
Select NEW >> Other to be presented the following popup where you can choose SAP Netweaver Gateway
>> Starter Application Project:

Then follow the wizard to give your project a name, a type (HTML5), a template (List/Detail based on
SAPUI5).

Click the Catalog button to search for the Gateway service created in Part II.

And if you followed exactly the same steps as mine, youll be facing this error There are no addressable
collections in the service:

Step 4: troubleshooting
It is not possible to complete the wizard without solving the above problem. So after some research, I found
out that when creating your entity set (see Part II step 2), you should flag the Addressable checkbox. But,
when I did this and tried to re-generate my service, I faced the exact same issue as in Part II step 5: the system
kept telling me that everything was correctly generated, but nothing was changed at all (Im wondering if this
is because Im creating LOCAL objects I dont know really). [Update: Sebastien BENOIT added a
comment to part II of this blog series explaining that to regenerate your service after a change, you need
first to delete the assignment to a system, then delete the service itself, only then will your changes be taken
into account so thats worth giving it a try instead of recreating the service from scratch like I did below]
The problem is: this time I couldnt find any workaround (deleting the generated classes to force the system to
create new ones seems to have no effect), so I had to create a new service from scratch. And to avoid any more
surprises (even if the Addressable flag is probably the only one missing) I flagged almost every checkboxes:

16
I saved my new service, activated it, etc. (see Part II step 3 and 4).
Once done, I was able to complete the Eclipses wizard in order to create my SAPUI5 mobile app with two
views:

However I couldnt test it: when selecting the index.html page that had been generated for me, and choosing
Run as >> Web App Preview in the context menu, only a blank page was displayed. I spent a lot of time
trying to understand the reason behind this failure. In the end I gave up. As far as I understand, this problem
could be related to some Cross-domain-origin policy and you need to install/configure a reverse proxy to
by-pass this limitation (which is above my current skills). So lets cross our fingers and see if we can still
deploy this app on our mobile, and use it.

Conclusion
When you dont know anything about the Eclipse world it is not that easy to come up and build your first
app and even after a few tries and errors I wasnt able to figure out how to test my application (I spent an
entire day trying to understand what was wrong). And now Im crossing every fingers hoping that this mobile
app will work once it is installed on my own phone (an old HTC Desire running Android 2.3). Go to Part IV.

17