How to access Mobile features in Fiori using CORDOVA?

Cordova App Creation and using the App in FIORI

The Cordova development requires HTML/JavaScript/CSS skills to build cross-platform mobile applications for iOS or Android and other mobile platforms.

This blog contains some of the questions and decisions you should consider before beginning your next cross-platform Cordova project.

What is Cordova?

Cordova is owned and maintained by Apache and will always be maintained as an open source project. Apache Cordova is a project of The Apache Software Foundation (ASF). Cordova Android is an Android application library that allows for Cordova-based projects to be built for the Android Platform. Applications based on Cordova are, at the core, applications written with web technology: HTML, CSS, and JavaScript.

Cordova Tools:

  • Adobe PhoneGap. PhoneGap is the original and most popular distribution of Apache Cordova.
  • Ionic is a front-end SDK for building cross-platform mobile apps
  • Monaca
  • Onsen UI
  • Visual Studio
  • App Builder
  • Cocoon
  • Framework7

Plugins used for CORDOVA

Plugins are a big part of the magic of Cordova Apache development. You can also search through all existing plugins using Cordova Plugin Registry. Cordova ships with a minimal set of APIs and projects add what extra APIs they require through plugins.

The core set of “blessed” Cordova plugins provide access to Battery, Camera, Dialogs, Geolocation, and more, which are generally available across all supported platforms. There are many other third-party plugins that allow extra functionality including native sharing, analytics, and other platforms and device-specific capabilities.

Note: The cross-platform support is typically more limited with third-party plugins. Make sure that you are aware of which plugins you will need and make sure that they are available on the platforms and versions you will be supporting.

CORDOVA platforms and version

Cordova will support iOS6, iOS7, and iOS8, and Android 4.4 (KitKat, version 19), with Cordova-blessed and third-party plugins, and modern-browser-friendly HTML5 and CSS3 and Support for legacy Android versions is a bit more complicated. The Facebook and Twitter iOS apps only support iOS 6 and later. It is not as easy to support iOS5 and earlier as these versions have been deprecated in Cordova as of version 3.5.

The first-generation iPad is locked at version 5.1.1, so those iPad users will not be able to download your app from the App Store unless you customize the application in XCode.

Android versions 4.4 (KitKat) has excellent CSS3 & HTML support. You can most likely just build your working iOS Cordova app for Android and view it in a 4.4.x version Android device and not have any issues at all.

Links for reference before starting your own application: Android Developer dashboard, Cordova Security Guide, Cordova device plugin.

Form factors to be considered

Each platform and platform version will introduce an extra level of effort, each form-factor/break-point setting will introduce a new level of effort for designers and developers. And each level of effort for designers/developers will create a new level of effort for testing requirements for each platform version.

For a project with three supported versions with two identical form-factors, there are two levels of designer/developer effort and six levels of testing effort involved.

CORDOVA offline support

You can use Cordova Network/Connection plugin to detect the connection type and to handle online and offline detection and event handling.

Using FIORI Apps offline: (Real-time scenario)

A customer who is interested in using these apps offline needs to apply SAP Fiori. As further prerequisites, SAP Mobile Platform (or its cloud edition HCPms) is required, and SAP Mobile Secure.

  • The user can view, create and change data in the offline app. The user experience is as known from SAP Fiori
  • All data is stored locally on the device
  • Data is synchronized with the CRM back-end via SMP or its cloud edition HCPms
  • When having network connection data is immediately sent to the back-end system

For app users this is great

  • Work wherever you are, with or without a network connection
  • Count always on a reasonable speed of the applications
  • Forget about making sure that your changes made offline are in the back-end

Now let’s come to building an offline app

In the customer environment, the apps are packaged for offline use: The customer assembles all relevant data in a package. Then the customer uploads this package to “Mobile Place” of SAP Mobile Secure. From there the users can install the offline app on their devices.

Cordova Application

Detailed documentation can be found here in “Preparing SAP Fiori Apps for Offline Use” (

This approach has some great advantages:

  • The offline apps are under control by the customer. Examples: They can be enhanced customer-specific; different offline apps can be provided for different user groups; branding, such as the use of a company-specific app-icon, can be applied
  • Which data is provisioned to the devices can be defined flexibly (default: as defined for “online” app)
  • The apps are NOT native apps: One common code line is used
  • The known Fiori design principles apply, such as responsiveness

If you want to release your application to the App Store, at the time you should learn some basics of XCode development.

CORDOVA with XCode and Eclipse

Most of the Android settings can be changed directly in the AndroidManifest.xml file so knowledge of the Eclipse IDE is not essential.

How to test the app and debug:

Debugging Cordova applications can sometimes be a challenge, but if you are familiar with Chrome and Safari Dev Tools it is much easier. For Android devices, you should be able to choose Tools > Inspect Devices and have full access to your application’s HTML, CSS, and JS. And iOS once debugging is enabled in iOS Safari and Mac Safari, you will have access to the Developer Panel.

You can also reload the app with Command+R and another approach debugging is to open the console before the application starts up.

Configure with FIORI:

Once completed your application end to end and submit your application to gateway client. then launching your application in FIORI.

I hope this blog helps you to think about the application development with Cordova and using in FIORI.

Mohan Raj

Related Posts
Leave a reply
Captcha Click on image to update the captcha .