Skip to Content

Hello Everyone !!

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

Introduction

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
3:-Contacts
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).

jQuery.sap.includeScript("/webapp/src/src/cordova.js");
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("jatin.app.barcode.controller.Main", {
  onScan: function () {
	
cordova.plugins.barcodeScanner.scan(this.scanSuccessCallback,this.scanErrorCallback);

		},
		  scanSuccessCallback: function(result) {
                alert(result.text);
            },

            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

jQuery.sap.includeScript("/webapp/src/src/cordova.js");
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("jatin.app.geolocation.controller.Main", {
     onGetLocation:function(){
     	navigator.geolocation.getCurrentPosition(this.onSuccess2, this.onError2);
     },
     onSuccess2:function(position){
     	 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');
     },
     onError2:function(){
     	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.

jQuery.sap.includeScript("/webapp/src/src/cordova.js");
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("jatin.app.controller.Main", {
      getDeviceInfo:function(){
      	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;
alert(dev);
      	 }
	});
});

Contact:-

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

jQuery.sap.includeScript("/webapp/src/src/cordova.js");
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("jatin.app.contact.controller.Main", {
	
     coRead: function(){
     		 var options = new ContactFindOptions();
        options.filter=""; 
            options.multiple=true;      // return multiple results

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

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.

To report this post you need to login first.

15 Comments

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

    1. Jatin Dharani Post author

      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 🙂

      (0) 
    1. Jatin Dharani Post author

      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).

      (0) 
  1. Jignesh Savaliya

    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

     

    cordova.plugins.barcodeScanner.scan(this.scanSuccessCallback,this.scanErrorCallback);

     

    Variable cordova is undefined.

     

    please suggest.

    (0) 
        1. Jatin Dharani Post author

          Hi  Hüseyin Erbek,

          Sorry for the late reply .

          Are you running the application from SAP Fiori client on your mobile?

          And you have imported the project in web-ide or in eclipse?

           

           

           

          (0) 
  2. Anmol Jain

    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.

     

    Regards,

    Anmol Jain.

    (0) 
    1. Jatin Dharani Post author

      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.

       

      Thanks,

      Jatin

       

      (0) 
  3. Anmol Jain

    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,

    (0) 
  4. Anmol Jain

    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.

    (0) 

Leave a Reply