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

To report this post you need to login first.

53 Comments

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

  1. Njål Stabell

    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

    (0) 
  2. Shri Vishnu Priyan Krishnamurthy

    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

    (0) 
  3. Glenn Lim

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

    (0) 
    1. Vijaykumar Ratnakar 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.

      (0) 
  4. Mateusz Rzepczyk

    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?

    (0) 
    1. Njål Stabell

      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

      (0) 
          1. Mateusz Rzepczyk

            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>

            (0) 
            1. Njål Stabell

              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.



              (0) 
              1. Mateusz Rzepczyk

                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.

                (0) 
                  1. Vijaykumar Ratnakar 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.

                    (0) 
                    1. Mateusz Rzepczyk

                      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

                      (0) 
  5. Vijaykumar Ratnakar 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.

    (0) 
        1. Mateusz Rzepczyk

          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

          (0) 
    1. Vijaykumar Ratnakar 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.

      (0) 
  6. Anju A Pillai

    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

    (0) 
  7. Idan Ben-Moshe

    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

    (0) 
    1. Vijaykumar Ratnakar 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.

      (0) 
        1. Vijaykumar Ratnakar 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,

          (0) 
      1. Seloka Makola

        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.

        (0) 
        1. Vijaykumar Ratnakar 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,

          (0) 
  8. 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

    (0) 
  9. 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

    (0) 
    1. Vijaykumar Ratnakar 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.

      (0) 
  10. Te Tan

    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

    (0) 
    1. 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

      (0) 
  11. Rahul Mantoo

    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

    (0) 

Leave a Reply