SAP Mobile App Development

How to Create SAPUI5 Hybrid Mobile App with SAP Web IDE?

         This is a step by step tutorial showing how to create a simple SAPUI5 Hybrid Mobile App with SAP Web IDE and hybrid app toolkit.Hybrid App Toolkit is an Add-on for SAP Web IDE which enables developers to create and deploy hybrid apps using Apache Cordova and the SAP Mobile Platform SDK.These hybrid apps are also called Cordova or Kapsel apps.
          Hybrid App Toolkit is a link between SAP Mobile Platform SDK and SAP Web IDE.This makes the developer job easy.One of the benefits developer get from this is , we can add plugins by just clicking on a check box.It has many other benefits which we will find on the go..


  1. Windows system setup with SAP Mobile Platform SDK installed and Hybrid App Toolkit configured.(If not setup already visit my previous blog Windows System Setup for Developing Mobile Apps with SAPWebIDE and SAP Mobile SDK )


  1. Start HAT Connector.For this go to HAT directory and double click run.cmd file.
  2. It will ask for HAT Connector certificate password which was given at the time of setting up HAT.You will get a message saying HAT Connector is listening to a port number.
  3. Now we need to check the connection is set or not in SAP Web IDE.Open SAP Web IDE.From the menu choose Tools->Preferences.Preferences window will open.
  4. From the preferences window select Hybrid Application Toolkit section.Tick mark on Enable Local Add-on features checkbox.Press  Test Connection button.If you see success message saying connection is available ready to go to next step.If not try restarting the HAT Connector.Press save if you have any changes.
  5. Create a new project.For this from menu choose File->New->Project From Template.Template wizard will be opened.
  6. From the template wizard select SAPUI5 Mobile Kapsel Starter Application.Press Next button.
  7. Give project name and press Next button.
  8. Select the view type and press next or finish button.These steps may be familiar if you have read my previous post about creating SAPUI5 Application with SAP Web IDE.
  9. This is the important step.Right click on project folder and choose Project Settings.In the Project settings window we will be configuring our newly created hybrid SAPUI5 App.Here we will give app name, app id,app platform etc.
  10. Go to Hybrid App Toolkit->Hybrid App Configuration.Give App Name and App ID.Before saving the configurations dont forget to tick the checkbox on android under Platforms section.Press save.Our app is ready to be tested. 
  11. To test the App Right Click ->Run->Run on Local Device/Simulator->Android Emulator.If you have a real device to test you can select Android Device.
  12. See the App in action.
In the coming tutorials we will be doing some coding.Dont worry.In next tutorial i will show how to implement camera functionality in SAPUI5 hybrid App.

If you enjoyed this post, Please Share!!


  1. Great post. Wonderful information and really very much useful. Thanks for sharing and keep updating.
    erp in chennai

  2. The significant contrast is that half and half applications are facilitated inside a local app which further uses a portable stage's dev platform tech pally

  3. These are really amazing and valuable websites you have share with us. Thanks for the informative post. Keep posting like these information.
    mobile app development company chennai

  4. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.

    Android Application Development Company in Chennai

  5. Thanks for the blog post buddy! Keep them coming...
    hybrib Development pakistan

  6. Very informative article, Which you have shared here about the mobile app development services.Thank you for sharing this article.

  7. Thanks for the blog post buddy! Keep them coming...
    hybrib Development pakistan

  8. I read your blog now share great information here. Software Companies In Vietnam

  9. Thanks for sharing such a great blog..I like your blog very much…..such a good information..
    Hybrid App Development Company in USA
    Mobile App Development Company in USA

  10. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it. freelance web designer

  11. This is my first time i visit here and I found so many interesting stuff in your blog especially it's discussion, thank you. app store screenshots

  12. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work apps

  13. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. Protocol

  14. Good content about hybrid mobile application ...keep update and also we have the best mobile app development company in Chennai and also we provide all services..

    "Top Cloud Computing Service providers in Chennai
    Top DevOps Service Providers in Chennai
    Best web development service Providers in Chennai"

  15. It vitally takes out necessities of books, on the off chance that you download all the parts identified with your course in the application. It is free for iOS stage clients and they can get it through the iTunes application store. TutuApp web


Powered by Blogger.