Skip to Content

Source Code for “SAP Web IDE Hybrid Application Toolkit Introduction and Demo” Video

SAP Web IDE Hybrid Application Toolkit Introduction and Demo

Video Link

Here is the code needed to add the button for adding barcode reader to the searchfield (time 14:10)



     <Button id=”barcodeButton” icon=”sap-icon://bar-code” tooltip=”Bar Code Scanner” press=”onBarCodeScan”></Button>



onBarCodeScan: function() {

     var that = this;

     var code = “”;

if (!cordova.plugins.barcodeScanner) {“barCode scanning not supported”, sap.m.MessageBox.Icon.INFORMATION, “Bsrcode scanning”);




          function (result) {

                code = result.text;




          function (error) {

           alert(“Scanning failed: ” + error);




Here is the code needed to add the button for adding the contact to mobile device (time 5:00)


<Button xmlns=”sap.m” text=”add to contact” press=”addContact”></Button>


      addContact: function(oEvent) {

           if (!navigator.contacts) {

      “Contacts API only supported on Devices/Simulators”, sap.m.MessageBox.Icon.INFORMATION, “Add Contact”);



           var oView = this.getView();

           var sEntityPath = “/” + oEvent.getSource().getBindingContext().getPath().slice(1) + “/SupplierDetails”;

           var bpData = oView.getModel().getData(sEntityPath);

           //Get Contacts data

           var name = bpData.SupplierName;

           var phone = bpData.PhoneNumber;

           var email = bpData.EmailAddress;

           var contact = navigator.contacts.create();

  = { 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;


 “Successfully saved into Device Contacts “, sap.m.MessageBox.Icon.SUCCESS, “Add Contact”);


You must be Logged on to comment or reply to a post.
  • Dear Jennifer,

    Thank you for share this excellent post. This post really helps me lot. After creating the application in Web IDE working fine on browser and Bar code has been working fine.

    I was deployed in this application into SAPUI5 ABAP Repository(BSP File). After that I was executed this application from BSP file. Master and Detail screen values are loaded successfully. When I was clicked the Bar code scan button not opening the camera. I am getting the error message as "Uncaught ReferenceError: cordova is not defined" in console.

    Kindly give me any suggestion to resolve this issue.