Skip to Content
Author's profile photo Former Member

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

2.JPG

Step 2 :

    Now enter command “create d:\NewAndroidApp com.phoneGap.android Approval ” and click enter. This will create an android phoneGap application.

3.JPG

Step 3 :

Open ADT, click on File -> new -> others

Expand android in wizard, and select “Android Project from existing Code”

And click on “next”.

4.JPG

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.

5.JPG

Step 4:

  Run the app in simulator, you should see sample cordova application for android.

6.JPG

This confirms that that your phoneGap project is created.

Step 5:

My sapui5 folder structure is as follows  :

9.JPG

Let’s copy “approval” folder from WebContent and paste it in www folder of your android project

8.JPG

Refer these .js files in index.html file.

  1. i.e., add these two lines to index.html

<script type=”text/javascriptsrc=”approval/App.controller.js”></script>

<script type=”text/javascriptsrc=”approval/App.view.js”></script>

<script type=”text/javascriptsrc=”approval/App.controller.js”></script>

<script type=”text/javascriptsrc=”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.

10.JPG

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-uilibs=”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 .

11.JPG

Now your app is ready 🙂 .

Assigned Tags

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

      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

      Author's profile photo Former Member
      Former Member

      Good one..!! Thanks for this blog man..!! 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks for the appreciation......definately kapsel would be the next big thing in mobile space,looking forward to work on it .

      Author's profile photo Former Member
      Former Member

      Found this cool npm package that lists all available plugins

      https://npmjs.org/package/cordova-plugins

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Virinchy P
      Virinchy P

      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

      Author's profile photo Former Member
      Former Member

      I tried this also friend , after doing that also same Error Prolongs 🙁 I dont know where i am Going Wrong

      Author's profile photo Former Member
      Former Member

      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..

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      I'm using openui5-runtime-1.18.12. Here's my structure:

      /wp-content/uploads/2014/04/openui_439189.png

      Author's profile photo Former Member
      Former Member

      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>

      Author's profile photo Former Member
      Former Member

      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>

      Author's profile photo Former Member
      Former Member

      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.



      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Ok, I normally use the Adobe Phonegap build service myself.. so maybe Vijaykumar Ratnakar Can help you better than me 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      Hi Vijay,

      I somehow resolved the problem. But right now I can't connect to my OData service. Im using onInit event in controller:

      onInit: function() {
      var ServiceUrl = this.getServiceUrl("url_exp_date_srv/")
      var oModel = new sap.ui.model.odata.ODataModel(ServiceUrl, false, "user", "passwd");
      var oTable = sap.ui.getCore().byId("items");
      // Set table model
      oTable.setModel(oModel);
      // //Attach entity set and cell template to table. Initial run so no data will be selected
      this.setFilter(global.substring(0,9), global.substring(10,27));
      oTable.bindAggregation("items", "/ExpiryDate", this.getFilter(), this.getTemplate());

      },

      Normally when I call ODataModel method I should connect to my service but it is not. Any ideas how to solve it?

      Regards,

      Mateusz

      Author's profile photo Former Member
      Former Member

      Thanks, this is a great blog.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      thank you Martin 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      Hi,

      Not packaged UI5 app works great. I'm testing it only on my device.

      Regards

      Mateusz

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      are you able to access same (oData service) url in your device browser?

      Author's profile photo Former Member
      Former Member

      Yes, I can. For test I used some of public oData sevices aswell.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      hi vijaykumar,

      Thanks for the blog. While testing this application in my device I am getting this error.Capture.PNG

      can you guide?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Anju,

      It looks like some problem with your resources, check if layout files are present in your resources.

      Regards,

      Vijay.

      Author's profile photo Former Member
      Former Member

      Hi vijayakumar,

      Layout file was somehow missing from resources. I then reloaded the resources file but there are still errorsCapture.PNG

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      I am debugging this app in a real device

      Regards

      Anju

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Even if I change src to "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js the following error prevails

      Capture.PNG

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Vishnu Pankajakshan
      Vishnu Pankajakshan

      hi Vijaykumar Ratnakar,in which folder should is paste the resource...

      i have 2 locations:

      cordova.JPG

      cordova2.JPG

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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,

      Author's profile photo Former Member
      Former Member

      Hi Vijaykumar Ratnakar . my app crushes whenever i try to run it as a pure phonegap app from Eclipse, what might be the problem

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Seloka,

      There could be any number of possibilities for this kind of error, could you please provide more info on error ?

      Regards,

      Vijay.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      can you check your console log and let me know the issue??

      Author's profile photo Former Member
      Former Member

      oh, i managed to conquer it. i just had to add the cordova.jar file into the libs folder of the project. 😉

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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,

      Author's profile photo Azhar Zartargar
      Azhar Zartargar

      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

      Author's profile photo Azhar Zartargar
      Azhar Zartargar

      I am done with this. There is no difference.

      Thank you..

      Author's profile photo Azhar Zartargar
      Azhar Zartargar

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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?errors.PNGindex.PNG

      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      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