Skip to Content

Develop Hybrid Mobile Apps With SAP Web IDE Part 1

In this and following blogs, I will show you how you can create hybrid mobile applications based on Apache Cordova using the SAP Web IDE and the hybrid app toolkit add-on.

We will build an SAP Fiori app from scratch, adding mobile features and deploying the app to a mobile device.

Info: This is one exersice from the TechEd 2015 (MOB160 – Develop Hybrid Mobile Apps With SAP Web IDE, Hybrid App Toolkit Add-On)

part 1

this part 😉

  • Create a new Kapsel App
part 2
  • Add new Functionality
  • Test In Browser with Cordova Facade
part 3
  • Run The App On Your Mobile Device


You have finished the setup of your environment (HCC, HCP, WebIde).

Please use the Google Chrome Browser!

Create A New Kapsel App

Before we can create a new application in SAP Web IDE, we have to add the HAT Plugin.

Add the Hybrid Application Toolkit (HAT) Plugin

The Hybrid Application Toolkit (HAT) plugin takes your SAP Web IDE project and packages it into a Cordova container in order to run it as a hybrid mobile app.

In this exercise, we will be using the HAT plugin to provide a Cordova Façade.

So first, we must activate the HAT plugin in our SAP Web IDE.

To enable optional plugins to your SAP Web IDE, open the preferences by selecting Preferences on the left side.


Click Optional Plugins, enable the Hybrid App Toolkit plugin and click Save


Restart your SAP Web IDE by refreshing the browser page

Go back to the preferences.

You should now see a Hybrid Application Toolkit option.

Make sure that Cordova Facade Preview option is enabled.

Click Save

Note: There is no need to press the button “Test Connection“, because since we are using the Cordova Façade there is no local Hybrid Application Toolkit server installed, and the test will always fail.


To come back to the development view, click Development on the left side


Create a new Kapsel Project

Now we can start to create a new application using the Kapsel template.

Open the SAP Web IDE in the Chrome browser.

Click File – New – Project from Template


Select SAPUI5 Mobile Application in  the drop down box and then choose SAPUI5 Master Detail Kapsel Application and click Next


Enter a project name, e.g. TechEd and click Next

From the Service Catalog list, choose your system

Choose your service and click Next.


At the Template Customization enter the following fields and click Next

Project Settings
Project Namespace TechEd
Master Section
Title Products
OData Collection ProductSet
Search Field ProductID
Main Data Fields
Item Title ProductID
Numeric Attribute Price
Units Attribute CurrencyCode
Detail Section
Title Product Details
Additional Attribute 1 SupplierName
Additional Attribute 2 Description
Information Section
OData Navigations ToSupplier
Navigation Attribute 1 PhoneNumber
Navigation Attribute 2 EmailAddress
Navigation Attribute 3 WebAddress


Confirm it by clicking Finish

This will create a new Kapsel Application.

Open the Project Folder and choose the index.html.

Click the Run Button


And preview the application

The Application is shown in the Fullscreen-Mode, but we need the functionality of the Preview-Mode


Now we need to adapt some preferencens of the project itself

Open the Project Folder and choose the index.html. Right click and select Project Settings


In the project Settings choose Run Configurations

Under run configurations select the first entry under Web Application


Scroll down and check the box for Open with Frame

Press Save to save your settings

Press Close to close the Preferences


Run the application again.


Now the application is shown in a frame and at the top we have more functionality (like preview-size, language, QR-Code, etc)


Select the search bar on the top and enter HT-1052.

Select the magnifying glass to find the product.



Close the preview tab.

In the next part I will show, how you can add new functionality to your App and how you can test it in the browser.

More Web IDE stuff published by Technology RIG 🙂

See you


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