Skip to Content
Author's profile photo Former Member

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

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.

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo MEGHAL SHAH
      MEGHAL SHAH

      Very Helpful... 🙂

      Keep Going. ...

      Author's profile photo Former Member
      Former Member

      nice blog,

      Hv tried yr contact application but while running on IOS , contacts values are showing as NULL.
      could you please suggest ?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Krunal,

      Greetings!!!

      for IOS you need to mention the contactname in display name method.You can get nickname in return.

      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri

      Hello

      Its very helpful documents.

      Did you deployed same application into Android Mobile. If yes, Pls. let me know

      Thanks
      Vijay
       

      Author's profile photo Former Member
      Former Member
      Blog 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 🙂

      Author's profile photo Johannes Goerlich
      Johannes Goerlich

      Isn't it possible to use the GeoLocation or camera within the webbrowser, e.g. Chrome?

      Author's profile photo Former Member
      Former Member
      Blog 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).

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Jignesh,

      You need to import the cordova.js and related files to your project.

      You can download the src.zip folder from my GIT account and import the same under webapp folder of your project.

      Also I have placed the barcode scanner appplication on GIT.

      Download URL : https://github.com/JatinDharani/SAPUI

       

       

      Author's profile photo Hüseyin Erbek
      Hüseyin Erbek

      Hi Jatin,

      I download  your  code https://github.com/JatinDharani/SAPUI, when I tried to run barcode scanner I got error

      Uncaught ReferenceError: require is not defined     cordova.js:29

       

      Do you have any suggestion ?

      Author's profile photo Former Member
      Former Member
      Blog 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?

       

       

       

      Author's profile photo Tarun Patidar
      Tarun Patidar

       

       

       

       

      Author's profile photo Anmol Jain
      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.

      Author's profile photo Former Member
      Former Member
      Blog 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

       

      Author's profile photo Anmol Jain
      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,

      Author's profile photo Anmol Jain
      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.

      Author's profile photo Former Member
      Former Member

      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.

       

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Carlos,

      Greetings !!

      I have placed the code for barcode scanner app on github.

      You can download it from https://github.com/JatinDharani/SAPUI/blob/master/Barcodescanner.zip

      This contains Component.js file.

      Thanks,

      Jatin

       

       

      Author's profile photo Former Member
      Former Member

      Hi Jatin !

       

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

       

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

       

      🙁

       

      Author's profile photo Julio Alvarez
      Julio Alvarez

      I have the same error. Regards