Skip to Content

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

53 Comments
You must be Logged on to comment or reply to a post.
  • 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

  • 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

  • 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

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

          • 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:

            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

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

  • 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:

        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

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

        • 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

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

    • 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