Introduction

In this blog I’ll show you how to use the Kapsel Barcode Scanner plugin to scan a code of a given product and search for it in the related collection.

Objective

We are going to develop a SAPUI5 hybrid application from one of the standard templates available in SAP Web IDE. We will use the OData service ZGWSAMPLE_SRV available here for getting Products’ information from the backend. This data source is part of the SAP Netweaver Gateway Demo system for which you can request an account simply by following the steps reported at SAP Gateway Demo System. We will add some custom code to this app to extend the search bar functionality: a new button will be added aside the search field; by pressing this button you will have the ability to scan the barcode of a product and search for its information in the backend.

When our app will be ready, we will mobilise it using the Hybrid Application Toolkit and the trial HCPms system.

This is our challenge!

Let’s get started.

Prerequisites

  • SAP Web IDE 1.15 and later (you can register at SAP HANA Cloud Platform to get your development environment)
  • Hybrid Application Toolkit 1.8.2+ downloadable from here
  • An HCPms account configurable as described here

NOTE: An Android or iOS device is required: emulator is not good for this exercise because it cannot scan the code using the camera.

All the above prerequisites must be properly configured, before moving forward with this guide.

Walkthrough

This is the list of all the steps we’ll go through:

  1. Create a sample barcode
  2. Create a destination in the SAP HANA Cloud Cockpit
  3. Create a new app in the HCPms
  4. Create a new Kapsel app with SAP Web IDE
  5. Add a button to the Master view
  6. Add the custom code for the new button
  7. Deploy the app with HAT
  8. Run the project on a mobile device

Create a sample barcode

Since we want to scan a product barcode in order to test our final application, let’s start by creating a sample barcode. You can generate free barcodes from Free Barcode Generator – Create barcodes here.

Select for example to create a QRCode, got on the Text tab and put the string “HT-1011“, which is the product code we want to search in the backend. Then click on Create QR Code. On the left side a QR code for that product will appear. You can even download it as a picture if you want.

/wp-content/uploads/2015/09/01_792124.jpg

Create a destination in the SAP HANA Cloud Cockpit

Our barcode is ready; we can start by creating a destination to reach the OData service located at SAP Gateway Demo System.

1) Access your HANA Trial environment and create a new destination which points to the ES1 system in the following way

/wp-content/uploads/2015/09/02_792123.jpg

Create a new app in the HCPms

Now let’s create a new application in the HCPms system. You can follow this blog to learn how to enable your HCPms environment.

1) Go on https://hcpmsadmin-<your_user>trial.dispatcher.hanatrial.ondemand.com where you need to replace the string “<your_user>” with your user account.

2) Click on Applications

3) Create a new Application with the following parameters and click on Save

Parameter

Value

Application ID

com.test.products

Version

1.0.0

Name

Products

Type

Hybrid

Description

Products application

Vendor

SAP

Security Configuration

None

/wp-content/uploads/2015/09/03_792176.jpg

4) Click on Configure on the right bottom corner

5) Switch to the Backend tab and specify the Backend URL together with the Authentication Type and the Proxy Type; after this click on Save

Parameter

Value

Backend URL

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/sap/zgwsample_srv/

Proxy Type

Internet

Authentication Type

Basic Authentication

User name

<leave it blank>

Password

<leave it blank>

Maximum Connections

500

Rewrite Mode

Rewrite URL on HCPms

Relative Paths

<leave it blank>

/wp-content/uploads/2015/09/04_792708.jpg

6) You should be able to ping the application successfully

/wp-content/uploads/2015/09/05_792178.jpg

Create a new Kapsel app with SAP Web IDE

Now that our connection is in place, let’s create the Kapsel application

1) Open SAP Web IDE

2) Create a new SAPUI5 project from the template SAPUI5 Master Detail Kapsel Application

3) Enter a project name (i.e. Products)

4) Define the OData connection information to the ZGWSAMPLE_SRV service

/wp-content/uploads/2015/09/06_792180.jpg

5) Provide the information about the fields you want to see in the application and click on Save

/wp-content/uploads/2015/09/a04_810103.jpg

NOTE: It’s important, for the goal of this guide, that for the search field you choose ProductId otherwise the final application doesn’t work!

6) Click on Finish to complete the wizard

7) You can test the application by running it in the desktop preview mode

/wp-content/uploads/2015/09/a05_810107.jpg

8) Right click on the name of the project in SAP Web IDE and choose Project Settings –> Device Configuration. Specify the App Name, the App ID (it needs to match the Application ID used in the HCPms configuration) and all others parameters listed here and then click on Save

Parameter

Value

App Name

Products

App ID

com.test.products

Description

Products application

Version

1.0.0

Build Options Release Mode
Platforms Choose the one (or both) you want to build your app for. In my case it’s just iOS
Plugins > Kapsel Enable Logon Manager and Barcode Scanner
HCPms/SMP HCPms
HCPms Host hcpms-<your_account>.hanatrial.ondemand.com

/wp-content/uploads/2015/09/09_792186.jpg

Add a button to the Master view

In SAP Web IDE open the Master view (view/Master.view.xml) of the app. Add the following code just after the last “/contentmiddle” tag and save the file


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






It should look like this

/wp-content/uploads/2015/09/10_792189.jpg

Add the custom code for the new button

Now open the Master view controller (view/Master.controller.js) and add the following function at the beginning of the file, just after the init function. Save the file


onBarCodeScan: function() {
    var that = this;
    var code = "";
    cordova.plugins.barcodeScanner.scan(
          function (result) {
              code = result.text;
              console.log("This is the code: " + code);
              that.getView().byId("searchField").setValue(code);
              that.onSearch();
          },
          function (error) {
              alert("Scanning failed: " + error);
          }
    );
},






It should look like this

/wp-content/uploads/2015/09/11_792197.jpg

Deploy the app with HAT

Deploy the project using Hybrid Application Toolkit.

1) Launch HAT

/wp-content/uploads/2015/09/a01_810110.jpg

2) Right click on the name of the project in SAP Web IDE and choose Deploy –> Deploy to local Hybrid Toolkit


3) The app is deployed to your local workstation folder

Run the project on a mobile device

Once your project has been successfully deployed to your local PC you can run it on your device.

1) Go back to SAP Web IDE

2) Select the index.html file of the app, right click on it and choose Run –> Run on –> iOS (or Android) device

3) Once the application starts, provide the credentials for ES1 in the Kapsel Logon.

/wp-content/uploads/2015/09/13_792199.jpg

4) Then create a new passcode or disable it by clicking on the Disable Passcode button and click on Submit

/wp-content/uploads/2015/09/14_792221.jpg

5) Now a new button should be available beside the search bar. Click on this Barcode Scanner button

/wp-content/uploads/2015/09/15_792222.jpg

6) Camera is activated: you can scan the barcode with your device

/wp-content/uploads/2015/09/16_792770.jpg

7) The product is automatically found by the application

/wp-content/uploads/2015/09/17_792771.jpg

Congratulations! You have successfully used the BarcodeScanner Kapsel plugin within your application!

NOTE: it must be said that you can also test this project directly in the SAP Web IDE preview if you have a webcam on your laptop. You just need to check that by right clicking on the name of the project, under Tools –> Preferences and then Hybrid Application Toolkit the Cordova Facade Preview flag is enabled.

When you run the app in the preview mode you can click on the BarcodeScanner button to scan the code by using your laptop camera.

/wp-content/uploads/2015/09/18_792937.jpg

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Robert Russell

    Hi Simmaco,

    Thank you (again) for the detailed blogs on HAT & Web IDE. I appreciate the detail you have provided and the blogs have helped me complete the installations and also allowed me to setup my own demo example with the barcode scanner.

    Best Regards

    Robert

    (0) 
  2. Devisha Bhavik

    Hi Simmaco,

    Very nice blog to get started.

    I have followed all the steps but looks like it is giving error at the line:

    cordova.plugins.barcodeScanner.scan(


    It says cordova is not found.


    I tried both preview on browser as well as tried running on SAP HAT Companion app. It gave the same error there as well.


    Do we need to declare on the start of the controller file for this library so that it can be referenced in the method?


    I tried to add it like below but it did not help.


    jQuery.sap.require(“com.test.emp.util.Formatter”);

    jQuery.sap.require(“com.test.emp.util.Controller”);

    jQuery.sap.require(“cordova.plugins.barcodeScanner.scan”);

    com.test.emp.util.Controller.extend(“com.test.emp.view.Master”, {

    Let me know what could be missing.

    -Bhavik

    (0) 
    1. Devisha Bhavik

      When I ran the same application on the mobile device, it worked fine.

      Also, while doing the preview on the web browser to utilize the cordova facade option, we have to run with FRAME option. Unfortunately, that was not listed anywhere (atleast I could not find.) When I ran with Frame, it worked fine.

      -Bhavik

      (0) 

Leave a Reply