Basic step to migrate SAPUI5 responsive application built for browser to hybrid app

Background

Lets say, we have a built a completely responsive web application with SAPUI5.

For a SAPUI5 application to run on a browser you need 2 components.

1. Application specific files like index.html, Component.js, Router.js, App.view.js, App.controller.js, etc
2. SAPUI5 library’s files, that will be javascript, css, etc.

Usually such an application is built on Eclipse that has the latest or required SAPUI5 plugin libraraies, by creating a SAPUI5 project and adding application code.

In that case, we add the application specific files to the project and when the appilcation is accessed from a browser, the server on which this is deployed will take of sending the library files to the browser.

In terms of a responsive implementation, most of the UI components would come from sap.m package or compatible to it at the least.

Approach

Now in the case of getting the same application to be converted to a hybrid mobile app, we need to package the library files provided by the server with the application files, so that there is no reference to network resources for the UI to be built. The application files are already in the project workspace, however, the library files aren’t.

So the idea here is to add these library files to our project workspace and test it in a browser like Firefox or change some setting in Chrome. Otherwise, if you open the index.html from a directory and run it on a browser with all the files on the local drive you may get the errors like the below ‘Origin null is not allowed by Access-Control-Allow-Origin’

Step. Go to Open UI5 download page. Currently the URL is

http://openui5.org/download.html

So the idea here is to add these library files to our project and test the application as a HTTP application or static web project on a HTTP server. And then give this static web project to a tool like Cordova to come up with the hybrid version of it.

If you don’t deploy the application on a HTTP server you have some errors as mentioned above. It is easier to deploy the code to HTTP server and with an Eclipse project its easier to fix issues.

Objective

This document will show how from an existing SAPUI5 project we can build and customize a static web project that can ported to a hybrid app through Cordova.

NOTE. The steps to be performed in Cordova are not covered here. You can check Cordova or SCN documentation for the same.

Ideally, you can build a ‘Static Web Project’ in Eclipse and deploy it to a HTTP Server like Jetty. As I don’t have a HTTP server at the moment, I’m going to show to do the same with a ‘Dynamic Web Project’ that will run on a Web Server.

Assumptions

Assuming you have an existing and working SAPUI5 project in eclipse like below.

You can see that the SAPUI Core and Server Side libraries are linked to the project.

Also for the sake of simplicity, lets assume your UI does not make service calls externally. It basic UI and local data. There are more steps required for integration that won’t be covered here.

Step. Create a dynamic web project.

You can see in the new project has no SAPUI Core and Server Side libraries linked to it.

Step. Copy the necessary files from the existing project to the new project. Now, what are the necessary files.

These are the files that need to be present in the Cordova platform in order to build the hybrid app without referencing to any resources outside. In other words, all the files necessary for the application will be local.

Step. Download the UI5 Runtime Mobile distribution. Uzip the downloaded file. You’ll get the resources folder

Step. Paste this to the new project’s web content files, ie. under WebContent folder.

Last Step. Deploy the application and test.