Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Participant
In this blog I am showing how easy it is to integrate native device capabilities into a SAPUI5 / Fiori Application using the Anyline SDK. There are two blogs on SCN I posted on this topic in 2017 based on the HAT.

As both underlying tools, the WebIDE and the local HAT were deprecated (please find more details here), I am writing this new blog showing on how to use the new technologies for creating hybrid apps. The Full Stack WebIDE can now be used for building hybrid apps. The development process is ways easier than it was on the old technologies.

Activate the required Services in SAP Cloud Platform

Logon the the SAP Cloud Platform. You can also use the trial account to evaluate the services required in this blog. Check if the Mobile Services are enabled. The Mobile Services are used to perform the build of the Hybrid App out of the Full Stack WebIDE.

If they are not enabled click on the service and enable them.


Launch the Full Stack WebIDE

The Full Stack WebIDE Service is enabled by default on trial accounts. Navigate to the Service and launch the Full Stack WebIDE.

Activate the required plugins

Open the Settings pane

Click on the Extensions

Activate the Hybrid App Toolkit

Save the settings and restart the WebIDE to activate the new extensions / plugins.

Create a new Project

Click on the New Project from Template button

Use the SAPUI5 Application template

Provide a project name and details as it is done in any SAPUI5 development project.

Add an initial XML View e.g. named Main


Enable the Project as Hybrid Mobile Project

The HAT plugin allows you to add mobile capabilities to any SAPUI5 application. Use the context menu of the project to enable it as Hybrid Mobile Project.

A new folder named mobile will be added to your project.


Add the required Cordova Plugins

Use the context menu of the mobile folder to add the required Cordova Plugins.


Search for the Anyline plugin

Click on the Add action

Select the platforms (iOS / Android) that you would like to support


Develop the Application

Open the Main.view.xml and adjust to your needs. I have used a simple form and a Button in the footer toolbar.


Add the viewConfig as JSON file to the model folder

Open the manifest.json, add a JSON Model  (sap.ui.model.json.JSONModel) as default model and reference to the viewConfig.json in the URI field.

Open the Main.controller.js and add the business logic


Perform a Build

Use the context menu of the webapp folder to Build a Packaged App

Configure the Mobile Build Settings

Select the target platforms and select a Signing Profile. The signing profiles are loaded from the mobile services. You can create a new Signing Profile directly within this Wizard.

Perform the build by clicking the Build button

The build takes a few minutes. When the build is finished you will get the option to scan a QR Code from your mobile device or download the binaries.

You can now run the application on your mobile device.

Labels in this area