Skip to Content

Troubleshooting… and finally make it work!

Here is the fifth 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:

http://developer.android.com/sdk/installing/installing-adt.html

http://ant.apache.org/bindownload.cgi

http://phonegap.com/download

http://simonmacdonald.blogspot.ca/2012/11/getting-create-command-to-work-on.html

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

Step1: fix your application

In my last blog post I showed how to adapt the HTML code of the index.html file of your application so it will load correctly in preview mode within Eclipse… but unfortunately that was not enough for being able to have the same result on my phone. I had to copy the “resources” folder from the SAPUI5 toolkit into the “WebContent” repository of my application. So here is what I’ve done:

  1. Go to the folder where I initially downloaded the UI Development toolkit for HTML5 (see Part III – Step 2)
  2. Extract the file sapui5-static.zip into C:\sapui5
  3. Drag and drop folder C:\sapui5\sapui5-static\resources into Eclipse inside the “WebContent” folder

The problem is: this “resources” folder is quite heavy (80Mo). So my virtual machine didn’t support it and Eclipse kept crashing all the time. So I managed (via debugging) to extract only the files that I really needed — and those files only — before droping this folder into Eclipse. If you’re having the same problem, you can give it a try (I’ll explain how to debug later on) but be cautious: if you’re deleting one of the files that are actually used, then you’ll probably get a blank page when starting your application from your phone without any details on why it happened, nor how to fix it… so if you’re following this blog series, I can send you my light “resources” folder (1,83Mo) instead.

Also, there seems to be a bug in the SAP Netweaver Gateway Plug-in for Eclipse that we installed in Part III – Step 2. On my computer the wizard that I used to build this application created a controller for the list view with an incorrect value line 76:

/wp-content/uploads/2013/04/1_202300.jpg

There is a missing slash character. So do remember that this line has to be converted into something like this (you’ll find the relevant file in “WebContent >> <appname> >> resources >> <listview>.controller.js”) before you can actually see any value in the table:

/wp-content/uploads/2013/04/1_202300.jpg

One last thing: when running on your phone, this application won’t display any popup to enter a user/password to connect to your SAP backend system. So you’ll need to provide the credentials in the very same file to avoid connection issues (see <listview>.controller.js, line 12):

/wp-content/uploads/2013/04/1_202479.png

Step 2: test your application within Eclipse

Before trying to install our brand new application on our phone, let’s test it with “real” data coming from the backend first. As you may have noticed, until now the table displayed within the HTML5 application is always empty although valid data exists in the backend. This is due to some security restrictions within the web browsers… but there is a small trick that we can use to by-pass this limitation:

  1. Open the file “WebContent >> <appname> >> resources >> utils >> connectivity.js”:
    /wp-content/uploads/2013/04/1_202300.jpg
  2. Change the URL “http://<something>” into “proxy/http/<something>” like I did below (I commented the original line and created a new one to be able to switch between the two very easily):
    /wp-content/uploads/2013/04/1_202300.jpg

Now start the preview mode… And enjoy!

Step 3: install this application on your phone

If you’re lucky, you can now run through step 2 & 3 of Part IV, and off you go with a nice mobile application working on your phone and connected to your home-made SAP Netweaver Gateway system (don’t forget to set the URL back to its initial value — i.e. without the “proxy” prefix — in the file named “connectivity.js”, and mind your firewall settings on your machine).

But that’s not me… I couldn’t make it work. Every “.apk” (it’s the type of file we use for Android) created with PhoneGap Build wouldn’t work on my phone: either I got a blank page or the application couldn’t be installed at all. And even if this service is free and very convenient, I was experiencing a big drawback: you have no possibility to understand what’s wrong when something goes wrong. So I had to go for the “hardcore” method described below.

Step 4 (optional): learn how to debug your app!

This section is intended to put some light on how to install/debug your application the old fashion way. Basically, we need to install “native-application” tools in our Eclipse environment to be able to debug. As far as I’m concerned I’ve got both a laptop running Windows 7 64bits, and an Android phone: so the following steps will reflect what needs to be installed for my own situation. I believe this shouldn’t differ too much if you’re running Mac OS and an Iphone: adapt it according to your needs. And it’salso worth mentioning that I didn’t follow the installation instructions from Android website on purpose because their method was less straightforward than this one:

  1. Open Eclipse and select Help >> Install new software
  2. Insert https://dl-ssl.google.com/android/eclipse/ into field “work with…”  and press ENTER
  3. Select “Developer Tools”
  4. Click Next, accept Terms of use, then Finish
  5. Click OK for all security warning, and restart Eclipse
  6. Close the abort popup that says “Location of the Android SDK has not been setup in the preference”.
  7. Install the Android SDK from the second popup just behind the previous one (I flagged Android 2.2 to avoid any compatibility issues with my phone):/wp-content/uploads/2013/04/1_202479.png
  8. Finish the SDK installation process (accept license, etc.).
  9. Download and install jdk-7u17-windows-x64.exe (I chose not to install the JRE).
  10. Download and extract apache-ant-1.9.0-bin.zip to C:\ant
  11. Download and extract phonegap-2.5.0.zip to C:\phonegap
  12. Add the following entry to your PATH system variable: “;C:\Users\sapadm\android-sdks\tools;C:\Users\sapadm\android-sdks\platform-tools;C:\Program Files\Java\jdk1.7.0_17\bin;C:\ant\bin”
  13. Make sure your JAVA_HOME system variable points to JDK7: “C:\Program Files\Java\jdk1.7.0_17”
  14. Start a command line inside the PhoneGap >> lib >> Android >> bin folder and enter this command to create an empty application:
    create C:\MyApp dev.home MyApp
  15. Open Eclipse. Choose File >> New >> Other >> Android >> Android project from existing code >> Select folder C:\MyApp and finish.
  16. Copy the files from previous application (directory “WebContent”) into folder assets >> www
  17. Fix any error regarding the file AndroidManifest.xml (might need to delete a couple of tag’ attributes).
  18. Add line “<script src=”cordova-2.5.0.js”></script>” into index.html.

That’s it. You might face some issues with Eclipse (mine freezed a few times). But if you successfully reached this point you are now ready to test/install/debug the android application either on a simulator, or on a real phone (need to activate debugging). Important remark: if you’re working inside a virtual machine (like I did), the latter might not work because of a known issue in VirtualBox… so either use a non-virtualized installation, or see what happens on the simulator only:

/wp-content/uploads/2013/04/1_202479.png

Conclusion

I spent definitely more than 5 minutes to finally create a mobile application that I can use on my phone 😉

But within five days I could both make it work and take some time to note down my progress throughout this blog series… so I don’t think that’s much considering I had never seen Eclipse before. And it was worth the effort! All in all my biggest mistake was to try  “the lazy way” with PhoneGap Build Service… I wasted a lot of time trying to make it work, while the problem doesn’t seem to come from my application, but from the service itself (the application runs fine when I install it from Eclipse the “hardcore” way).

Enough writing: now I’m ready to play.

To report this post you need to login first.

40 Comments

You must be Logged on to comment or reply to a post.

    1. Nicolas Busson Post author

      Thanks Graham!

      I know your learned a lot of stuff here…

      😆

      But who knows? with more practice I might post an answer regarding vizcharts events soon 😉

      Cheers,

      Nick.

      (0) 
  1. Andy Silvey

    Hi Nicolas,

    congratulations, you got to the end of the journey and blogged it all 🙂

    What’s the next challenge ?

    All the best,

    Andy.

    (0) 
  2. Steffen Froehlich

    Hi Nicolas,

    great tutorial, which shows some interesting bugs or issues when starting with UI5 and Eclipse!

    Regarding the service url I can recommend you to use SimpleProxyServlet like it’s shown in this PDF (http://scn.sap.com/community/developer-center/front-end/blog/2012/12/10/new-e2e-tutorial-gain-hands-on-developer-experience-with-sapui5-and-netweaver-gateway) – start at page 43

    That will solve some problems while testing locally.

    Steffen

    (0) 
    1. Nicolas Busson Post author

      Hi Steffen,

      Thanks but actually this End-to-End guide was my starting point (as you can see I mentioned it in the “useful links” section in part II and part III). So regarding local testing:

      1) I wanted to make things as simple as possible (no need to create a GET_URL() method in my case)

      2) And when I copied/pasted the sample lines of code from this cookbook, it didn’t work…

      Anyway, I should probably have mentioned that adding the “proxy” prefix was just a “quick and dirty” workaround for local testing intended to lazy people like me 😉

      Cheers,

      Nicolas.

      (0) 
  3. Trond Stroemme

    Nice blog series, thanks a lot!

    I find the current UI5 offering from SAP to be both complex and somewhat confusing, unless you’re from the non-SAP developer world and used to working with lots of little bits and pieces to make things work, much like going to Ikea and then having to spend hours assembling your new stuff…

    I have recently worked with the third-party tool NAD from Neptune Software, which is a far easier way of creating html5 UI’s and mobile apps. This development tool is directly integrated into the SAPgui (as an add-on) and allows you to drag-and-drop html5 elements to create UI’s for all devices. The tool uses Phonegap for hybrid deployment.

    For me as an ABAP’er this is far more intuitive and easy to use than messing with manual Javascripts, libraries, messy html5 templates and the whole Eclipse environment… I’ve decided to re-activate my presence on the SCN and write a blog of my own to present how to really write a mobile app in 5 minutes!

    Anyway, great work. I’m teaching myself UI5 as well, just in case 🙂

    Regards,

    Trond

    (0) 
    1. Nicolas Busson Post author

      Hi Trond,

      Thank you very much for your comment… and I cannot agree more about Eclipse. But SAP seems to be working on a more “user friendly” tool to create HTML5 app (something that will be very similar to the NAD software you mentioned I suppose):

      http://scn.sap.com/community/developer-center/cloud-platform/blog/2013/02/26/mobile-development-sap–a-glimpse-of-the-near-future

      I guess it will be worth giving it a try when it’s released.

      Regards,

      Nicolas.

      (0) 
    2. Andy Silvey

      Hi Trond,

      it is great to see you coming out of self imposed exile 🙂

      The new SCN is really really good, the fluidity of activity changes the whole User experience compared to the old one.

      I look forward to your blog.

      All the best,

      Andy.

      (0) 
    3. Andreas Kunz

      Hi Trond,

      you bring up a good point: SAPUI5 is currently really targeting more the vast number of outside developers with standard web development and JS library usage skills.

      So for ABAP developers not familiar with this kind of development the learning curve is clearly steeper.

      Of course with a WYSIWYG tool where you just drag your UI together you reach a result quicker and easier. Maybe you remember SAP’s Visual Composer which partly promoted even almost code-free development. Such environments, however, are often proprietary and difficult to extend and it is hard or impossible to tweak the application to the last pixel to make it perfect. So the UI5 strategy is rather to use as much Open Source and standards as possible and leave the developers all kinds of freedom.

      I totally agree that this requires more web development knowledge and more coding, so it is clear that UI5 adds more RAD/WYSIWYG capabilities to make development more efficient and easier. But at the same time I find it important that this does not restrict openness and the coding freedom of developers if they choose to make use of it.

      Regards

      Andreas

      (0) 
  4. Arpit Oberoi

    Hello Nicolas,

    First of all thanks for wonderful blog. I have recently been trying out various SAP mobility applications. I have downloaded and installed/configured ( I guess ) SAP Netweaver gateway “SAP NetWeaver ABAP Trial 7.02 SP11 Win 64 bit Version with Gateway 2.0 SP04 ” as mentioned in the below mentioned in this blog.

    http://scn.sap.com/community/netweaver-gateway/blog/2012/05/16/now-available-sap-netweaver-abap-trial-702-sp11-win-64-bit-version-with-sap-netweaver-gateway-20-sp3

    I have installed this system on windows 7 which is a virtual machine running in VM Fusion on a mac system.

    I tried to create and test the application using SAP Netweaver Gateway Trial version which I have mentioned above. I was able to explore the services of SAP Netweaver Gateway system and was able to create the application but when I tried to run the application, I got the following error in IOS simulator:

    “ERROR: Exception during parsing response data. Error: The document is not a valid data document”.

    Although it might sound that my question is related to IOS platform, but I think it has got more to do with SAP Netweaver Gateway trial version setting, I can understand if you would rather not want to look into this matter.

    So to investigate the matter, I tried the hyperlink “http://host(hidden ip for obvious reason):8000/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/?$format=xml“

    and I was able to see the xml document in the browser. However when I tried the hyperlink http://host(hidden ip for obvious reason):8000/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/BookingCollection

    It displayed me error ‘

    /IWFND/CM_MGW/001 which says ‘The RFC call was not successful because of communication failure, Error sending RFC logon data’.

    Also, I tried to test the service using transaction /IWFND/GW_CLIENT for the same service with HTTP ‘get’ method and it came back with status code ‘500’ and text ‘internal server error’ and same error ‘The RFC call was not successful because of communication failure, Error sending RFC logon data’.

    I have read a lot of configuration/set up guides for SAP Netweaver gateway and they all suggest to create an RFC connection to SAP back end system/SAP business system’ but in my case there is no ‘SAP back end system’ as gateway is installed in SAP system itself. Could you please let me know what I am missing?

    Thanks,

    Arpit

    (0) 
    1. Nicolas Busson Post author

      Hi Arpit,

      Did you check the system alias in tcode /IWFND/MAINT_SERVICE ? In your case you should have LOCAL (see part II of this blog series) mentioned there.

      (0) 
      1. Arpit Oberoi

        Hello Nicolas,

        Thanks for your prompt reply. I really appreciate that and yes I did create system alias in tcode /IWFND/MAINT_SERVICE as Local and also under SPRO->SAPNETWEAVER->Gateway->ODATA CHANNEL->Conifguration->connection settings->manage sap system aliases, I tried all the options that mapping SAP system alias pointing to RFC destination ‘NONE’ and also ticking the box ‘Local GW’. But nothing works.

        (0) 
        1. Nicolas Busson Post author

          Hi Arpit,

          I’m sorry but I’m out of advice here… The only thing I can say is that on my system method GET_SYSTEM_ALIAS_INFO from class /IWFND/CL_DESTIN_FINDER is called just before trying to retrieve the entityset. So I guess it would be a good starting point to set a breakpoint in there and see what’s going wrong. May you please give it a try and give us the results?

          Also it would be a good idea to open a discussion thread instead of adding comments to this blog, so we can further discuss this issue without sending notifications to people that are following this post.

          Thanks & regards,

          Nicolas.

          (0) 
  5. Andreas Kunz

    Thanks for the great blog series!

    Regarding  “The problem is: this “resources” folder is quite heavy (80Mo).”:

    Yes, this huge archive is containing everything, demo pages, unit tests,… not what you want to deploy within a hybrid mobile app.

    Look out for the next SCN version of SAPUI5 (1.12, due in few days), it will contain a specific archive for such hybrid apps which is stripped down to the necessary files. And there will be instructions how to further optimize the size. Sorry for not including this earlier…

    Regards

    Andreas

    (0) 
    1. Nicolas Busson Post author

      Hi Andreas,

      Thanks you very much for taking time to share this piece of information about an upcoming release optimized for mobile development soon! And there is really nothing to be sorry about: as you can see in one of my previous blog post, you’re definitely the one that helped me the most thanks to your valuable inputs in the discussion forums, like this one: http://scn.sap.com/thread/3287821

      So thank YOU.

      Cheers,

      Nicolas.

      (0) 
  6. harshal gandhe

    Hi Nicolas,

    It’s about the resource folder.

    M using 1.12.1 plugin.

    In this plugin resource folder is over 100 mb’s.

    So i went through Andreas Kunz blog and went through all steps. now my resource folder is of 30 Mb which i think is still too big.

    Your help will be appreciated.

    (0) 
    1. Nicolas Busson Post author

      Hi Harshal,

      My light “resources” folder is available as a zip file here:

      http://www.nb-conseil.com/public/SAPUI5/resources.zip

      This is all I needed to create a simple Android application to showcase every SAPUI5 control from the mobile library… but if you want to reproduce the exact same example of this blog series, I can send you an even lighter package.

      Cheers,

      Nicolas.

      PS: note that I’m using version SAPUI5 1.8

      PS2: I’ve just downloaded SAPUI5 1.12.1, and the resource folder of the mobile library seems to be only 12Mo… so I’d rather use it instead of mine.

      (0) 
      1. harshal gandhe

        Hi Nicolas,

        First of all thanks for quick reply and your awesome tutorial.

        Please send me your lighter package and also guide me for how to get 12mb mobile library from SAPUI5 1.12.1.

        As of now i have extracted sapui5-static and from there i got resource folder and from that resource folder i have deleted unnecessary files, still the size is 28 mb.

        (0) 
        1. Nicolas Busson Post author

          When I downloaded SAPUI5 1.12.1 it contained a zip file named sapui5-mobile-static.zip where you could find a “light” resources folder weighting only 12Mo. Do you see it?

          (0) 
  7. Juergen Wahlmann

    Finally got it all up and running. Thanks for the means to get my feet wet with Gateway and SAP UI5.

    Will now try the same with a pure Android App.

    Hint: If you have trouble using Virtual Box because the Gateway is not reachable from the outside, try VMware Player. With this and it’s network set to bridged I was able to run the UI5 app on my smartphone attached to the same local network. Had to open the Firewall first on the VM and on the host (port 8000) and set the network to work/private, but then the connection succeded.

    VM Ware Workstation should be able to route certain ports from the host into the VM, much like an internet router, so you’ll be able to stick with Network Addess Translation (NAT).

    Some LAN do not allow VMs to run bridged in them because too often someone has DHCP active in the VM and screws the whole network 😉

    (0) 
  8. BHARANIDHARAN S P M

    Hi Nicolas,

    I am trying the exercises given in this pdf “Building SAP Fiori-like UIs with SAPUI5”.

    But getting a blank page when trying to view the output for the EXERCISE 4 – SEARCH.

    I found below 3 errors using chrome.

    1. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:52814/MyFioirUI5/Component-preload.js
    2. Uncaught Error: Cannot add text nodes as direct child of an aggregation. For adding text to an aggregation, a surrounding html tag is needed sapui5.netweaver.ondemand.com/resources/sap/ui/core/library-preload.json/sap/ui/core/UIComponent.js:6
    3. Failed to load resource: net::ERR_CACHE_MISS

    Because of the above three errors i am getting blank output page in eclipse.

    I used eclipse JUNO SR2 version and SAPUI5 1.8.4 version.

    Your help will be appreciated.


    Thanks&regards,

    Bharanidharan S P M

    (0) 
    1. Andreas Kunz

      Hi,

      the first and probably also the last error is not a problem (just an attempt to load an optimized version of the application files).

      The second one is an issue and probably caused by an XMLView built in a wrong way: there is some plaintext where an XML tag would be expected.

      Regards

      Andreas

      (0) 
      1. BHARANIDHARAN S P M

        Hi Andreas,

        Thanks for pointing to the exact issue.

        The comments inside the XML file was not properly handled.

        And now i am able to view the output.

        Thanks again for your help.

        Regards,

        Bharanidharan

        (0) 
  9. Patrick Dean

    Excellent blog, real-world examples. Thanks for the timestamps as well, makes me feel a whole lot better that it took me a similar amount of time to get to grips with, when all the marketing spiel says things like “Makes it really easy…” and “Quickly develop…” 😆

    (0) 

Leave a Reply