SAP Fiori Client (New in SP04)

SAP Fiori is a set of applications that cover some of the most frequently used SAP software functions.  These apps were written using SAPUI5 and hence can be accessed in a browser on a variety of devices.

When a SAP Fiori app is run in the SAP Fiori Client, it provides a set of enhancements to the app including the ability to access native device functionality such as a barcode scanner, improved caching of the app resources using the Cache Manager plugin, security enhancements such as the ability to set a whitelist of URLs the application can communicate with, handling of authentication challenges within a webview via the AuthProxy plugin, improved attachment handling on iOS and additional benefits when integrated with the SMP 3.0 server.  See also the posts SAP Fiori & SMP and SAP Fiori - Mobile.

Previously this functionality was available as a downloadable app from the iTunes and Android stores at iOS SAP Fiori Client mobile app and Android SAP Fiori Clientmobile app.  A similar app can now be created using the Kapsel plugins by running the following script.

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\create_fiori_client.js

Building the SAP Fiori Client yourself allows for the app to be customized.

The following steps will demonstrate an example of using the create_fiori_client.js script to create a Cordova app with Kapsel plugins that can be used to host SAP Fiori apps.  Note that currently there is no demo SAP Fiori test server so the demo SAPUI5 Purchase Order app can be used instead if you do not have access to a locally hosted SAP Fiori app.

For additional details see the script that creates the SAP Fiori Client at

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\create_fiori_client.js,

the JavaScript file used by the Fiori Client plugin in a project that includes this plugin at

project_name\plugins\com.sap.mp.cordova.plugins.fioriclient\www\fioriclient.js

or the documentation at SAP Fiori Client in SAP Mobile Platform.

• Edit the file

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\config.json

  Provide values such as those shown below.  Note, if you if you are running the script on Windows remove "ios" from the platforms or if you are running on a Mac and only wish to build one platform remove either "ios" or "android".

  {    "packageName": "com.sap.fiori.client",    "targetFolder": "FioriClient",    "appName": "FioriClient",    "platforms": ["ios", "android"]
  }

• In a command window  run

  npm install
  
  node create_fiori_client.js
  
  cd FioriClient
  

• Note that the create_fiori_client.js script has conveniently created a Cordova project containing Kapsel and Cordova plugins.

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient>cordova plugins
  [ 'com.sap.mp.cordova.plugins.apppreferences',  'com.sap.mp.cordova.plugins.authproxy',  'com.sap.mp.cordova.plugins.barcodescanner',  'com.sap.mp.cordova.plugins.cachemanager',  'com.sap.mp.cordova.plugins.corelibs',  'com.sap.mp.cordova.plugins.encryptedstorage',  'com.sap.mp.cordova.plugins.fioriclient',  'com.sap.mp.cordova.plugins.i18n',  'com.sap.mp.cordova.plugins.logger',  'com.sap.mp.cordova.plugins.logon',  'com.sap.mp.cordova.plugins.online',  'com.sap.mp.cordova.plugins.push',  'com.sap.mp.cordova.plugins.settings',  'com.sap.mp.cordova.plugins.toolbar',  'org.apache.cordova.camera',  'org.apache.cordova.console',  'org.apache.cordova.contacts',  'org.apache.cordova.device',  'org.apache.cordova.dialogs',  'org.apache.cordova.file',  'org.apache.cordova.geolocation',  'org.apache.cordova.inappbrowser' ]

• Edit the following file

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\www\appConfig.js

  and provide values such as those shown below.  Note the fioriURL should be changed to reflect the webserver that hosts your SAP Fiori applications or to the publicly available SAPUI5 purchase order demo at https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/m/demokit/poa/index.html

  cordova.define('fiori_client/appConfig', function(require, exports, module) {
       var appConfig = {
           "appID": "com.sap.fiori",
           //"fioriURL": "https://m.sap.internal.de:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html",
           "fioriURL": "https://sapui5.netweaver.ondemand.com:443/sdk/test-resources/sap/m/demokit/poa/index.html",
           "fioriURLIsSMP": false,
           "passcodePolicy": {
               "expirationDays":"0",
               "hasDigits":"false",
               "hasLowerCaseLetters":"false",
               "hasSpecialLetters":"false",
               "hasUpperCaseLetters":"false",
               "defaultAllowed":"true",
               "lockTimeout":"10",
               "minLength":"6",
               "minUniqueChars":"0",
               "retryLimit":"0"
           }
       };
       module.exports = appConfig; }); 

  The fioriURLIsSMP variable indicates if the SMP 3.0 server should be used as a proxy to access the SAP Fiori app.  An example of this is shown later in this section.  The passcode policy can be set in the SMP 3.0 management cockpit when fioriURLIsSMP = true or in the appConfig.js as shown above when fioriURLIsSMP = false.  Since the passcode policy setting defaultAllowed is set to true, this enables the ability to Disable the Passcode screen.
  
  
• Copy the files to the platform directory by running

  cordova -d prepare

• Use the Android IDE or Xcode to deploy and run the project.
  The script create_fiori_client.js has created an app that can be used to host a SAP Fiori App.  Some of the functionality of the app is illustrated below.
  
  The Set App Passcode screen is shown the first time the app is opened.  The Log in screen is shown when the app is subsequently opened or resumed from the background.  This provides additional security for the app and can be configured by the passcodePolicy set in the appConfig.js file.
  
  
  The first use tip is shown the first time the app is opened.  To customize this see the method showFirstUseTips in the following file.

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\platforms\android\assets\www\js\index.js

  
  
  If the URL being accessed uses HTTPS and the certificate authority that signed the web server's certificate is not trusted by the device, an error page will be shown. 
  
  
  For additional details see the HTTPS in the Security Appendix.
  
  By double tapping, a native menu is shown.  The menu items are added in the initClient method in the following file.

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\platforms\android\assets\www\plugins\com.sap.mp.cordova.plugins.fioriclient\www\fioriclient.js

  
  
  
  The settings are implemented in fioriclient.js and validation.html on Android and in the Root.plist file on iOS.
  
  
  Notice that the logic for the app is in two places depending on when it is needed.  The logic to show the first use tips and to switch to goto the Fiori URL is in index.js.  Once the URL changes, the methods and variables defined in index.js are removed from memory.  At this point the logic in fioriclient.js and the other plugins are loaded by the Online Application plugin as is the methods and variables from the application specified for the variable in fioriURL.
  
  If the application to be accessed uses HTTPS and the certificate authority that signed the web server's certificate is not known to the device, the certificate authority's public certificate will need to be installed on the mobile device or emulator.  A quick test to see if the site can be opened is to open the URL on the device's browser.  See HTTPS in the security appendix for additional details.
  
  
• Note that on iOS, there are a few settings that can control how the status bar is displayed in the config.xml by use of the StatusBar Plugin.
  
  StatusBarOverlaysWebview is set to false
  
  
  StatusBarOverlaysWebview is set to true
  
  The background color of the status bar can also be set via SatusBarBackgroundColor.
  
  SatusBarBackgroundColor 009ce6 with StatusBarOverlaysWebView set to false.
  
  

Proxying the Fiori Client through a SMP 3.0 SP03 PL02 Server

The following steps demonstrate how to proxy a SAP Fiori application through an SMP 3.0 server.  Note this requires a server version greater than or equal to 3.0 SP03 PL02 or 3.0 SP04.

• Create a Kapsel application with an id of com.sap.fiori and an endpoint of a partial URL for the server that is running Fiori or if one is not available, the demo SAPUI5 purchase order app.  The full URL to access the purchase order app is

  https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/m/demokit/poa/index.html

  The partial URL that can be entered as the endpoint is

  https://sapui5.netweaver.ondemand.com

  Set the Use System Proxy connection if your network uses a proxy.
  
  Rewrite mode should be No Rewriting if using the purchase order app or Rewrite URL in Backend System if used with a SAP Fiori app.  When using Rewrite URL in Backend System, the Endpoint in the management cockpit should be the something like https://m.sap.internal.de
  
  
  
  The authentication profile can be set to use the existing default profile.
  
  Save the application and verify that the endpoint can be pinged.
  
  
  
• In the file

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\www\appConfig.js

  set the variable fioriURLIsSMP to true to indicate that the connection to the app will be proxied through the SMP 3.0 server.
  
  Set the fioriURL to a URL as shown below.  Note, the port must be explicitly specified.  The method parseAppConfig will parse the URL and use it to specify the values on the Logon plugin's registration screen.

  "https://YKFN00528072A.amer.global.corp.sap:443/com.sap.fiori/sdk/test-resources/sap/m/demokit/poa/index.html"

  Notice that the app id, com.sap.fiori is prefixed to the string above as proxied requests when using a rewrite mode of No Rewriting or Rewrite URL in SMP require the connection name.
  
  
• Notice that the endpoint uses HTTPS, the certificate that the server uses was signed by GTE Cybertrust Global Root and there is a GTE certificate already installed in the SMP 3.0 server's keystore.
  
  
  
  
• Deploy and run the app.
  
  
• When the SAP Fiori Client is used with the SMP 3.0 server, statistics can be viewed such as those shown below. 
  
  
  The log level can be set and a device log retrieved.  Note the log will be available as shown here after the app has been restarted and the Log Upload checkbox has been checked. 
  
  
  In addition, the passcode policy can be set, notifications can be sent to the device and in a future release, offline OData and secure onboarding will be available.
  
  

Single Sign On

The registration with an SMP 3.0 server for a SAP Fiori app can be made to use a single sign on mechanism so that the user does not need to provide the user name and password for the SAP Fiori app each time it is opened.  To do this, modify the authentication provider for the app to use an HTTP/HTTPS authentication provider.  Set the control flag to be required, provide a URL that will return an SSO Cookie, and set the SSO Cookie Name to MYSAPSSO2 as show in the image below.

When the application initially starts, the logon plugin's registration screen will show and will upon successful registration receive a MYSAPSSO2 cookie that is passed to the SAP Fiori app causing it to open directly without showing its logon screen.  See also MySAPSS02 Cookie.

Back to Getting Started With Kapsel