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


Post a Comment

Powered by Blogger.