SAPUI5 Applications with native Capabilities

[Former Member]

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.