Packaging sapui5 application using phoneGap for Android [ Command line Interface ]
PhoneGap is an open source framework that allows you to create native apps for different platforms like ios, android, windows 8, bbos etc.
Using PhoneGap we could develop various platform apps using well known technologies like HTML5 , Javascript with a minimal platform specific skills.
There are two methods to package an SAPUI5 app using PhoneGap
1) PhoneGap Build Service
2) Packaging apps with CLI
PhoneGap build service is a paid service, free plan allows us to have only one private app, here i’l be concentrating on “Packaging using Command Line Interface”.
You can download the latest version of phonegap here .
Step1 : Navigate to android/bin folder in the command prompt in my case it is
D:\360545\phonegap-2.9.0\phonegap-2.9.0\lib\android\bin
Step 2 :
Now enter command “create d:\NewAndroidApp com.phoneGap.android Approval ” and click enter. This will create an android phoneGap application.
Step 3 :
Open ADT, click on File -> new -> others
Expand android in wizard, and select “Android Project from existing Code”
And click on “next”.
Click on “Browse ” and navigate to the android project that you have created previously, i.e., NewAndroidApp then click ok -> check “copy projects into workspace “
click on finish.
Step 4:
Run the app in simulator, you should see sample cordova application for android.
This confirms that that your phoneGap project is created.
Step 5:
My sapui5 folder structure is as follows :
Let’s copy “approval” folder from WebContent and paste it in www folder of your android project
Refer these .js files in index.html file.
- i.e., add these two lines to index.html
<script type=”text/javascript” src=”approval/App.controller.js”></script>
<script type=”text/javascript” src=”approval/App.view.js”></script>
<script type=”text/javascript” src=”approval/App.controller.js”></script>
<script type=”text/javascript” src=”approval/App.view.js”></script>
App.view.js :
sap.ui.jsview(“approval.App”, {
getControllerName: function() {
return “approval.App”;
},
createContent : function(oController) {
this.app = new sap.m.App(“App”);
var approval = sap.ui.jsview(“idApproval”,”approval.approval”);
approval.app = this.app;
this.app.addPage(approval);
return this.app;
}
});
and approval.view.js contains the application code.
Step 6:
Copy resources from “ sapui5-mobile-static ” and paste it under www folder.
Refer these resources in your index.html i.e.,
<script id=”sap-ui-bootstrap”
type=”text/javascript“
src=”/resources/sap-ui-core.js“
data-sap-ui-theme=”sap_bluecrystal”
data-sap-ui–libs=”sap.m”> </script>
Step 7:
app.initialize() initializes the app . We have onDeviceReady() event in index.js which is fired as soon as device is ready
so we get App.view.js and place this
View at content i.e., paste following code in onDeviceReadyEvent().
var myapp = sap.ui.jsview(“approval.App”);
myapp.placeAt(‘content’);
Now run the app, You should be able to see your sapui5 application in the simulator .
Now your app is ready 🙂 .
Thanks for the blog. Phonegap/Cordova is a great tool for creating Hybrid apps. I have mostly used Build service or Cordova in local IDE's (XCODE etc).
Guess I need to brush up my skills with CLI.
KAPSEL is a set of Phonegap plugins from SAP that will add great benefits to SAP App developers. I know their devs mostly use CLI.
BR
Njål
Good one..!! Thanks for this blog man..!! 🙂
Thanks for the appreciation......definately kapsel would be the next big thing in mobile space,looking forward to work on it .
Found this cool npm package that lists all available plugins
https://npmjs.org/package/cordova-plugins
Hey friends,
When i Enter this command \NewAndroidApp com.phoneGap.android Approval In the cmd line i am getting ERROR ...
Below is my command line full code ,,,, Someone Guide me 🙁
C:\phonegap-2.9.1\lib\android\bin>create C:\\NewAndroidApp com.phoneGap.android
Approval
Cannot locate javac.exe using the PATH environment variable.
Retry after adding directory containing javac.exe to the PATH variable.
Remember to open a new command window after updating the PATH variable.
Visit http://java.oracle.com if you need to install Java (JDK).
C:\phonegap-2.9.1\lib\android\bin>^A
I guess this is some issue in locating the java compiler .
Solution : Set java path
set JAVA_HOME to your java location
How to set $JAVA_HOME environment variable on Windows
Regards
Viru
I tried this also friend , after doing that also same Error Prolongs 🙁 I dont know where i am Going Wrong
Good Day Everyone.. Im a very newbie in developing hybrid apps.. can anyone have an idea on how to make a simple SAPUI5 index.html then user input is being save thru device storage using SQLITE. Im kinda stuck on this one. I was able to load/show the index.html however I dont know how to get the values from the user input and be save in local/device storage.. if someone can provide a link and perhaps a simple code for reference..
Hi Glen,
Go through this link http://www.informit.com/articles/article.aspx?p=1339555&seqNum=2
it explains the usage of sqlight in Hybrid apps.
For simple storage you can use web api's to store the data (in sapui5) as follows ,
jQuery.sap.require("jquery.sap.storage");
_oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local);
to store data:
_oStorage.put("storeId", input.getValue());
to get data:
_oStorage.get("storeId");
How ever these web api's are not secure to store the data, you can use the encryption to provide the extra security.
Regards,
Vijay.
HI,
I got error which appears in all of views/controllers, i.e.:
file:///android_asset/www/rzepcma_filter/selection_screen.controller.js: Line 1 : Uncaught ReferenceError: sap is not defined.
How to solve it?
It looks like you are not loading the SAPUI5 framework. Make sure your UI5 files are located in the right folder :
Step 6:
Copy resources from “ sapui5-mobile-static ” and paste it under www folder.
Hope that helps
I'm using openui5-runtime-1.18.12. Here's my structure:
I advice to use the UI5 runtime for mobile runtime: https://openui5.hana.ondemand.com/downloads/openui5-runtime-mobile-1.18.12.zip
Also check the bootstrap script:
<script id="sap-ui-bootstrap"
type="text/javascript"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m”> </script>
Still not working. My bootstrap script:
<script id="sap-ui-bootstrap"
type="text/javascript"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m”> </script>
Hi Mateusz,
I normally use Chrome to figure out the issue when I face similar problems. You can open the index.html file with web security disabled (Because of same origin policies)
So create a shortcut for chrome (and make sure all the other chrome windows are closed)
with this agrument at the end --disable-web-security
Go to the console(Developer tools in Chrome) and check for the error.
I have already packaged my UI5 application into Android APK and I'm testing it via android virtual device. I'm getting this error from Eclipse ADT console not from Chrome. UI5 application itself works great.
Ok, I normally use the Adobe Phonegap build service myself.. so maybe Vijaykumar Ratnakar Can help you better than me 🙂
Hi Mateusz,
You can serve your cordova project and debug it in chrome,as mentioned byNjål Stabell ,by executing "cordova serve android" . Looking at your error, it seems some how sapui5 resources are not accesible , so try giving this url in src
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" and check if it works. Use real device while testing as some times AVD tend to produce error (may not be true in this case as this is a error related to resources) .
Regards,
Vijay.
Hi Vijay,
I somehow resolved the problem. But right now I can't connect to my OData service. Im using onInit event in controller:
},
Normally when I call ODataModel method I should connect to my service but it is not. Any ideas how to solve it?
Regards,
Mateusz
Thanks, this is a great blog.
thank you Martin 🙂
Hi Mateusz Rzepczyk,
Are you getting the data in sapui5 application (not packaged one) ?, also try it on a device instead of a simulator (if you are using simulator please check if you are able to get any response in a simulator browser for that particular oData service url ).
Let me know
Regards,
Vijay.
Hi,
Not packaged UI5 app works great. I'm testing it only on my device.
Regards
Mateusz
are you able to access same (oData service) url in your device browser?
Yes, I can. For test I used some of public oData sevices aswell.
Ok, I don't know why but suddenly it started working. I changed theme from sap_bluecrystal to sap_mvi and after that everything works like charm
Regards.
Mateusz
hi vijaykumar,
Thanks for the blog. While testing this application in my device I am getting this error.
can you guide?
Hi Anju,
It looks like some problem with your resources, check if layout files are present in your resources.
Regards,
Vijay.
Hi vijayakumar,
Layout file was somehow missing from resources. I then reloaded the resources file but there are still errors
Hi Anju,
Problem is with your resources, may be it is missing library-preload file, copy that file, if possible download new resources and keep them in your resources folder.
Regards,
Vijay.
Hi vijayakumar,
I have downloaded latest version of openui5-runtime-mobile-1.22.10 but still same error. It doesn't have library-preload file how can I proceed?
Regards
Anju
Try debugging the app in browser, see what is the error there, and also are you running this app in emulator or real device?
Regards,
Vijay
I am debugging this app in a real device
Regards
Anju
try replacing src in your bootstrap to src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js", if it works then issue is related to your resources
Even if I change src to "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js the following error prevails
Can you attach your project or even only the finished index.html file?
It is not clear where to copy all the lines you mentioned.
Thank you,
Idan Ben-Moshe
Hi Ben Moshe,
After creation and adding android platform to the cordova app, you will see www folder in the root of cordova app.Copy all the js files (like view.js , controller.js, index.html and css files from SAPUI5 app) to this www folder (replace default index.html and js files). also refer cordova.js in new index.html file.You can build cordova app by executing "cordova build android".
You can visit this link to get some clarity on folder structure and fuctionality of each folder.
Hope this helps.
Regards,
Vijay.
hi Vijaykumar Ratnakar,in which folder should is paste the resource...
i have 2 locations:
But when i import my cordova project to eclipse i am getting the second path and i tried editing the index.html here but it didnt reflect the changes in AVD.
Regards,
Vishnu
HI Vishnu,
It is your first image location, you usually copy your source code in here and execute "cordova build android" (or iOS), this command will take care of copying all those files to your second location and building it.
Hope that answers your question.
Regards,
Vijay,
Hi Vijaykumar Ratnakar . my app crushes whenever i try to run it as a pure phonegap app from Eclipse, what might be the problem
Hi Seloka,
There could be any number of possibilities for this kind of error, could you please provide more info on error ?
Regards,
Vijay.
i have created the phonegap app, successfully imported it to Eclipse as an existing android code, with no errors... but when i try to run it as an android application on a device or emulator i get this "Unfortunately, Approval has stopped"
I have also included the cordova-2.4.0.jar file on my proj and my project is an Android 4.0
Thanks.
can you check your console log and let me know the issue??
oh, i managed to conquer it. i just had to add the cordova.jar file into the libs folder of the project. 😉
also cordova 2.9.0 is kind of old, just try using cordova 4.3 with a CLI it has nice project structure, and you don't have to import android workspace into eclipse, you can build and run cordova apps with simple command like "cordova build android" or "cordova run android". Follow these links here for more info,
Hi Vijaykumar..
Really helpful blog. I appreciate.
But i have a small SAPUI5 Project in which i am using .XML Views. I am not getting how to integrate this SAPUI5 application code with Cordova.
Kindly help me with the same.
Thanks & Regards:
Azhar
I am done with this. There is no difference.
Thank you..
Hi,
I have created an SAPUI5 Project with data coming from different SAP Gateway Server.
Now i have integrated it into the Phonegap Project as i have done for different project.
But the data is not coming in the Mobile APP.
Screen is rendered without data.
Could you please help me with the same?..
Thanks & Regards:
Azhar
Hi Azhar,
Are you running your app on simulator or on device ? also check if you are able to access oData services on device/simulator i.e., running your app. let me know
Regards,
VIjay.
Hello!
I have add the resources and my view controller js files into the www folder, and revise the index.html created by cordova as well as index.js as you said, now the errors are as below , attached with my index.html, could you help me?

Please create a new Discussion as this is not the right place to post questions. See the Getting Started link at the top right for instructions on creating a Discussion.
Thanks, Mike (Moderator)
SAP Technology RIG
HI Vijay...
It was a great blog.
i just need one help
I Placed Resource folder in my project web content but now the size of the app is almost 50MB.
Is there any other link to download minimized resource folder so that the size doesn't increases and its doesn't affect the workspace build
Hi Rahul,
You can download UI5 run time for mobile from the following link (Pick any version), it is just 5 MB
OpenUI5 - Download
For Mobile runtime 1.30, use following link.
https://openui5.hana.ondemand.com/downloads/openui5-runtime-mobile-1.30.10.zip