Generated by Jive on 2015-12-04+01:001
SAPUI5 Developer Center: Develop HybridMobile Apps With SAP Web IDE Part 2
Posted by Claudia Polster Nov 27, 2015
part 1 • Create a new Kapsel App
part 2
this part
• Add new Functionality• Test In Browser with Cordova Facade
part 3 • Run The App On Your Mobile Device•
• • • Add New Functionality To The App on page 1
• Test In Browser with Cordova Facade on page 17
Add New Functionality To The App
Now we will add two new features to the app:1. A scan button next to the search field at the Master View. When you click the button, the camera app
will start and you can scan a bar- or QR-code of a product. It will then search for this product-ID in theproduct list.
2. At the detail view we will add a button at the bottom of the view, where you can save the supplier-contactdata to your addressbook of your mobile device.
Because of the Facade plugin we can test this also in the WebPreview of the SAP Web IDE.
In your project, open the view folder and right click on the Master.view.xml - Open With - Layout Editor
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:002
At the left choose the Button …
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:003
...and drag and drop it onto the right of the Search Bar.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:004
Now change the properties of the new Button
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:005
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:006
Click Save.
We must now add the functionality that is invoked when the button is pressed.
Right-click on the button and choose Go to Code
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:007
The XML Code Editor opens.
Here you can find the new button.
Now we have to add more properties to the button description:tooltip="Bar Code Scanner" press="onBarCodeScan"
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:008
And do not forget to save!
Double click on the Master.controller.js to open it.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:009
Add the following line at the top of the controller file.
jQuery.sap.require("sap.m.MessageBox");
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0010
Add also the new function onBarCodeScan to the Master.controller.jsonBarCodeScan:function(){ var that = this; var code = ""; try { cordova.plugins.barcodeScanner.scan( function (result) { sap.m.MessageBox.show("Barcode scanning result:\n" + "Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled+"\n",""); code = result.text; that.getView().byId("searchField").setValue(code); that.onSearch(); }, function (error) { sap.m.MessageBox.show("Barcode scanning failed: ", error,""); } ); } catch (e) { sap.m.MessageBox.show("Cordova plugin is not available.",""); } },And do not forget to save!
This will use the Cordova barcode scanner plugin to scan a QR-Code or a Bar-Code andstores the result.
It creates a MessageBox which will show the text of the QR- or barcode and what code-format was read.
The result-text is added to the Search-Field and the Search function is then started.
It will also catch the errors if the scanning failed or the Cordova plugin isn’t available.Note: If you want to improve the layout of the source code, right-click in the editor window - Beautify.
This will arrange the code.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0011
Now we will extend the Detail View.
First close the Layout Editor for Master.view.xml tab
Right click on the Detail.view.xml - Open With - Layout Editor
On the left choose the Button Control…
..and drag and drop it to the toolbar at the bottom.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0012
Now change the properties of the new Button
Click Save.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0013
We must now add the functionality that is invoked when the button is pressed.
Right-click on the button and choose Go to Code
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0014
The Code Editor opens in which you can find the new button.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0015
Now we have to add more properties to the button description:
xmlns="sap.m" press="addContact”
And do not forget to save!
Open the Detail.controller.js
At the top of the controller add the following line
jQuery.sap.require("sap.m.MessageBox");
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0016
Then add the function addContactaddContact: function(oEvent) { if (!navigator.contacts) { sap.m.MessageBox.show("Contacts API only supported on Devices/Simulators", sap.m.MessageBox.Icon.INFORMATION, "Add Contact"); return; } var oView = this.getView(); var sEntityPath = "/" + oEvent.getSource().getBindingContext().getPath().slice(1) + "/ToSupplier"; var bpData = oView.getModel().getData(sEntityPath); //Get Contacts data var name = bpData.CompanyName; var phone = bpData.PhoneNumber; var email = bpData.EmailAddress; var contact = navigator.contacts.create(); contact.name = { givenName: name }; var phoneNumbers = []; var emails = []; phoneNumbers[0] = new ContactField("work", phone, true); emails[0] = new ContactField("email", email, false); contact.phoneNumbers = phoneNumbers; contact.emails = emails; contact.save(); sap.m.MessageBox.show("Successfully saved into Device Contacts ", sap.m.MessageBox.Icon.SUCCESS, "Add Contact"); },And do not forget to save!
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0017
This function obtains the ToSupplier-contact data from the selected product and saves it as a new contact.
Note: To improve the layout of the source code, right-click - Beautify. This will arrange the code.
Test In Browser with Cordova Facade
We can test this new functionality using the Cordova Façade.
Remember that by activating the Hybrid Application Toolkit plugin in SAP Web IDE, we are able to test some of
the hardware features of a mobile device directly in the desktop browser.
Click on index.html and then the Run button
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0018
You will see now two new buttons.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0019
Click the barcode button next to the search field.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0020
A Chrome pop up will ask you to allow the camera of your laptop.
Click Allow and scan the QR-Code/Barcode with the camera of your laptop.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0021
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0022
A Message Box will show you the result of your code scan.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0023
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0024
A search will be performed for the Product having this particular code.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0025
To test the Add Contact functionality in the browser press F12 to open the Developer Tools.
Choose one product and click the Add to Contact
Important: Please click on a product in the master list. When resizing the screen, it is important to make sure
that you have really selected a product in the master list.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0026
A Message Box shows a success Message. Your saved contact you can find in the Resources tab in the
Developer Tools - Resources - Local Storage - contacts
If you get an error: be sure that you have marked one product to open the details. If you use the first-load-
details you will get an error.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
Generated by Jive on 2015-12-04+01:0027
In the next part I will show, how you can test it on your Mobile Device with the companion App.
More Web IDE stuff published by Technology RIG
See you
Claudi462 Views
Michael ApplebyNov 30, 2015 5:47 AM
And do not forget to save!!!
So important a step, but so often the source of trouble! Wonderful that you emphasize it when it will save
people so much trouble with their efforts!
Cheers, Mike
SAP Technology RIG