Skip to Content

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

To report this post you need to login first.

7 Comments

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

  1. Sharvari .

    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

    (0) 
  2. Kokil Mishra

    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

    (0) 

Leave a Reply