SAP Fiori Client

User Interface libraries like OpenUI5 and SAPUI5 are part of the SAP UX (User Experience) strategy. SAP is delivering enterprise ready apps called SAP Fiori, where the underlying ui technology is UI5 and the dataservices are OData driven by the SAP Gateway. The SAP Fiori Client should give the user an anhanced ui experience.

SAP Fiori Client is a native application runtime for SAP Fiori on Android and iOS devices. The app acts as an enterprise enhancement to the mobile browser when SAP Fiori applications are running. It uses the same multi-channel SAP Fiori Web application, but users can enjoy more consistent performance thanks to the enhanced cache management features in the SAP Fiori Client. The application, a native mobile app built using the open source Apache Cordova framework, renders SAP Fiori application content, and provides more reliable asset caching (HTML, CSS, JavaScript files, and more) plus, on iOS, an enhanced attachment viewing process.

The needed native apps are freely available for iOS on the Apple Store and for Android on the Google play Store. In the near future, a client for Windows devices will also be available (see Feature Matrix).

SAP Fiori Client Feature Matrix

The Fiori Client supports the following feature set:

SAP Fiori Client Feature Matrix

Some of this features are part of the cordova plugin architecture and the other ones belong to the SAP Kapsel plugins. The Kapsel plugins are part of the SAP Mobile Platform (SMP).

Kapsel is a set of plugins for Apache Cordova which adds SMP capabilities to a Cordova application. The plugins provide a subset of the capabilities provided by the SMP Hybrid Web Container (HWC); this is only an initial release, so additional capabilities will come over to Kapsel over time.

Benefits for UI5 Developers

How can my custom UI5 app benefit from the freely available SAP Fiori Client?

For this reason i created a small online demo to show you some features.

First of all, you have to install the needed client app from the corresponding iOS or Android store on your native device (yes, the demo features will only be available, if the web app is running inside the SAP Fiori Client!).

The reason for this is, that the SAP Fiori Client itself is a UI5 app, but compiled as a native device app using Apache Cordova. The Apache Cordova Framework adds a browser component, so the client itself can be seen as a new custom browser like the Google Chrome Browser on iOS devices (which internally uses the Apple Safari instead of his own renderer).

A regular UI5 web site, which runs inside the browser, does not have access to the native device features. If you are running your UI5 web site from within the SAP Fiori Client, there will be a special javascript api available, to acccess all the features shown in the feature matrix.

Most of this features are thought as an enhanced usability experience, which means that the app will be also useable without that features inside regular browsers, but if the app is running inside the client, you will have an additional enhanced user experience. To demonstrate this, the demo implements the Barcode Scanner to use the camera for scanning barcodes. The barcode will be converted into a text representation and inserted into a input field. If you have for example a shopping app, you will have a searchfield for entering product numbers. Inside the SAP Fiori Client, you can also use the barcode scanner to scan EAN codes into the search field and find the corresponding product (you know this feature from amazon and all the others).

Using the client on iOS (maybe android too) has an additional advantage, if you switch between apps. The UI5 app running inside the browser will automatically reload, if you switch between the browser and other apps. For authenticated apps, you generally have to reauthenticate again. The SAP Fiori Client behaves stateful during app switches and is also continously executed in the background. For me, this is one of the most important features of the client.

Using the Demo (iPhone)

If you have installed the SAP Fiori Client, you have to set one launch url. You can also set a passcode, to secure you app with a 4 digit code (remember, the app will be stateful between app switches), but you can also skip this option.

Setup SAP Fiori Client with Plunker URI
http://run.plnkr.co/plunks/nvcVdsMxvk3S4UJGjuLl/

After the initial setup, the client directly launches fullscreen into the demo app. If you will change the used URL later on, there is a special double-tap gestoure to show a popup menu on top of the ui5 app. More infos on this can be found in the SAP Fiori Client Help.

SAP Fiori Client UI5 App

App User Interface

Attachment Viewer in action

Barcode Scanner in action

Example Barcode (Code 128) 

Camera in action

I think, the demo is a good starting point, to dive deeper into native device features. For thoose of you, who does not want to build there own PhoneGap/Cordova native app, this is a quit handy solution.