Skip to Content
Author's profile photo Patrick Wenger

AppBuilder Tutorials: the missing step!

The new AppBuilder rocks

So, finally the brand new AppBuilder is available – and it really rocks! As we can expect from SAP, it comes with some quick start guides that make it really easy to get started. Since I do like tutorials, I right away started with the “simple AppBuilder app” tutorial. As I said, AppBuilder is a very cool tool. However, having finished my first tutorial, I was not only impressed. I was also a little bit disappointed: And that’s because there is one step missing in the tutorial and that’s (in my opinion) one of the most important ones:

How can we run the App on a REAL mobile device?

After all, that’s what mobile Apps are for, aren’t they? They are meant to run on mobile devices, not into some kind of simulator or container environment.

Well, thanks to the features of the AppBuilder and the wealth of tools of SAP in general, this shouldn’t be too hard to achieve. In this blog I’d like to show some ways to get this done (there are certainly many more ways, but the following ones seemed the most natural ones to me):

Run the app on the development workstation and call it from the mobile device.

Although this seems to be the most easy way to go, there are some obstacles to overcome. The default url of the AppBuilder service is: http://localhost:9009/…. Of course, the hostname “localhost” can’t be reached from outside the very own host (that’s why it is called “local” after all….). There are ways to make this happen anyway, I know, but neither is fun to go. The most intriguing one might be to change all occurrences of to the external IP address or host name of your workstation. This must be done in all relevant files (starting with “server.bat/.sh”, “chrome.bat/.sh” and many more) – and I don’t think, that those files are meant to be manually adjusted. So, we better leave this path and look for some better ways to achieve our goal.

Deploy the project as a “Cordova project” and copy the resulting files to any http server.

deploy1.PNGStarting with SMP 3.0 there is a new hybrid web container called “kapsel”, which is based on the apache Cordova project. Since AppBuilder supports this environment we can use this to our advantage. Simply go to “Deployment – Create Cordova Project” from within your AppBuilder project and let AppBuilder do all the work. You don’t even have to have Cordova installed. On the “Deployment Settings” dialog just enable the “Android” option and leave all other options untouched (see print screen). Confirm and wait until you (hopefully) get some success message. Then jump to your AppBuilder installation directory and go to “..\kapsel\” where you should find a new directory  with the name of your App (in my case “HelloAB”). This directory contains everything needed to run your App. Actually, it is meant to be copied into the Cordova html5 container, but who says that we can’t copy the whole content of the “www” subdirectory to any http server of your choice? Apache’s httpd does a perfect job as does Microsoft’s IIS. In my case I copied the “www” subdirectory with all subdirectories and files to my apache htdocs directory (C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs) and renamed it to “HelloAB”. It is then simply a matter of calling the respective url (in my case: “http://HOST/HelloAB“) from your mobile browser to enjoy your work on a real mobile device.

While this approach works just fine, it will certainly not win any efficiency or beauty contest. After all, the whole SAPUI5 library has to be copied with every App (which is the reason why even the simplest App is about  13 MB or more). There must be some better ways – and yes: there are. In a upcoming blog (part 2 now online) I will show you some more advanced ways, like

  • Using SAPs own web server instead of Apache or IIS (SAP ICM).
  • Using SAPs ABAP-UI5 runtime (using “/UI5/UI5_REPOSITORY_LOAD”) to run the APP.

Until then, enjoy your new AppBuilder!


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hello, thanks for you blog. I am also thinking about uploading the files to SAP with the report /UI5/UI5_REPOSITORY_LOAD into SAP. Maybe some changes to the path are necessary, I must give it a try. Looking forward to your next posts - will you discover the SMP cloud edition also? I think it is still possible to get free developer accounts.

      Just wondering if all the OData calls from other domains (same-origin...) will work... Ah ok I've seen something in the documentation - AllowCrossOrigin * for Cordova Projects ok.

      Author's profile photo Former Member
      Former Member

      Dear Denise, have you succesfully upload AppBuilder app with /UI5/UI5_REPOSITORY_LOAD ?. In my case seem that that the files produced with AppBuilder have the UNIX EOL (CR+LF) that is not supported by the report.

      I also open a thread for this issue AppBuilder deploy problem - EOL not supported

      Since we'd like to publish our app in SAP Fiori, a the moment seem that AppBuilder is useless and it's a shame, since AppBuilder seem to speed up the delopment process.