Creating an online SAP UI5 mobile app using HAT

[NikhilPuri]

With Hybrid Application Toolkit version 1.32 we are now able to make changes to code and files which were generated by our cloud build service. We are now able to configure and tweak the application to their needs:

1. We are now able to select, but more importantly also unselect Cordova and Kapsel plugins.


2. We can now modify hybrid app settings and behaviour by editing the config.xml file.


3. We can now edit the appConfig.js file, which contains your app’s configuration settings used at runtime. We do not recommend changing the contents of this file.


4. You can modify appRoutes.js, which is used to route your app’s data flow.

Creating an online SAP UI5 mobile app

Now we will create a new project from a template.

 

In the template selection dialog, we select the SAP UI5 Application template.

Add Basic Information for Project.

 

 

Click on Finish.

Add some basic layout in your view.xml.

 

Now, Once our application is ready we need to enable Hybrid Application Toolkit in WEBIDE.

Follow the below given steps:

1. Click on Preferences.


2. Click on Extensions, search for Hybrid App Toolkit, enable the Toolkit and save.


3. Now, We have a working web application, let’s turn this into a mobile app. The first step is to enable this project as a Hybrid Mobile project.
   


4. This step will create a folder named “mobile” in your project. HAT 1.32 generates 3 new files: config.xml , mobile/appConfig.js and mobile/appRoutes.js. The mobile folder contains the source files related to the mobile app. You can still deploy the web application (stored in the webapp folder) to SAP Cloud Platform and run it as a web application.
   


5. let’s go ahead and build the packaged app.

In the first step of the build wizard you can provide information about the mobile app.

 

In the platform settings, you can select for which platform you want to build the application. We only support iOS and Android here. The Windows platform is not supported with our Cloud Build Service.

Cloud Build Service with Mobile Services

Click Next. Since we are not going to use Push Notifications we can now proceed with building the app.

The build progress will be visible in the SAP Web IDE console.

 

When the build is finished, a dialog will pop up showing you a QR code and hyperlinks for downloading the binary. By scanning the QR code on your device, you can download and install the application directly onto your device. No wires needed.

Note that the download can sometimes fail due to network conditions. If you are using the Firefox browser, you will be able to resume a failed download (note that this won’t work with the Chrome browser).

Once you have installed the application on your device, you can start your testing.

I hope everyone enjoyed this blog, Please don’t forget to put comment and share ?

 

Regards

Nikhil Puri