Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Dan_vL
Product and Topic Expert
Product and Topic Expert
Previous   Home   Next

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. Details on the over 1000 apps are available at Fiori Apps Library. There is a demo of a few SAP Fiori apps available at SAP Fiori, Demo Cloud Edition.

When an SAP Fiori app is run in the SAP Fiori Client, it provides a set of enhancements to the app including the ability to customize or brand the app title, app icon, splash screen, first use tip screen, access native device functionality such as a barcode scanner, 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 SAP Cloud Platform Mobile Services or SMP 3.0 server.

A prebuilt version of the SAP Fiori Client is available from the iTunes, Android, and Windows stores at iOS SAP Fiori Client mobile app, Android SAP Fiori Client mobile app, and Windows 10 SAP Fiori Client.
Note, the Fiori Client for Android is also available from SAP at Android Fiori Client on SAP Market Place or MOB SAP FIORI CLIENT AND 1.X.X.

A custom version of the SAP Fiori Client for Android, iOS and as of SP13, Windows 10 can be created using the Kapsel SDK. Building the SAP Fiori Client yourself allows for the app to be customized. New plugins can be added or ones that are not being used can be removed.

See also the What's New -- Release Notes of the SAP Fiori Client Guide.

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 at
C:\SAP\MobileSDK3\KapselSDK\plugins\fioriclient\www\fioriclient.js,

and the documentation at Users Guide and SAP Fiori Client.

Questions on the SAP Fiori Client can be viewed using the search Questions tagged with SAP Fiori Client.

Blogs on the SAP Fiori Client viewed using the search Blogs tagged with SAP Fiori Client.



The following steps will demonstrate how to create the SAP Fiori Client using SMP SDK.

Building the SAP Fiori Client
Running the SAP Fiori Client
Customizations
Changing the App Name, Icon, and Splash Screen
Changing the Background Image
Modifying the Version
Modifying the Status Bar
Hiding Last Screen from AppSwitcher and Enabling or Disabling Screen Capture
Using Push in the SAP Fiori Client
Configurations
Opening the Fiori Client from an External Link
No Bridge
Using an X.509 Certificate
Using a Mobile Device Management Solution to Configure Initial Settings
Performance Settings
Troubleshooting
Proxying the Fiori Client through an SMP or SAP Cloud Platform Mobile Services Server
Proxying the Fiori Client through SAP Cloud Platform Mobile Services to the SAP Fiori Cloud

See also the following posts.
Creating a custom Fiori Client using the SAP Cloud Build
SAP Fiori & SMP
Introducing SAP Fiori Client 1.2
SAP Fiori - Mobile
Fiori Guidelines
SAP Fiori Launchpad
SAP Fiori Reference Apps
Mobile Single Sign-On for SAP Fiori with SAP Authenticator
Configuring SAP Fiori Client for Single Sign-On with iOS SAP Authenticator

Building the SAP Fiori Client



  • Edit the file
    C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\config.json or /Users/i82xxxx/SAP/MobileSDK3/KapselSDK/apps/fiori_client/config.json

    Only include the platforms you wish to build and remove the others. Note, building for iOS requires a Mac.
    {
    "packageName": "com.sap.fiori",
    "targetFolder": "FioriClient",
    "appName": "FioriClient",
    "platforms": ["ios", "android", "windows"],
    "platforms": ["android"],
    "cordovaPluginIncludes" : [],
    "cordovaPluginExcludes" : ["@sap/kapsel-plugin-push","@sap/cordova-plugin-privacyscreen"],
    "crosswalkEnabled" : false
    }


  • In a command window run the following commands.
    cd C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client
    or on a Mac
    cd ~/SAP/MobileSDK3/KapselSDK/apps/fiori_client

    npm install
    node create_fiori_client.js
    cd FioriClient


  • Note it is also possible to debug the create_fiori_client.js script file. For additional details see V8 Inspector Integration for Node.js. Note this is an optional step.
    node --inspect --debug-brk create_fiori_client.js


  • 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
    cordova-plugin-camera 2.4.0 "Camera"
    cordova-plugin-compat 1.1.0 "Compat"
    cordova-plugin-contacts 2.3.0 "Contacts"
    cordova-plugin-customurlscheme 4.2.0 "Custom URL scheme"
    cordova-plugin-device 1.1.5 "Device"
    cordova-plugin-dialogs 1.3.2 "Notification"
    cordova-plugin-file 4.3.1 "File"
    cordova-plugin-geolocation 2.4.2 "Geolocation"
    cordova-plugin-network-information 1.3.2 "Network Information"
    cordova-plugin-screen-orientation 1.4.2 "Screen Orientation"
    cordova-plugin-splashscreen 4.0.2 "Splashscreen"
    cordova-plugin-statusbar 2.2.2 "StatusBar"
    cordova-plugin-whitelist 1.3.2 "Whitelist"
    de.appplant.cordova.plugin.printer 0.7.0 "Printer"
    kapsel-plugin-apppreferences 3.15.2 "AppPreference"
    kapsel-plugin-attachmentviewer 3.15.2 "AttachmentViewer"
    kapsel-plugin-authproxy 3.15.2 "AuthProxy"
    kapsel-plugin-barcodescanner 3.15.2 "BarcodeScanner"
    kapsel-plugin-cachemanager 3.15.2 "CacheManager"
    kapsel-plugin-calendar 4.4.4 "Calendar"
    kapsel-plugin-cdsprovider 3.15.2 "CDSProvider"
    kapsel-plugin-corelibs 3.15.2 "CoreLibs"
    kapsel-plugin-encryptedstorage 3.15.2 "EncryptedStorage"
    kapsel-plugin-federationprovider 3.15.2 "FederationProvider"
    kapsel-plugin-fioriclient 3.15.2 "FioriClient"
    kapsel-plugin-i18n 3.15.2 "i18n"
    kapsel-plugin-inappbrowser 3.15.2 "InAppBrowser"
    kapsel-plugin-logger 3.15.2 "Logger"
    kapsel-plugin-logon 3.15.2 "Logon"
    kapsel-plugin-multidex 3.15.2 "Multidex"
    kapsel-plugin-online 3.15.2 "Online"
    kapsel-plugin-settings 3.15.2 "Settings"
    kapsel-plugin-toolbar 3.15.2 "Toolbar"
    kapsel-plugin-ui5 3.15.2 "ui5"
    kapsel-plugin-usage 3.15.2 "Usage"
    kapsel-plugin-voicerecording 3.15.2 "Voice Recording"


  • Edit the following file:
    C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\www\appConfig.js

    Provide values such as those shown below.
    Note the fioriURL should be changed to reflect the webserver that hosts your SAP Fiori applications uses or to the trial SAP Fiori Launchpad.
    Note the website http://jsonlint.com/ can be used to validate JSON such as the contents of the appConfig variable below.
    fiori_client_appConfig = {
    "appID": "com.sap.fiori",
    //"fioriURL" : "https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001",
    "fioriURLIsSMP": false,
    "certificate": "",
    "autoSelectSingleCert": false,
    //"backgroundImage": "../../../nightsky.jpg",
    "disablePasscode": false,
    "passcodePolicy": {
    "expirationDays":"0",
    "hasDigits":"false",
    "hasLowerCaseLetters":"false",
    "hasSpecialLetters":"false",
    "hasUpperCaseLetters":"false",
    "defaultAllowed":"true",
    "lockTimeout":"300",
    "minLength":"8",
    "minUniqueChars":"0",
    "retryLimit":"0"
    //"allowFingerprint":"true"
    }
    };

    The fioriURLIsSMP setting indicates if the SAP Cloud Platform Mobile Services or SMP 3.0 server should be used as a proxy to access the SAP Fiori app enabling additional logging, authentication mechanisms, push notifications etc. An example of this being set to true is shown later in this document.
    The passcode policy can be set in the server management cockpit when fioriURLIsSMP is true or in the appConfig.js as shown above when fioriURLIsSMP is false. Since the passcode policy setting defaultAllowed is set to true, this allows the user the option to disable the Passcode screen.

  • Build and deploy the project via the following command.
    cordova run android
    or
    cordova run ios
    or
    cordova run windows -- --archs=x64



Running the SAP Fiori Client


Some of the functionality of the app is illustrated below.

If the fioriURL variable is not specified in the appConfig.js or if the app is the one downloaded from the public app stores, the first screen shown requests the user to choose between Log In or Demo Mode. Demo mode uses the trial URL automatically and disables the passcode screen.




If using SAP Mobile Secure, an email can be provided instead of a URL that the Fiori Client will then use the email domain to get the details on how to connect to the Fiori app. Entering an email is typically less error prone than entering a long URL.

Note the Fiori Client will send its package name and that must match the Application Configuration ID. In the example below that is com.sap.fiori2. The Fiori Client on the app stores uses the id of com.sap.fiori.client.
The following is an example configuration in SAP Mobile Secure and the email address that would be entered.
dan@trial-i82XXXXtrial.sapmobileplace.com



New in SP14 is the ability to use the Barcode scanner to enter a URL.

The following QR code generated at QR Code Generator encodes the following trial URL.
https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helps...


This screen can be skipped via the disablePasscode setting in the appConfig.js file.
The passcode policy is configured in the appConfig.js or in the SMP management cockpit when fioriURLIsSMP is set to true.


The Enter Passcode screen is shown when the app is subsequently opened or resumed from the background when a passcode has been set and the locktimeout has expired.


The first use tip screen is shown the first time the app is opened. To customize this, see the method showFirstUseTips and also logonCompletedCallback in the following file.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\plugins\kapsel-plugin-fioriclient\www\fioriclient.js

To remove it, add the below line to deviceready event in the www\js\index.js file.
sap.AppPreferences.setPreferenceValue('skipShowFirstUseTips', true);


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 Installing a Certificate or the HTTPS in the Security Appendix. A quick test to see if the site can be opened is to open the URL on the device's browser.

A new feature in SP15 is the ability to save entered credentials so the user does not need to re-enter them. Note this feature is only enabled when the app has a passcode and the setting allowSavingFormCredentials is set to true in the appConfig.js or set via an fioriURL parameter.


The next time the application opens, the credentials will be automatically entered.


Note in order to use allowSavingFormCredentials feature with SAML, the IDP host must be added to the nobridgewhitelist. The following is an example URL.
https://fiorilaunchpad.sap.com?allowSavingFormCredentials=true&nobridgewhitelist=accounts.sap.com

 

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\plugins\kapsel-plugin-fioriclient\www\fioriclient.js





The ability to view the device log and send it in an email is shown below.


The settings are implemented in fioriclient.js (and validation.html for Android).


Customizations


Changing the App Name, Icon and Splash Screen


The app name, icon and splash screen can be customized before create_fiori_client.js is run by modifying the appName in the following file.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\config.json

The icon.PNG files are under the following folder.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\template\res

The splash screen resources under the following folder.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\template\res\screen



As of SP11, the App Name in the Logon screen can be specified via the appName setting in the following file.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\www\appConfig.js

If it is not specified it defaults to SAP Fiori Client.

Changing the Background Image


The flowers background image of the SAP Fiori Client can easily be replaced via the backgroundImage setting in appConfig.js file as of SP13.

Modifying the Version


On Android and iOS, the version is specified in the following file.
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\config.xml
<widget id="com.sap.fiori" version="3.0.14.1"

In Xcode the build field should match the value in the config.xml file after running cordova prepare ios.


Note there is also a version displayed on the iOS settings screen. This version can be changed by editing the Resources > Settings.bundle > Root.plist file.

The version is specified in the following file on Windows:
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\plugins\kapsel-plugin-fioriclient\www\messages_en.properties

Modifying the Status Bar


Note that on iOS, there are a few settings that can control how the status bar is displayed. The Fiori Client uses the StatusBar Plugin with the following settings set in config.xml.
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<preference name="StatusBarBackgroundColor" value="#FFFFFF" />


Note that statusbar can be removed by adding the following code to the file Resources/FioriClient-Info.plist.
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Hiding Last Screen from AppSwitcher and Enabling or Disabling Screen Capture


As of SP11, the Fiori Client includes the Privacy Screen plugin which on Android prevents the screen from being captured and on iOS and Android, prevents the last displayed screen from appearing in the app switcher. To remove this functionality run the following command to remove this plugin.
cordova plugin remove cordova-plugin-privacyscreen

As of SP 15, the Fiori Client on Android will likely have a menu option to enable or disable this feature.

Using Push in the SAP Fiori Client


The following is an example demonstrating how to send a push notification to the iOS or Android Fiori Client downloaded from the Apple App Store or the Google Play Store. To send a notification to a custom Fiori Client or for further details on the Kapsel Push plugin see Push.

  • Host the following HTML page at a location that is available on the internet or use the SAP Cloud Connector to enable the SAP Cloud Platform Mobile Services server to access a page hosted on your internal network.
    <html>
    <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    </head>
    <script>
    function onSapLogonSuccess() {
    alert("EventLogging: onSapLogonSuccess");
    initPush();
    }

    function initPush() {
    alert("EventLogging: initPush");
    sap.Push.initPush(processNotification);
    }

    function processNotification(notification) {
    alert("in processNotification: " + JSON.stringify(notification));
    if (sap.Push.setPushFeedbackStatus && notification.additionalData) { //SP15 new feature
    sap.Push.setPushFeedbackStatus('consumed', notification.additionalData.notificationId, pushFeedbackStatusSuccessCallback, pushFeedbackStatusErrorCallback);
    }
    }

    document.addEventListener("onSapLogonSuccess", onSapLogonSuccess, false);
    </script>
    <h1>Push Demo</h1>
    </html>​


  • Configure an application in the SAP Cloud Platform Mobile Services management cockpit. Note the below is using the cloud connector and as such the Proxy Type is set to OnPremise.Below, the Predefined Push Configuration is enabled which can only be used with the App Store Fiori Client on iOS and Android. See also, Predefined Push Configuration.

  • Open the Fiori Client and enter a URL that will be used to register against the SAP Cloud Platform Mobile Services server.
    https://hcpms-i82XXXXtrial.hanatrial.ondemand.com/com.sap.fiori2?appid=com.sap.fiori2&fioriurlissmp=...


  • Use the Push Desk or a REST client to send a notification to the Fiori Client. Note, in the Push Desk, you must click on the filter and select iOS and Android under the Device Type drop down.
    There are further instructions on using the postman REST client here.

  • The notifications will appear on the iOS or Android device.
    Notice below the badge count is set to 2 as that was the number specified in the REST client via the "badge" setting.
    When clicked on the Fiori Client will open and which can then take further action based on the contents of the notification.

  • For more on Fiori Notifications which occur within the Fiori Launchpad see Notification Center.


Configurations


Opening the Fiori Client from an External Link


It is possible to provide a link to the Fiori Client or to a specific Fiori App within the Fiori Client on a webpage or an email. Here are a couple of examples. When the link is selected in a browser, the SAP Fiori Client will open.
<a href="com.sap.fiori.xcallbackurl://x-callback-url/openFioriUrl">Deep Link to Fiori Client</a>
<a href="com.sap.fiori.xcallbackurl://x-callback-url/openFioriUrl?url=https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helpset=trial&sap-client=001#ContactPerson-MyContact">My Contacts</a>


Note, the com.sap.fiori comes from the packageName specified in the file C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\config.json.
The second link contains the URL to be opened in the Fiori Client. In this case it contains #ContactPerson-MyContacts which will open the CRM app My Contacts.

See also Creating a Mobile Deep Link to an Application in SAP Fiori Client.

No Bridge


No Bridge prevents access to the native plugins added to the SAP Fiori Client unless the WebView URL has the same host as the fioriURL specified in the settings.
As the SAP Fiori Client from the app store can be used with a user provided Fiori URL the protection provided by the navigation whitelist in the Whitelist plugin are disabled as these must be configured at build time. Specifically, the SAP Fiori Client from the app store has the following setting in its config.xml file.
<allow-navigation href="*" />

Prior to the No Bridge security enhancement, with the combination of the Kapsel online plugin and the wildcard in the allow-navigation setting, it was possible for any page to be loaded by the WebView and that page would have access to the API's provided by the plugins included in the SAP Fiori Client.
If you know in advance the URLs that a custom SAP Fiori Client will access, it may make sense to specify them using the whitelist plugin. It is not possible to change the settings in the config.xml for the app store versions of the SAP Fiori Client.

The following steps will demonstrate this feature.

  • Create the following HTML page at a location that is available over HTTP such as the following location.
    C:\SAP\MobilePlatform3\Server\webapps\sapui5\index1.html

    The contents for index1.html can be copied from below content.
    <html>
    <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>No Bridge Demo index1</title>
    <script>
    document.addEventListener("deviceready", init, false);

    function init() {
    log(location.href);
    log("Device version: " + device.version);
    }

    function log(line) {
    var results = document.getElementById("log_lines");
    results.innerHTML+= "<br>" + line;
    }

    </script>
    </head>
    <body>
    <h1>No Bridge Demo index1</h1>
    <button onclick="location.href='http://YKFN00620418A.amer.global.corp.sap:8080/sapui5/index1.html'">index1.html by Machine Name</button>&nbsp;&nbsp;
    <button onclick="location.href='http://10.7.168.124:8080/sapui5/index1.html'">index1.html by IP address</button><br><br>
    <button onclick="sap.Online.showBusyIndicator()">Show Busy Indicator</button>&nbsp;&nbsp;<button onclick="sap.Online.hideBusyIndicator()">Hide Busy Indicator</button>
    <div id="log_lines"></div>
    </body>
    </html>

    Modify the above links to use your machine's fully qualified domain name and the IP address.

  • Configure the fioriURL of the SAP Fiori Client to use index1.html referencing the fully qualified domain name such as the following URL.
    http://YKFN00620418A.amer.global.corp.sap:8080/sapui5/index1.html


  • Run the SAP Fiori Client.

  • Notice that the navigation to index1.html by Machine Name works, and the navigation to index1.html by IP address loads but it is not possible to successfully call methods of the added plugins such as sap.Online.showBusyIndicator() because the machine name is different. The following message appears in the Android logcat when attempting to show the Busy Indicator which invokes an API of the online plugin.

    The following appears in the Xcode All Output view when attempting to access this API.
    ERROR: Plugin 'Online' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
    2015-11-04 12:05:33.398 FioriClient[576:104290] -[CDVCommandQueue executePending] [Line 159] FAILED pluginJSON = ["INVALID","Online","showBusyIndicator",[]]

    In SP14, logging was added at the DEBUG level on Android using the log tag of FEATUREVECTOR.

    In SP13 only, the showBusyIndicator does not work unless the following entry is added to the config.xml.
    <preference name="useBusyIndicator" value="false" />


  • Note: the following plugins are excluded from the No Bridge feature.

    • Logger

    • Toolbar

    • Whitelist

    • Device


     

  • It is possible to specify additional URL's that should not be affected by the no bridge feature. This can be specified via a parameter in the appconfig.js file named noBridgewhitelist as shown below.
        "fioriURL":"http://YKFN00620418A.amer.global.corp.sap:8080/sapui5/index1.html",
    "noBridgewhitelist":["10.7.168.124:8080"],

    Alternatively it can be specified as a URL parameter in the Fiori Client UI when the user provides the Fiori URL. For example on the Enter Fiori URL page, the following URL could be provided.
    http://YKFN00620418A.amer.global.corp.sap:8080/sapui5/index1.html?noBridgewhitelist=*

    The following are a few examples of possible values.
    noBridgewhitelist=*
    noBridgewhitelist=wdf.sap.corp
    noBridgewhitelist=*.wdf.sap.corp
    noBridgewhitelist=*.yahoo.com,*.google.com

    One common case where this may be needed is if your application contains links to attachments that are hosted on another server or if you wish to use the allowSavingFormCredentials feature with SAML.

  • This feature can be disabled on Android by renaming the following two files and recreating the Fiori Client.
    C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\template\scripts\android\after_platform_add\PluginAspect.aj to PluginAspect.aj.bak
    C:\SAP\MobileSDK3\KapselSDK\SP15\apps\fiori_client\template\scripts\android\after_platform_add\prepareRestriction.js to prepareRestriction.js.bak


  • This feature can be disabled on iOS by adding the following setting.

  • Note, if No Bridge is disabled, consider replacing * from allow-navigation in the config.xml with a more restricted pattern.

  • For additional security topics see the following documents.
    Technical setup of an SAP Fiori Landscape - Part 3: Mobilizing Fiori
    Configuration and Deployment Information and
    Configuring Security in SAP Mobile Platform.


Using an X.509 Certificate


When an X.509 certificate is installed on an iOS device, it is only accessible to select applications such as Mobile Safari or Mail. See Making Certificates and Keys Available To Your App.

It is possible to use SAP Afaria to provision the SAP Fiori Client with an X.509 client certificate. To do this include the certificate=com.sap.afaria on the URL as shown below.
https://mo-39d7636c8.mo.sap.corp:44301/sap/bc/ui5_ui5/sap/zbarc_ui5_app?appid=test&fioriurlissmp=fal...

If you wish to use a third party mobile device management solution to provide the X.509 client certificate, a custom SAP Fiori Client could be built that included a custom certificate provider. The fioriURL would then include the parameter &certificate=com.mycompany.certprovider.CustomCertificateProvider.

One other option on iOS would be to create a second application that is able to acquire a X.509 certificate and then to share that with a custom SAP Fiori Client through keychain sharing. See also Configuring Keychain Sharing.

In 3.1 SP01 PL04, the Fiori Client on Android has a new URL parameter named handleX509=false which can be useful if you wish it to not respond to a certificate challenge.

Using a Mobile Device Management Solution to Configure Initial Settings


A mobile device management solution such as SAP Afaria can be used to configure initial settings similar to those that can be set in appConfig.js file on iOS.
Note if using SAP Mobile Secure or SAP Afaria place this info in the managed App Configuration section.
If the MDM supports JSON format, create a JSON object as follows:
config={ 
"appID":"com.sap.fiori.client.release",
"fioriURL":"https://<your-host>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN",
"fioriURLIsSMP":false,
"certificate" : "com.sap.afaria",
"passcodePolicy":{}
}

Note the appID must match the bundle ID.
See also Configuring SAP Fiori Client Using an MDM Solution.

Performance Settings


There are a few things that can be done to improve the startup time of the Fiori Client.

  • The deviceready event fires after all the plugins have loaded. Remove any unused plugins.

  • The skipIndex setting can be specified in the config.xml file. This setting indicates that the Fiori Client will not load the index.html in the project directory and will only load the fioriURL. This can significantly decrease the startup time of the Fiori Client.
    <preference name="skipIndex" value="true" />

    For further details and limitations see skipIndex

  • The useLocalStorage setting can be specified in the appConfig.js file and when set to true does not use the datavault which can take a while to unlock.
     "useLocalStorage": true,

    For further details and limitations see Storing configuration data outside of the datavault

  • Release builds will generally run faster than debug builds.


Troubleshooting


If a problem is preventing the Fiori Client from successfully registering, the settings screen may not appear, preventing the user from changing the log level. One way to do this is to first use demo mode to show the trial SAP Fiori app, then set the log level to debug from settings screen by double tapping. Reset the app from setting screen and input the Fiori URL that is not working with the Fiori Client. The debug log level will persist across the application reset, so it will stay in debug log level.

If you cannot debug the app in Xcode, you can still view the device console output through Xcode’s Device menu. It will show the console output from all applications running on the device without debugging the application from Xcode.

The Fiori Client does not support URL shortener services or bitly URLs due to No Bridge. This feature may also cause troubles opening a URL that uses a different host or port than the one specified in the fioriURL.

Disabling the no bridge feature may correct some issues where a URL with a different host name or port are being opened.

Turning off the cachemanager which sends some extra requests to server from native library to help detect when the cache may need to be updated can be disabled via a URL parameter or in the appConfig.js.
&enableCacheManager=false
"enableCacheManager": false

The section Troubleshooting SAPUI5 Apps contains some troubleshooting tips such as how to perform an end2end trace.

Finally the following link provides some steps to access a crash log on iOS. Note the instructions are for Chrome but could be adapted for the Fiori Client.
Retrieving Crash Reports on iOS

Proxying the Fiori Client through an SMP or SAP Cloud Platform Mobile Services Server


The following steps demonstrate how to proxy a SAP Fiori application through a SMP or SAP Cloud Platform Mobile Services server. Note the following appendix SAP Cloud Connector has an additional example. For further details see Configuration and Deployment Information.

  • Create a Kapsel application with the following ID.
    com.sap.fiori


    Set the endpoint to be a partial URL of your company's Fiori launchpad URL.
    An example of a full URL to the app and then the partial URL follows.
    https://abc.sap.corp:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100
    and
    https://abc.sap.corp:443/

    Add an SSO mechanism such as Basic for a URL that requires credentials.
    Rewrite mode should be Rewrite URL in Backend System.



    Select an HTTPS Authentication provider and provide a URL that requires authentication. The URL
    https://abc.sap.corp:443/sap/bc/ping?sap-client=100

    will be used during the registration step to verify that the provided user name and password on the registration screen. Since an SSO mechanism is used, the app will not need to display the app's login screen. See also Single Sign-On Integration Across Client Applications.


    If the Save button is disabled, switch to the ADVANCED tab, and delete the Token Expiration Interval value.

    Save the application, and then attempt to ping the endpoint.
    A partial SAP Fiori URL such as
    https://abc.sap.corp:443/

    should return a 404 not found error. You would see the same error if the URL was entered into a browser or possibly success if the 404 error is embedded in a 200 response.


  • Notice that the endpoint (https://abc.sap.corp:443) uses HTTPS. The certificate that the endpoint server uses was signed by SAPNetCA_G2. In Chrome this can be seen by clicking on the lock icon beside the URL and choosing Details, View certificate. This certificate and it's the cert that signed it (SAP Global Root CA) need to be installed in the SMP 3.0 server's keystore as shown below.


    The following are a couple of commonly seen error messages.
    Backend system cannot be reached:::Root cause:::Exception during connection execute: peer not authenticated

    This error may be seen if the SMP server does not trust the certificate used by the endpoint.
    Backend system cannot be reached:::Root cause:::Exception during connection execute: abc.sap.corp:443

    This indicates that the SMP server cannot reach the URL. Check if the URL is reachable in a browser. If it is, it may be that your network requires a proxy server to access external URLs. Check the Use System Proxy setting and ensure the proxy settings under Settings > System > HTTP proxy host are correct in the SMP server management cockpit.

  • In the following file set the variable fioriURLIsSMP to true to indicate that the connection to the app will be proxied through the SMP 3.0 server.
    C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\www\appConfig.js

    Set the fioriURL to a URL as shown below.
    https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad....

    The methods parseAppConfig and handleFioriUrlWithFakeParameter will extract the host and port to connect to. Note there are additional settings that can be specified in the appConfig.js file. If the values are not specified in the appConfig.js file (for example in the version of the Fiori Client available on the Apple App Store and Android Play Store, the appConfig.js file is not editable), then they can be specified in the user provided fioriURL. If the fioriURL is not specified in the appConfig.js file then the Enter Fiori URL screen will appear and the parameters normally specified in the appConfig can be specified in the FioriURL. Here are a few examples.
    //Direct to the Fiori Server via user supplied URL
    https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html

    //Direct to the Fiori Server via appConfig.js
    "appID": "com.sap.fiori",
    "fioriURL": "https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html",
    "fioriURLIsSMP": false,

    //Proxying through an SMP server via user supplied URL
    https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad....

    //Proxying through an SMP server via appConfig.js
    "appID": "com.sap.fiori",
    "fioriURL": "https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html",
    "fioriURLIsSMP": true,


    //Mutual Authentication using Afaria/SAP Mobile Secure to provide the client certificate via user supplied URL
    https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad....
    //Note that in SP08 of the SDK there is a new certificate provider named certificate=com.sap.afaria that is to only be used when not registering with the SMP server.

    //Mutual Authentication using Afaria/SAP Mobile Secure to provide the client certificate via appConfig.js
    "appID": "com.sap.fiori",
    "fioriURL": "https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html",
    "fioriURLIsSMP": true,
    "certificate": afaria,

    //SAML Authentication via user supplied URL
    https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad....

    //SAML Authentication via appConfig.js
    "appID": "com.sap.fiori",
    "fioriURL": "https://YKFN00620418A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html",
    "fioriURLIsSMP": true,
    "auth": [
    {
    "type": "saml2.web.post",
    "config": {
    "saml2.web.post.authchallengeheader.name": "com.sap.cloud.security.login",
    "saml2.web.post.finish.endpoint.uri": "/SAMLAuthLauncher",
    "saml2.web.post.finish.endpoint.redirectparam": "finishEndpointParam"
    }
    }
    ]

    See also Enabling SAML Authentication and
    Configuring SAP Fiori Client Using URL Query Parameters

    One tool that can be used to verify the JSON is jsonlint.com.

    In order to use HTTPS the mobile device or simulator will need to trust the certificate used by the SMP server. For additional details see the HTTPS in the Security Appendix. Alternatively, use HTTP with port 8080 which is the default HTTP port for the SMP server.
    Note, if the Fiori Client does not trust the certificate used by the SMP server, an error such as the following will appear on the device's log.
    "LogonController.getRegistrationErrorText: {\"errorCode\":\"80003\",\"errorMessage\":\"java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.\",\"errorDomain\":\"MAFLogonCoreErrorDomain\"}"

    The device log can be viewed on Android via Logcat or on iOS via Xcode or via the Fiori Client View Log menu item.

  • Deploy and run the app.Since fioriURLIsSMP is set to true and the fioriURL is specified, the first screen that appears is the user name and password screen.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.The first use tips page is shown and then the app is loaded.

  • When the appConfig.js file has fioriURLIsSMP set to true, the settings screen has two additional read only settings: Proxy Through SMP and AppID.


    Note, if you wish to change the Fiori URL to point to a different SMP server and have not specified a value for fioriURL, click the Clear All Application Settings button under Reset Settings. This will cause the Enter SAP Fiori URL screen to appear.

  • When the SAP Fiori Client is used with the SMP 3.0 server or SAP Cloud Platform Mobile Services server, statistics can be viewed like those shown below.


    Items such as the log level, the log entry expiry, and the client policy can be remotely managed.

  • In addition, notifications can be sent to the device, and additional security authentication mechanisms are available.


Proxying Through SAP Cloud Platform Mobile Services to the SAP Fiori Cloud


The following URL could be used with the following configuration.
https://flpportal-i82XXXXtrial.dispatcher.hanatrial.ondemand.com:443?appid=fiori.cloud&authtype=saml...



Previous   Home   Next
112 Comments