Skip to Content
Author's profile photo Claudia Polster

Develop Hybrid Mobile Apps With SAP Web IDE Part 2

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

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 the product 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

/wp-content/uploads/2015/11/21_838790.png

At the left choose the Button

/wp-content/uploads/2015/11/22_838791.png

…and drag and drop it onto the right of the Search Bar.

Untitled.png

Now change the properties of the new Button

/wp-content/uploads/2015/11/24_838875.png

/wp-content/uploads/2015/11/25_838876.png

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

/wp-content/uploads/2015/11/26_838877.png

The XML Code Editor opens.

Here you can find the new button.

/wp-content/uploads/2015/11/27_838878.png

Now we have to add more properties to the button description:

tooltip="Bar Code Scanner" press="onBarCodeScan"

/wp-content/uploads/2015/11/28_838879.png

And do not forget to save!


Double click on the Master.controller.js to open it.

/wp-content/uploads/2015/11/30_838880.png

Add the following line at the top of the controller file.

jQuery.sap.require("sap.m.MessageBox");

/wp-content/uploads/2015/11/31_838881.png

Add also the new function onBarCodeScan to the Master.controller.js



onBarCodeScan: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!

/wp-content/uploads/2015/11/32_838882.png

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.

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…

/wp-content/uploads/2015/11/33_838898.png

..and drag and drop it to the toolbar at the bottom.

/wp-content/uploads/2015/11/02_838899.png

Now change the properties of the new Button

Click Save.

/wp-content/uploads/2015/11/34_838900.png

We must now add the functionality that is invoked when the button is pressed.

Right-click on the button and choose Go to Code

/wp-content/uploads/2015/11/35_838913.png

The Code Editor opens in which you can find the new button.

/wp-content/uploads/2015/11/36_838914.png

Now we have to add more properties to the button description:

xmlns="sap.m" press="addContact”

And do not forget to save!

/wp-content/uploads/2015/11/37_838915.png

Open the Detail.controller.js

At the top of the controller add the following line

jQuery.sap.require("sap.m.MessageBox");


/wp-content/uploads/2015/11/39_838916.png

Then add the function addContact



addContact: 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!

/wp-content/uploads/2015/11/40_838917.png

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

/wp-content/uploads/2015/11/41_838930.png

You will see now two new buttons.

/wp-content/uploads/2015/11/42_838943.png

Click the barcode button next to the search field.

/wp-content/uploads/2015/11/43_838944.png

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.

/wp-content/uploads/2015/11/44_838945.png

/wp-content/uploads/2015/11/45_838946.png

A Message Box will show you the result of your code scan.

/wp-content/uploads/2015/11/46_838947.png

/wp-content/uploads/2015/11/47_838948.png

A search will be performed for the Product having this particular code.

/wp-content/uploads/2015/11/48_838949.png

To test the Add Contact functionality in the browser press F12 to open the Developer Tools.

/wp-content/uploads/2015/11/49_838950.png

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.

/wp-content/uploads/2015/11/50_838951.png

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.

/wp-content/uploads/2015/11/51_838952.png

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

Claudi

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo Volker Kolberg
      Volker Kolberg

      Hi Claudia!

      When I try to click the bar code button I alöways get the error that Cordova Plugin is not available.

      In the WebIDE I also have a red cross at code line
      cordova.plugins.barcodeScanner.scan...

      with error message "variable cordova is not defined".

      I use a Trial HCP account. Anything I might have forgotten to configure?

      Un,fortunately the link in the first part of your blog to the HCP configuration is broken.

      Thanx and Regards,

      Volker

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      Have you activate the HAT plugin in the settings? (see part1 )

      (the error message in the code is "normal")

      Author's profile photo Volker Kolberg
      Volker Kolberg

      Hi Claudia!

      HAT plugin is activated, but I cannot see the Checkbox "Cordova Facade Preview". It is not there. In General my Screens look slightly different from your configuration screenshots.

      May te mentioned Checkbox have moved to somewhere else in the meantime or what could be the reason why I canot see (and thuis of course cannot activate) it?

      Thanks,

      Volker

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      Hi, run the app..on the bottom right there should be gear wheel button. Click on it and enable the facade settings.

      Let me know how it works. 🙁

      Author's profile photo Volker Kolberg
      Volker Kolberg

      Unfortunately there is no gear wheel I could click on. I use Google Chrome 64-Bit.

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      OK,

      When I disabled the HAT Plugin (Preferences --> Plugins) then I cannot see the Gear wheel.

      When I enabled it, I can see it (after I refresh the browser). Have you saved this setting after you enabeled the HAT Plugin? Because the "Save" button is really unimpressive...

      Author's profile photo Volker Kolberg
      Volker Kolberg

      Hi Claudia!

      Recently I switched from a Trial Account to a "real" (and paid) HCP Account and suddenly it works.
      Seems to be a bug in (at least) my Trial Account.

      There is still no Checkbox in the Settings, but there is the gear wheel in the preview and by Default Cordova Facade is turned on.

      BTW: The demo also works fine within SAP Fiori Client, tested on iPhone 6s and iPad Air.

      Thansk for your Support and of course fror that great blog!

      Volker