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.
Very Helpful... 🙂
Keep Going. ...
nice blog,
Hv tried yr contact application but while running on IOS , contacts values are showing as NULL.
could you please suggest ?
Hi Krunal,
Greetings!!!
for IOS you need to mention the contactname in display name method.You can get nickname in return.
Hello
Its very helpful documents.
Did you deployed same application into Android Mobile. If yes, Pls. let me know
Thanks
Vijay
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 🙂
Isn't it possible to use the GeoLocation or camera within the webbrowser, e.g. Chrome?
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
cordova.plugins.barcodeScanner.scan(this.scanSuccessCallback,this.scanErrorCallback);
Variable cordova is undefined.
please suggest.
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
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 ?
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?
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.
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
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 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
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
🙁
I have the same error. Regards