Skip to Content
Author's profile photo Claudia Polster

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


Requirements

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.

/wp-content/uploads/2015/11/01_837888.png

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

/wp-content/uploads/2015/11/02__837889.png

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.

/wp-content/uploads/2015/11/03_837902.png

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

/wp-content/uploads/2015/11/04_837903.png

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

/wp-content/uploads/2015/11/05_837904.png

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

/wp-content/uploads/2015/11/07_837923.png

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

From the Service Catalog list, choose your system

Choose your service and click Next.

/wp-content/uploads/2015/11/10_837924.png

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

/wp-content/uploads/2015/11/11_837954.png

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

/wp-content/uploads/2015/11/12_837955.png

And preview the application

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

/wp-content/uploads/2015/11/13_837974.png

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

/wp-content/uploads/2015/11/14_837975.png

In the project Settings choose Run Configurations

Under run configurations select the first entry under Web Application

/wp-content/uploads/2015/11/15_837976.png

Scroll down and check the box for Open with Frame

Press Save to save your settings

Press Close to close the Preferences

/wp-content/uploads/2015/11/16_837977.png

Run the application again.

/wp-content/uploads/2015/11/17_837978.png

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

/wp-content/uploads/2015/11/18_837979.png

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

Select the magnifying glass to find the product.

/wp-content/uploads/2015/11/19_837986.png

/wp-content/uploads/2015/11/20_837987.png

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

Claudi

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi,

      The link Part 1 and Par2 not working .. can you please help on this

      Regards,

      Manoj

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      Sorry!

      I've updated it now 🙂

      Author's profile photo Sharvari Prasad
      Sharvari Prasad

      Hi Claudia,

      In the screen to provide a data connection, I am neither able to find a service catalog or add one of my own.

      Am I missing something here?

      Can you please guide me through this.

      Thanks,

      Sharvari

      Author's profile photo Former Member
      Former Member

      Hi Claudia,

                     Awesome tutorial!!! Thanks. All the 3 parts works like charm. I just have 2 questions.

      • Through this can we convert any existing UI5 app to hybrid app?
      • Will their be any extra licensing or pricing involved ?

      -Thanks

      Kokil

      Author's profile photo Chaitanya Narayana Murthy Anisetti
      Chaitanya Narayana Murthy Anisetti

      same questions i too had

      Author's profile photo Akshat Malhotra
      Akshat Malhotra

      Hi ,unable to go to next part . It says page does not exist . Could you please update with correct link .

      Author's profile photo Karunaharan V
      Karunaharan V

      Dedicated Kapsel templates are no more supported by HAT Team. For more info, see

      https://blogs.sap.com/2017/06/20/deprecation-of-dedicated-kapsel-templates-for-sap-web-ide-hybrid-app-toolkit/

      Author's profile photo VIKRAM P
      VIKRAM P

      Hi Claudia,

       

      Thank you very much, you made it easy 🙂 .