Barcode Scanner - Add an external Cordova plugin to a SAPUI5 app

Introduction

SAP Web IDE is the new powerful Integrated Development Environment for SAPUI5 and Fiori applications. Unfortunately, at moment there is no way to create a SAPUI5 Mobile app and include an external plugin directly from the SAP Web IDE interface.

In this blog I'll show you how to overcome this missing feature and how to include an external Cordova plugin, like the Barcode Scanner plugin, and use it for a SAPUI5 mobile application.

Of course, there is already a Barcode Scanner plugin among the Kapsel plugins, but for the scope of this project I won't use that one, just because I want to show you how to add an external plugin to the app. This blog will cover many of the aspects related to SAPUI5 Mobile Development and it's a sort of consolidation of all the material you might have already seen in other blogs in this area.

Objective

We are going to develop a SAPUI5 application from one of the standard templates which takes data from a backend system. We will use the OData service "CB_MATERIAL_SRV" for getting the material information from the backend. We will add some custom code to this app to extend the functionality of the search bar: 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.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
• Barcode Scanner Plugin (you can find it here)
• Hybrid Application Toolkit 1.1.0+ downloadable from here
• An HCPms account configurable as described here
• SAP HANA Cloud Cloud connector(latest version preferred) downloadable from 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 and connect it to Cloud Connector
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. Clone the Barcode Scanner repository
9. Add the Barcode Scanner plugin to the project
10. Build the project from command line
11. Run the project on a mobile device

Create a sample barcode

Since we want to scan a barcode of a product in order to test our final application, let's start by creating a sample barcode we will scan with our mobile device. 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 "AI002", 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 and connect it to Cloud Connector

Our barcode is ready, we can start by creating a connection to the backend system. As the first step we can create a new destination to reach the CB_MATERIAL_SRV service located on the ABAP system called GM0.

Start the SAP HANA Cloud Connector and create an access control row for the resource path on the ABAP system

Access your HANA Trial environment and create a new destination which points to the Cloud Connector item created in the previous step

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.

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

Click on Applications

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

Switch to the Backend tab and specify the Backend URL together with the Authentication Type and the Proxy Type. After this click on Save.

You should be able to ping the application successfully

Create a new SAPUI5 app with SAP Web IDE

Now that our connection is in place, let's create the SAPUI5 application

Open SAP Web IDE

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

Enter a project name (i.e. Material)

Define the OData connection information to the CB_MATERIAL_SRV service

Provide the information about the fields you want to see in the application and click on Next.

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

Click on Finish to terminate the procedure

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

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 the description.

Also choose what platforms you want to build your app for. In my case it's for both iOS and Android

Specify in the Plugins section that you want to use the Logon Manager plugin. Enter the information about the SMP server and click on Save.

Then click on Close

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

It's time now to deploy the project using Hybrid Application Toolkit.

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

After some time you need to specify the Download folder to save the application package coming from SAP Web IDE

Clone the Barcode Scanner repository

When the deployment finishes, open a Terminal window

Use Git to clone the repository where your external plugin is located. In our case we want to use the external plugin for scanning barcodes located here so we go in a new folder (in my case "/Users/i045523/myplugins") and we clone this repo with the following command:

git clone https://github.com/wildabeast/BarcodeScanner.git

Add the Barcode Scanner plugin to the project

Go in the SAPHybrid folder normally located in your home directory

Navigate to the Material/hybrid subfolder and type the following command to add the external plugin you cloned, to your project:

cordova plugins add <path_to_the_plugin> (in my case it is "cordova plugins add /Users/i045523/myplugins/BarcodeScanner/")

Build the project from command line

Type the command

cordova build

to completely rebuild the project from the command line (you cannot build from SAP Web IDE otherwise you will lose the plugin you just added)

Run the project on a mobile device

Go back to SAP Web IDE

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

Once the application starts, provide the credentials for the backend server in the Kapsel Logon.

Don't forget to activate the Secure switch and click on Register

Then create a new passcode or disable it and click on Submit

Now a new button should be available beside the search bar.

By clicking on that button you can start the Barcode scanner and scan the previously created barcode.

Check this video to see how it works!

That's all folks!