June 25, 2014 21 minute read

Getting Started with Kapsel – Part 14 — SAP Fiori Client (New in SP04)

SAP Fiori Client (New in SP04)

Note, the following instructions apply to the SAP Fiori Client built using SP08 of the SDK. For more recent versions of the SDK see SAP Fiori Client (SP09+)

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. There is a demo of a few SAP Fiori apps available at SAP Fiori, Demo Cloud Edition.

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 customize or brand the app title, app icon, splash screen, first use tips, access native device functionality such as a barcode scanner, improved management 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.

Note the SAP Fiori Client should be used with Launchpad based apps as opposed to Launch Page apps.
See also Migration of SAP Fiori Apps From SAP Fiori 1.0.

A prebuilt version of the SAP Fiori Client is available from the iTunes, Android, and Windows Phone stores at iOS SAP Fiori Client mobile app, Android SAP Fiori Client mobile app, Windows Phone SAP Fiori Client mobile app, and Windows 8.1 SAP Fiori Client mobile app.

The SAP Fiori Client can also be created using Cordova and 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. New plugins can be added or ones that are not being used can be removed.

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

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

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

Building the SAP Fiori Client
Running the SAP Fiori Client
Additional Settings and Configuration
    Changing the App Name and Icon
    Changing the Background Image
    Customizing Screens

    Modifying the Version
    Using an X.509 Certificate
    Using a Mobile Device Management Solution to Configure Initial Settings
    Modifying the Status Bar
    Removing the Set Passcode Screen
Proxying the Fiori Client through an SMP 3.0 Server

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
```
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”.

As of SP06, the Fiori Client on Android should use Crosswalkto render HTML pages rather than the Android WebView for improved performance. Crosswalk is used when the optional crosswalkLocation parameter appears in the config.json file.
```
{
    "packageName": "com.sap.fiori.client",
    "targetFolder": "FioriClient",
    "appName": "FioriClient",
    "platforms": ["android", "ios"],
    "crosswalkLocation": "/Users/i82xxxx/Downloads/crosswalk-cordova-11.40.277.7-arm/bin"
    //"crosswalkLocation" : "C:\\Crosswalk\\crosswalk-cordova-11.40.277.7-arm\\bin"
}
```
If you are targeting Android and using Crosswalk, Plugman must be installed.
```
npm ls -g plugman (can be used to see if plugman is installed)
npm install -g plugman (installs plugman)
```
Note that when crosswalk is used, a plugman project is generated into a folder named FioriClient_withCrosswalk. Note, this project does not use the regular cordova cli commands such as cordova plugins, cordova prepare etc. See also Using Plugman to Manage Plugins.

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 it is also possible to debug the create_fiori_client.js script file. For additional details see Debug NodeJS Like A Pro. Note this is an optional step.
```
npm install -g node-inspector
node --debug-brk create_fiori_client.js
node-inspector --web-port=9999
```

Note that the create_fiori_client.js script has conveniently created a Cordova project containing Kapsel and Cordova plugins. The following command only works if Crosswalk has not been added to the project.

$ cordova plugins
com.sap.mp.cordova.plugins.apppreferences 3.8.0 "AppPreference"
com.sap.mp.cordova.plugins.attachmentviewer 3.8.0 "AttachmentViewer"
com.sap.mp.cordova.plugins.authproxy 3.8.0 "AuthProxy"
com.sap.mp.cordova.plugins.barcodescanner 3.8.0 "BarcodeScanner"
com.sap.mp.cordova.plugins.cachemanager 3.8.0 "CacheManager"
com.sap.mp.cordova.plugins.corelibs 3.8.0 "CoreLibs"
com.sap.mp.cordova.plugins.e2etrace 3.8.0 "E2ETrace"
com.sap.mp.cordova.plugins.encryptedstorage 3.8.0 "EncryptedStorage"
com.sap.mp.cordova.plugins.fioriclient 3.8.0 "FioriClient"
com.sap.mp.cordova.plugins.i18n 3.8.0 "i18n"
com.sap.mp.cordova.plugins.logger 3.8.0 "Logger"
com.sap.mp.cordova.plugins.logon 3.8.0 "Logon"
com.sap.mp.cordova.plugins.online 3.8.0 "Online"
com.sap.mp.cordova.plugins.settings 3.8.0 "Settings"
com.sap.mp.cordova.plugins.toolbar 3.8.0 "Toolbar"
com.sap.mp.cordova.plugins.voicerecording 3.8.0 "Voice Recording"
com.sap.mp.cordova.plugins.xhook 3.8.0 "Xhook"
de.appplant.cordova.plugin.printer 0.7.0 "Printer"
nl.x-services.plugins.calendar 4.2.6 "Calendar"
org.apache.cordova.camera 0.3.5 "Camera"
org.apache.cordova.contacts 0.2.16 "Contacts"
org.apache.cordova.device 0.3.0 "Device"
org.apache.cordova.dialogs 0.3.0 "Notification"
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.geolocation 0.3.12 "Geolocation"
org.apache.cordova.inappbrowser 0.6.0-patched "InAppBrowser"
org.apache.cordova.media 0.2.16 "Media"
org.apache.cordova.media-capture 0.3.6 "Capture"
org.apache.cordova.network-information 0.2.14 "Network Information"
org.apache.cordova.splashscreen 0.3.0 "Splashscreen"
org.apache.cordova.statusbar 0.1.10 "StatusBar"

Edit the following file

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

/Users/i82xxxx/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 host 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 the contents of the appConfig variable below.

cordova.define('fiori_client/appConfig', function(require, exports, module) {
     var appConfig = {
         "appID": "com.sap.fiori",
         "fioriURL" : "https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helpset=trial&sap-client=001",
         "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 setting indicates if the SMP 3.0 server should be used as a proxy to access the SAP Fiori app. An example of this being set to true is shown later in this document. The passcode policy can be set in the SMP 3.0 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 enables the ability to disable the Passcode screen.

If you are using Crosswalk, to optionally add x86 support, copy the folder

C:\Crosswalk\crosswalk-cordova-11.40.277.7-x86\framework\xwalk_core_library\libs\x86

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient_withCrosswalk\CordovaLib\xwalk_core_library\libs

If you are using Crosswalk the project can be built and run using
```
C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient_withCrosswalk\cordova\run.bat
```
If you are using the standard WebView (you are not using Crosswalk), copy the files to the platform directory by running
```
cordova -d prepare
```
while in the FioriClient folder and use Xcode to deploy and run the project.

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 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 (New in SP08). 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 domain from to get the details on how to connect to the Fiori app. Entering an email is typically less error prone than entering a long a URL.

The passcode policy can be configured either in the appConfig.js or in the SMP management cockpit.

The Log in screen is shown when the app is subsequently opened or resumed from the background assuming Disable Passcode was not selected.

The first use tip 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_withCrosswalk\assets\www\plugins\com.sap.mp.cordova.plugins.fioriclient\www\fioriclient.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 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.

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_withCrosswalk\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 for Android).

Additional Settings and Configuration

Changing the App Name and Icon

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

Before rerunning the create_fiori_client.js file either rename or delete the folder C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient_withCrosswalk and FioriClient or specify a different targetFolder in the config.json file.

Changing the Background Image

The flowers background image of the SAP Fiori Client comes from the following file.

C:\SAP\MobileSDK3\KapselSDK\plugins\logon\www\common\assets\ui\img\background.jpg

That file can be replaced with an alternate image. See also

app.setBackgroundImage('img/background.jpg'); // display the fiori backrgound only if legacy mode is not enabled.

in the below file.

C:\SAP\MobileSDK3\KapselSDK\plugins\logon\www\common\assets\ui\LogonForm.js

Customizing Screens

The various screens shown when starting the SAP Fiori Client are shown below. Their contents can be customized.

C:\SAP\MobileSDK3\KapselSDK\plugins\logon\www\common\assets\ui\resources>dir *.view.js
 Volume in drive C is OSDisk
 Volume Serial Number is 42DC-7B76

 Directory of C:\SAP\MobileSDK3\KapselSDK\plugins\logon\www\common\assets\ui\resources

05/15/2015  12:15 AM            19,137 changePasscode.view.js
05/15/2015  12:15 AM             6,453 chooseDemoMode.view.js
05/15/2015  12:15 AM             7,022 enterAfariaUsernamePassword.view.js
05/15/2015  12:15 AM            10,338 enterFioriConfiguration.view.js
05/15/2015  12:15 AM             8,658 enterPasscode.view.js
05/15/2015  12:15 AM             8,905 enterSSOPasscode.view.js
05/15/2015  12:15 AM             7,144 enterUsernamePassword.view.js
05/15/2015  12:15 AM            17,531 setPasscode.view.js

Modifying the Version

The version is specified in the following file on Android in versions prior to SP08.

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\assets\www\plugins\com.sap.mp.cordova.plugins.fioriclient\www\messages_en.json

As of SP08 the file is

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient_withCrosswalk\assets\www\plugins\com.sap.mp.cordova.plugins.fioriclient\www\messages_en.properties

On iOS, the version is specified via the Build field.

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.

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.

In SP08 of the SDK 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=false&certificate=com.sap.afaria

In prior versions registration with an SMP server was required.

For iOS, the new SAP Afaria certificate provider can be used when SMP is not present or if it is being used to proxy the connection to the Fiori App.
For Android, the new SAP Afaria certificate provider can only be used when SMP is not present.

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 key chain sharing. See also Configuring Keychain Sharing.

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.
If the MDM supports JSON format, create a JSON object as follow:

config={
    "appID":"fiori",
    "fioriURL":"https://<your-host>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN",
    "fioriURLIsSMP":false,
    "passcodePolicy":{}
}

If the MDM does not support JSON, convert the above json to base64 Convert this:

{
    "appID":"fiori",
    "fioriURL":"https://<your-host>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN",
    "fioriURLIsSMP":false,
    "passcodePolicy":{}
}

To something like that below:

eyANCiJhcHBJRCI6ImZpb3JpIiwNCiJmaW9yaVVSTCI6Imh0dHBzOi8vb
GRjaXUzZS53ZGYuc2FwLmNvcnA6NDQzMjYvc2FwL2JjL3VpNV91aTUvd
WkyL3VzaGVsbC9zaGVsbHMvYWJhcC9GaW9yaUxhdW5jaHBhZC5odG1
sP3NhcC1jbGllbnQ9MTAwJnNhcC1sYW5ndWFnZT1FTiIsDQoiZmlvcmlV
UkxJc1NNUCI6ZmFsc2UsDQoicGFzc2NvZGVQb2xpY3kiOnt9DQp9DQo=

After the base64 conversion, add the version parameter so it looks like this:

version=1
config=eyANCiJhcHBJRCI6ImZpb3JpIiwNCiJmaW9yaVVSTCI6Imh0dHBzOi8vb
GRjaXUzZS53ZGYuc2FwLmNvcnA6NDQzMjYvc2FwL2JjL3VpNV91aTUvd
WkyL3VzaGVsbC9zaGVsbHMvYWJhcC9GaW9yaUxhdW5jaHBhZC5odG1
sP3NhcC1jbGllbnQ9MTAwJnNhcC1sYW5ndWFnZT1FTiIsDQoiZmlvcmlV
UkxJc1NNUCI6ZmFsc2UsDQoicGFzc2NvZGVQb2xpY3kiOnt9DQp9DQo=

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 Pluginwith the following settings set in index.js.

if (cordova.require("cordova/platform").id === "ios")
{
    StatusBar.backgroundColorByName("white");
    StatusBar.styleDefault();
    StatusBar.overlaysWebView(false);
}

Here is an example of changing the style and background color of the status bar.

if (cordova.require("cordova/platform").id === "ios")
{
    StatusBar.backgroundColorByHexString("#009ce6");
    StatusBar.styleLightContent();
    StatusBar.overlaysWebView(false);
}

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/>

Removing the Set Passcode Screen

It is possible to not show the screen Set Passcode for SAP Fiori Client by making the below modification. Edit

C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient_withCrosswalk\assets\www\plugins\com.sap.mp.cordova.plugins.logon\www\common\modules\LogonController.js

Search for the first instance of r21. Replace

action: 'SCR_SET_PASSCODE_OPT_ON'

with

action: function() {
    onCreatePasscodeSubmit({});
}

Search for the second instance of r21. Replace

action: 'SCR_SET_PASSCODE_OPT_ON'

with

action: function() {
    onCreateSecureStoreSubmit({});
}

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, see also Setup of SAP Fiori System Landscape or Integration of SAP Mobile Platform into SAP Fiori Landscape.
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. The Fiori Client does not work with a relay server when proxied through the SMP server as FC requires URL rewriting to be done by the backend. The backend is not capable of constructing URLs using the relay server artifacts like farm id etc.

Create a Kapsel application with an id of
```
com.sap.fiori
```
and an endpoint of a partial URL of your company’s Fiori launchpad URL.
An example of full URL to the app and then the partial URL follows.
```
https://ldciu3e.wdf.sap.corp:44326/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN
and
https://ldciu3e.wdf.sap.corp:44326/sap
```
Set the Use System Proxy connection if your network uses a proxy and the URL being accessed 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.

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://ldciu3e.wdf.sap.corp:44326/sap/bc/ping?sap-client=100
```
will be used during the registration step to verify that the provided user name and password and if 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.

Save the application attempt to ping the endpoint.
A partial SAP Fiori URL such as
```
https://ldciu3e.wdf.sap.corp:44326/sap
```
should return a 404 not found error, the same as you would see if the URL was entered into a browser.
Notice that the endpoint uses HTTPS, the certificate that the endpoint server uses was signed by SAPNetCA, and this certificate is already installed in the SMP 3.0 server’s keystore.

For additional details on how to export a certificate and install it into the SMP server’s keystore using keytool see Accessing the SAP OData Gateway Demo section and search for keytool.

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: ldciu3e.wdf.sap.corp
```
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 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.

https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN

The methods parseAppConfig and handleFioriUrlWithFakeParameter will extract the host and port to connect to as well as other settings. Note there are additional settings that can be specified in the appConfig.js file. If the fioriURL is not specified in the appConfig.js file (as it is in the version of the Fiori Client available on the Apple App Store and Android Play Store) then 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. Note these could be specified in the appConfig.js file or if the fioriURL is empty they could be specified by the end user when they enter a FioriURL.

//Direct to the Fiori Server via user supplied URL 
https://www.sapfioritrial.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helpset=trial&sap-client=001 

//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?helpset=trial&sap-client=001", 
"fioriURLIsSMP": false,

//Proxying through an SMP server via user supplied URL 
https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN&appid=com.sap.fiori&fioriURLIsSMP=true 

//Proxying through an SMP server via appConfig.js 
"appID": "com.sap.fiori", 
"fioriURL": "https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN", 
"fioriURLIsSMP": true,

//Mutual Authentication using Afaria/SAP Mobile Secure to provide the client certificate via user supplied URL 
https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN&appid=com.sap.fiori&fioriURLIsSMP=true&certificate=afaria 
//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://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN", 
"fioriURLIsSMP": true, 
"certificate": afaria,

//SAML Authentication via user supplied URL 
https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN&appid=com.sap.fiori&fioriURLIsSMP=true&authtype=saml2.web.post 

//SAML Authentication via appConfig.js 
"appID": "com.sap.fiori", 
"fioriURL": "https://YKFN00528072A.amer.global.corp.sap:443/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN", 
"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

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 HTTPSin 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 next.

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 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, additional security authentication mechanisms are available and the ability to access data when the device is offline.
The following are some known issues that have been documented as SAP Notes.
Fiori Logoff does not work when proxying through SMP. http://service.sap.com/sap/support/notes/2122085
Use of proxy bypass on Fiori Client for Android results in Page Not Found. http://service.sap.com/sap/support/notes/2120995
Using SAML URL following “Clear All Application Settings” on Fiori Client for Android results in error. http://service.sap.com/sap/support/notes/2120994
SAPUI5 Cache Buster for Applications – Update via scheduled Report http://service.sap.com/sap/support/notes/1942086
Batch Req. of Cache Buster Info for many Apps, POST support http://service.sap.com/sap/support/notes/1878871
Allow other browsers to access the portal http://service.sap.com/sap/support/notes/1666862
SMP Hybrid SDK Offline Media Resources (Attachments) Fail to Open on Android when a Proxy is used http://service.sap.com/sap/support/notes/2168598
Printing issues on SAP Fiori Client 1.3 affecting Android http://service.sap.com/sap/support/notes/2168622
Configuring feature restriction policy in SMP 3.0 Server http://service.sap.com/sap/support/notes/2168720
Change required to manifest.xml on Android before submitting to Play store with SP08 PL01 http://service.sap.com/sap/support/notes/2174258

Note that comments are not easily searchable in SCN. If you have a question that is not specific to the above content it would be best to create a new discussion on SCN.
To include a reference to this document, Right Click on the title and select ‘Copy Shortcut’. Paste it into the new Discussion so people will know the relevance. If you want to bring it to the attention of the author, repeat the same process with the Author’s name.

Back to Getting Started With Kapsel

152 Comments

You must be Logged on to comment or reply to a post.

Former Member

May 13, 2016 at 8:54 am

Hey Daniel,

Hope you'd remember me as i asked a question to you before 1 -2 days.

I solved that prepare_restriction.js issue.

And i am running my Fiori App on Android Studion and installed it successfully.

But i am stuck at Apache Cordova "Device is ready" page index.html.

Can you guide how to navigate further?

I saw number of discussions on Stack Overflow but couldn't get help either.

What to modify in index.html or index.js?

Or am i missing something?

Regards,

Prateek Shukla.

Daniel Van Leeuwen

Blog Post Author

May 14, 2016 at 10:05 pm

If you create an empty cordova project, I believe by default it creates an index.html page that says

APACHE CORDOVA

DEVICE IS READY

Is that what you are seeing? Is it possible you did not run cordova prepare android?

Regards,

Dan van Leeuwen

Former Member

May 16, 2016 at 4:11 am

Yes bro...

I totally did run cordova prepare android, but can exactly you tell me at which path we have to give command cordova prepare...

Suppose if my cordova project is at: C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\pratik_fiori...

At this path , we have to give command cordova prepare???

Or am i wrong?

And on more thing Daniel,

before cordova prepare... we have to copy n paste some files from fiori_client project to our cordova one?

Please help me clear my confussions...

Regards,

Pratik Shukla.

Daniel Van Leeuwen

Blog Post Author

May 16, 2016 at 11:47 am

I would recommend looking at this section of the guide that attempts to explain what cordova prepare does in more detail.

Getting Started with Kapsel - Part 1 (SP09+)

Also note that the version linked above is for SP 09 and higher. The current version of the SDK is SP 12.

cordova prepare will copy the HTML, JavaScript, CSS type files from the root www folder into the application specific www folder.

I believe the folder you mention above is correct. You can also verify by typing cordova plugins which should show you the list of plugins that are part of your project.

Regards,

Dan van Leeuwen

Former Member

May 16, 2016 at 12:03 pm

Dear Daniel,

Like you said, i also believe cordova prepare should copy those files, but the fact is it doesn't.

I have gone through step by step in your tutorials but not getting output.

Currently, i am having Cordova 5.1.1 and SMP 3.0 sp10 and i think these are compatible with each other and for plugins i retrieved....

See snapshot below:

here i have tried cordova prepare but see in next screen shot that it doesn't get copied.

These files contain sources for Apache Cordova "Device is Ready" splash-screen.

Nothing else.

Regards,

Pratik Shukla

Daniel Van Leeuwen

Blog Post Author

May 16, 2016 at 12:58 pm

What version of node are you using?

node -v

I appear to be using 5.4.1

It may be that you need to revert to an older version of node.

fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a…

Regards,

Dan van Leeuwen

Christian Ganss

May 3, 2018 at 11:22 am

Hi Daniel!

Thanks a lot for your very helpful blog. Regarding the custom SAP Fiori Client I have the following question: How exactly does the custom app get deployed on the mobile devices - which options are available here and is it possible to have a custom client distributed via the public app stores?

Thanks in advance for your support and best regards,

Christian

Daniel Van Leeuwen

Blog Post Author

May 5, 2018 at 11:52 am

It should be possible to build a custom app using the provided instructions in this blog and publish it to the app stores. Some companies also maintain their own internal app stores.

Regards,

Dan van Leeuwen

Getting Started with Kapsel – Part 14 — SAP Fiori Client (New in SP04)

SAP Fiori Client (New in SP04)

Building the SAP Fiori Client

Running the SAP Fiori Client

Additional Settings and Configuration

Changing the App Name and Icon

Changing the Background Image

Customizing Screens

Modifying the Version

Using an X.509 Certificate

Using a Mobile Device Management Solution to Configure Initial Settings

Modifying the Status Bar

Removing the Set Passcode Screen

Proxying the Fiori Client through an SMP 3.0 Server

Assigned Tags