We’re going to do this example on the iPhone, so we require XCode on a Mac. You can download this with the App Store.
Download Phonegap: https://phonegap.com/install/
Run this first from the command line: sudo npm install -g phonegap (ensure you have Node.js first).
Now you should have Cordova
Now follow this guide for iOS: https://docs.phonegap.com/en/edge/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide
This guide will explain the following:
Navigate in the command line to your documents folder, and maybe a subfolder, for example:
Run this command: cordova create SalesByCustomer com.mindsetconsulting “SAPSalesByCustomer”
The response should be: Creating a new cordova project with name “SAPSalesByCustomer” and id “com.mindsetconsulting” at location “/Users/gavinpquinn/Documents/BlogMobile/SalesByCustomer”
Run: cd SalesByCustomer
Run: cordova platform add ios
Run: cordova prepare
Now you should have an XCode project ready.
In Explorer, navigate to this folder:
Double click on the project to open XCode. You can see the WWW folder and also hit the play button to try out your mobile app. You may need to register for an Apple Developer account as described in the PhoneGap Cordova guide.
If you right-click on the WWW directory on the left, and do show in finder, it will bring you to the proper directory on your Mac. Here is where we will need to insert all of our html5 code from HANA Studio. Backup the index.html to index.html.bak that already exists there.
Go to your HANA Studio from our last blog <insert link>. Switch to the Project Explorer View. Navigate in the SalesByCustomer project to the WebContent folder. Copy the index.html and also the folder salesbycustomer from here, and paste it into the WWW folder on the XCode project.
Next, we need a static library for all of the SAPUI5. This is what makes the app very fast. All of the code is resident on the device, and only the ajax calls back to HANA Cloud are going across the network.
Download the latest UI5 Runtime Mobile (1.18.9 as of this blog writing)
Extract these files into a resources folder. Copy this resources folder into the WWW XCode project folder. Your folder structure should now look like this:
We will need to make some minor tweaks.
Go to your index.html file, and change the resource path to be relative to the WWW folder:
Go to the SalesByCustomer.view.js and locate the odata service call. Add in two more parameters after the path and “true” for “username, and “password”. Like the following:
var oModel = new sap.ui.model.odata.ODataModel(
Hitting play again in XCode will get you something closer now:
We need to do a few alterations to get Hybrid web containers to work just right. Here are the details: https://sapui5.hana.ondemand.com/sdk/docs/guide/WebContainer.html