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.

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

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

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>

6) You should be able to ping the application successfully

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

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

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

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

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

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

Deploy the app with HAT

Deploy the project using Hybrid Application Toolkit.

1) Launch HAT

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.

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

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

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

7) The product is automatically found by the application

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.