Skip to Content

SAPUI5 Applications with native Capabilities

Hello Everyone !!

This blog focuses on development of SAPUI5 applications that are capable to use mobile native features(eg camera,contacts,Location).


In order to access mobile native capabilities, SAPUI5 application needs to be run on SAP Fiori Client.SAP Fiori Client can be easily downloaded from app store/play store.

I have developed following 4 applications and deployed them on SAP Fiori Launchpad :

1:- Barcode Scanner
2:- Device Info
4:-Geo Location

1:– Barcode Scanner:- Bar code scanner application can be used to scan the barcode on different products to gain information about the product.


Steps to create Bar code scanner application:

1:- go to SAP WEB IDE.

2:- Choose file->NEW->Project from template.

3:-Select SAPUI5 Application from the list of template.

4:- Provide other required information(name,namespace,root view etc) in the subsequent steps.
Above 4 steps will create a SAPUI5 project in your work space.

5:- Include cordova.js in webapp folder

6:- open the <name>.controller.js file from the controller folder of the newly created project and write the below code(make changes in the namespace as per your project)."/webapp/src/src/cordova.js");
], function(Controller) {
	"use strict";

	return Controller.extend("", {
  onScan: function () {

		  scanSuccessCallback: function(result) {

            scanErrorCallback: function(error) {
                navigator.notification.alert("Scanning failed: " + JSON.stringify(error));

6:- Right click on the project and select “deploy to HANA CLOUD Platform” .

7:- After deployment of application click on “Register to SAP Fiori Launchpad” to register the application to Fiori Launchpad.

GEO LOCATION: Geo Location can be used to get the current location of user.

For GEO Location application steps 1-to-5 from barcode scanner needs to be followed

Insert the below code in <name>.controller.js file in the controller folder"/webapp/src/src/cordova.js");
], function(Controller) {
	"use strict";

	return Controller.extend("", {
     	navigator.geolocation.getCurrentPosition(this.onSuccess2, this.onError2);
     	 alert('Latitude: '          + position.coords.latitude          + '\n' +
              'Longitude: '         + position.coords.longitude         + '\n' +
              'Altitude: '          + position.coords.altitude          + '\n' +
              'Accuracy: '          + position.coords.accuracy          + '\n' +
              'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
              'Heading: '           + position.coords.heading           + '\n' +
              'Speed: '             + position.coords.speed             + '\n' +
              'Timestamp: '         + position.timestamp                + '\n');
     	alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');

Device Information
This app demonstrate how we can get information of the device.

for fetching the device information insert the below code in the controller file."/webapp/src/src/cordova.js");
], function(Controller) {
	"use strict";

	return Controller.extend("", {
      	var dev="Serial No"+device.serial;
      	dev+="Cordova version"+device.cordova;
        dev+=   "device model"+device.model;
        dev+= "device platform"+device.platform;
     dev+= "device uuid"+device.uuid;
        dev+="device version"+device.version;
dev+="device manufacturer"+device.manufacturer;


Contact application demonstrate how we can get access to contacts present on the device in our app.


for fetching the contacts followings code needs to be inserted in controller file"/webapp/src/src/cordova.js");
], function(Controller) {
	"use strict";

	return Controller.extend("", {
     coRead: function(){
     		 var options = new ContactFindOptions();
            options.multiple=true;      // return multiple results

        var fields = ["displayName", "name"];
        navigator.contacts.find(fields, this.onSuccess1, this.onError1, options);
     	   	var aco="";
        for (var i=0; i<contacts.length; i++) {
            //alert("Display Name = " + contacts[i].displayName);

Testing the applications

After all these applications are registered to SAP Fiori launchpad, do the following to test the applications

1:- Open SAP Fiori Client on your device.

2:- Enter the URL of your fiori Launcpad in the URL text box(Alternatively you can scan the QR code of the URL).

3:- Click on disable passcode(or enter passcode ).

4:- Provide your HANA Cloud userid/password in the next screen.

5:- You will be able to see and test all the application registered on FIORI launchpad.

Note:- I have taken snaps of applications from other phone.Because SAP Fiori Client does not support taking screen shots as a part of security feature.

I have tested the applications only on android device. So it might be possible they don’t give desired output on other devices.

You must be Logged on to comment or reply to a post.
    • Hi Vijay,

      There is no need to deploy the application!!

      You need to run the application from within SAP Fiori Client.

      SAP Fiori Client application is available for android, ios and windows devices from their respective app stores.

      SAP Fiori Client acts as a container( a middle layer) that helps SAPUI5 application to gain access to native capabilities.

      Hope , I have answered your question.

      If you require further clarification do post below 🙂

    • Hi Johannes,

      Yes mordern browsers do support geo location API.\

      However using fiori client like container we can get access to more native features(eg calendar,contacts).

  • Hi Jatin,


    I am new to this area,and I was trying to create such application.

    However, I am getting syntex error in Controller.js file




    Variable cordova is undefined.


    please suggest.

  • Hi Jatin,

    I have imported the cordova.js in my Project(which i created in Web IDE) but when i am running the application in Web IDE i am getting the error "Cannot read property "plugins" of undefined for code the line cordova.plugins.barcodeScanner.scan. I believe it should run in Web IDE or will it only run in Fiori client?

    Thanks for your help in advance.



    Anmol Jain.

    • Hi Anmol,


      If you are testing the application from web ide  with cordova plugin available in testing mode, application will run.

      When you test the application from web-ide you get the popup asking to save files on your local system. Allow to save these files as these files contains cordova plugins.


      In fiori client the application should definitely run.





  • Hi Jatin,

    Thanks for your Response.

    I believe if i want to enable the Cordova plugin in Web IDE I have to enable HAT plugin and then the corresponding cordova plugin of camera and barcode scanner which i don't want to do as it will create a hybrid application for me.I wanted to have this functionality in Web app and when i deploy it to Fiori client it should work. So if i deploy this on Fiori client it should work?Please correct if i am wrong or if i am missing something,

  • Moreover when i imported cordova.js file in my project i am getting the error require is not defined in cordova.js at line 29.

  • Excellent Jatin,


    Just I have a question, How did you register the applications in SAP Fiori launchpad? I have a problem here so the apps doesn´t have the file Component.js to add the name of the component.


  • Hi Jatin !


    Have also tried to import your project and have the following error :


    Cannot read property “plugins” of undefined @the line of cordova.plugins.barcodeScanner.scan