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)
this part |
|
| part 2 |
|
| part 3 |
|
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.
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 partI 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