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 Android and iOS and additional benefits when integrated with the SMP 3.0 server.  See also the posts SAP Fiori & SMP and SAP Fiori - Mobile as well as Fiori Guidelines.

The SAP Fiori Client 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.  A prebuilt version is available from the iTunes and Android stores at iOS SAP Fiori Client mobile app and Android SAP Fiori Client mobile app.

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 in the folder C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client 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 3.6.3 "AppPreference"
  com.sap.mp.cordova.plugins.attachmentviewer 3.6.3 "AttachmentViewer"
  com.sap.mp.cordova.plugins.authproxy 3.6.3 "AuthProxy"
  com.sap.mp.cordova.plugins.barcodescanner 3.6.3 "BarcodeScanner"
  com.sap.mp.cordova.plugins.cachemanager 3.6.3 "CacheManager"
  com.sap.mp.cordova.plugins.corelibs 3.6.3 "CoreLibs"
  com.sap.mp.cordova.plugins.e2etrace 3.6.3 "E2ETrace"
  com.sap.mp.cordova.plugins.encryptedstorage 3.6.3 "EncryptedStorage"
  com.sap.mp.cordova.plugins.fioriclient 3.6.3 "FioriClient"
  com.sap.mp.cordova.plugins.i18n 3.6.3 "i18n"
  com.sap.mp.cordova.plugins.logger 3.6.3 "Logger"
  com.sap.mp.cordova.plugins.logon 3.6.3 "Logon"
  com.sap.mp.cordova.plugins.online 3.6.3 "Online"
  com.sap.mp.cordova.plugins.push 3.6.3 "Push"
  com.sap.mp.cordova.plugins.settings 3.6.3 "Settings"
  com.sap.mp.cordova.plugins.toolbar 3.6.3 "Toolbar"
  com.sap.mp.cordova.plugins.xhook 3.6.3 "Xhook"
  org.apache.cordova.camera 0.3.4 "Camera"
  org.apache.cordova.contacts 0.2.15 "Contacts"
  org.apache.cordova.device 0.2.13 "Device"
  org.apache.cordova.dialogs 0.2.11 "Notification"
  org.apache.cordova.file 1.3.2 "File"
  org.apache.cordova.geolocation 0.3.11 "Geolocation"
  org.apache.cordova.inappbrowser 0.3.4-patched "InAppBrowser"
  org.apache.cordova.media 0.2.15 "Media"
  org.apache.cordova.statusbar 0.1.9 "StatusBar"

• 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 app name and icon can be customized before create_fiori_client.js is run by modifying the appName in

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

  and icon.PNG files under

  C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\assets

  If the fioriURL variable is not specified in the appConfig or if the app is the one downloaded from the public app stores, the first screen shown requests the user to specify the URL to be used by the app.
  
  
  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 is not available or 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

  
  
  
  New in SP06 is the ability to view the device log and email it.
  
  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 change from www\index.html to 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 for the application specified by the variable 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.
  
  
• It is possible to not show the Set App Passcode screen and Log in screen by making the below modifications to either fioriclient.js file in the project or to the plugin version to avoid having the changes be overwritten after running cordova prepare.

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

  Note, this assumes the Client Password Policy for Default password allowed is set to true either in the Management Cockpit if using the SMP 3.0 server or in the passcode policy variable in the appConfig.js file if not using the SMP 3.0 server.
  
  Modify the method initLogonWithRegistration to include the below code.

      var logonView = sap.logon.IabUi;    logonView.onShowScreen = sap.FioriClient.customShowScreen;    logonView.onShowNotification = sap.FioriClient.customShowNotification;    sap.Logon.init(sap.FioriClient.logonWithRegistrationCompleted,                   sap.FioriClient.logonErrorCallback,                   sap.FioriClient.appID,                   sap.FioriClient.context,                   logonView);

  Modify the method initLogonWithoutRegistration to include the below code.

      logonView.onShowScreen = sap.FioriClient.customShowScreen;    logonView.onShowNotification = sap.FioriClient.customShowNotification;

  Add the following two methdods.

      customShowScreen: function(screenId, screenEvents, currentContext) {        if (screenId == "SCR_SET_PASSCODE_OPT_ON") {            screenEvents.ondisable();            return true;        }        else if (screenId == "SCR_SET_PASSCODE_OPT_OFF") {            var context2 = {};            screenEvents.onsubmit(context2);            return true;        }        return false;  //skip the default value    },    customShowNotification: function(screenId, notifcationKey) {        if (screenId == "SCR_SET_PASSCODE_OPT_ON" || screenId == "SCR_SET_PASSCODE_OPT_OFF" ) {            alert(notifcationKey);            return true;        }        return false;    },

Proxying the Fiori Client through an SMP 3.0 Server

The following steps demonstrate how to proxy a SAP Fiori application through a SMP 3.0 server.  Note this requires a server version greater than or equal to 3.0 SP03 PL02 or 3.0 SP04.
Also note, that the Relay Server cannot be used in in this scenario.

• 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 and the application being accessed such as https://sapui5.netweaver.ondemand.com is not within your internal network.  Note the proxy host and port for the SMP 3.0 server are set under Settings > System > HTTP proxy host.
  
  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/sap
  
  
  
  The authentication profile can be set to use the existing default profile.
  
  Save the application and if using the purchase order app verify that the endpoint can be pinged.  It is unlikely that a partial SAP Fiori URL such as https://m.sap.internal.de/sap can be successfully 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.  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
   or
  https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

  Notice that the app id, com.sap.fiori is prefixed to the first URL above.  This is required for when using a rewrite mode of No Rewriting or Rewrite URL in SMP.
  The second URL uses a rewrite mode of Rewrite URL in Backend System and does not have the app id as part of the URL.
  
  
• 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.
  
  
  
  For additional details see the HTTPS in the Security Appendix.
  
  
• Deploy and run the app.
  
  Since fioriURLIsSMP is set to true, the registration screen for the SMP 3.0 server is shown first. 
  
  
  
  The passcode policy is retrieved from the SMP 3.0 server during a successful registration process and then the set app passcode screen is shown next. 
  
  
  
  Then the first use tips page is shown followed by the SAP Fiori login page (if the app type is a Fiori App). 
  
  
  
  See the Single Sign On topic to enable the user name and password used by the SMP 3.0 server registration to be used for the SAP Fiori app which causes this screen to be skipped.
  
  
• When the appconfig.js file has fioriURLIsSMP set to true, the settings screen has three additional read only settings shown below.
  
  
  Note, if you wish to change the Fiori URL to point to a different SMP server, click the Clear All Application Settings button under Reset Settings.  This will cause the Logon plugin's registration screen to appear.
  
  
• 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, secure onboarding and the ability to access OData from a local on device store.
  
  

Single Sign On

The registration with a 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 (i.e. https://ldciu3e.wdf.sap.corp:44326/sap/bc/ping?sap-client=100) that will return an SSO Cookie, and set the SSO Cookie Name to the one returned 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