Beruflich Dokumente
Kultur Dokumente
part 2
this part
part 3
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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
...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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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 isnt 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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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
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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
if (!navigator.contacts) {
sap.m.MessageBox.show("Contacts AP
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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
To test the Add Contact functionality in the browser press F12 to open the Developer Tools.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
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-loaddetails you will get an error.
SAPUI5 Developer Center: Develop Hybrid Mobile Apps With SAP Web IDE Part 2
In the next part I will show, how you can test it on your Mobile Device with the companion App.
See you
Claudi
462 Views
Michael Appleby
Nov 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