Implementation of Barcode/QR Scanner in SAPUI5

Overview:

In this blog ,I would like to share my experience of implementing the sap.ndc.BarcodeScannerButton and creation of Barcode/Qr using external js library JSBarcode/Google api respectively.

Business Case Scenario:

I have developed this Custom Fiori Application for Life-Sciences, where the basic requirement was to:

1. Scan the Barcodes of Pharma Medicines using the web browser, based on the scanning process a Goods Receipt gets generated in the backend SAP S/4Hana.
2. Generate the Barcodes/QR for Pharma Medicines based on the GTN Number.

For this blog, I’ll be using test data to show the barcode generation and scanning process.

Design & Implementation:

Below is the Solution Architecture for the above Business Scenario.

Barcode Scanning Application Architecture

Step by Step Implementation:

Prerequisites:

I’ll be using the following test-data:

{
	"Details": [ {
		"key": 1,
		"gtn": "01",
		"gtnNo": "20857674004455",
		"batch": "10",
		"batchNo": "BCF2345JJ",
		"expiry": "18",
		"expiryNo": "100627",
		"srNo": "21",
		"srNoNum": "192866",
		"qty": "30",
		"qtyNo": "1000",
		"medName": "Eletriptan hydrobromide (10 mg) Tablet,10mg x 10 x 1000 packs",
		"country": "Ireland",
		"po": "4500001599",
		"mat": "EH10MGTAB"
	}]
}

Configuring the above data as barcodeData.json and adding it in manifest.json

"models": {
	        "mainDetails": {
                "type": "sap.ui.model.json.JSONModel",
                "settings": {},
                "uri": "model/Data/barcodeData.json"
            }
	}

Configuring external JSBarcode library and adding it in manifest.json:

1. Copy the code for JSBarcode from https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js
2. In your util directory create a folder call barcode.js and paste the code.
3. Configure it in manifest.json

   "resources": {
   			"js":[{
   				"uri":"util/barcode.js"
   			}]
   		}​

4. While using it in your controller add the following snippet at the top:

   /* global JsBarcode:true */​

Barcode/QR Creation:

Development Scenario:

Create a dropdown for GTN Numbers and when the user selects the GTN No, QR and Barcode based on the data should get generated.

Implementation:

1. Creating the UI
2. Adding the barcode library in sap.ui.define : …./util/barcode in your controller.
3. Setting the json model in onInit function

   onInit: function () {
   			this.detailData = new sap.ui.model.json.JSONModel();
   			this.detailData = this.getView().getModel("mainDetails");
   		}​

4. On Item Change fetching the data from JSON Model

   onItemChange: function (oEvent) {
      var value = oEvent.getSource().getProperty("value");
      var resource = this.detailData.oData.Details.filter(element => element.gtnNo === value);
      var text1 = "(" + resource[0].gtn + ")" + resource[0].gtnNo;
      var text2 = "-(" + resource[0].batch + ")" + resource[0].batchNo;
      var text3 = "(" + resource[0].expiry + ")" + resource[0].expiryNo;
      var text4 = "-(" + resource[0].srNo + ")" + resource[0].srNoNum;
      var text5 = "-(" + resource[0].qty + ")" + resource[0].qtyNo;
   }​

5. Using the JSBarcode Implementation code with the data fetched

   var text = text1 + text2 + "-"+text3 + text4 + text5;
   JsBarcode(".barcode", text, {
   				width: 1,
   				height: 50,
   				fontSize: 15
   			});​

   <Image class="barcode" width="50rem" height="8rem"/>

6. In the same way I have used Google charts api for generating QR

   var aQueryString = [],baseUrl = "http://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=",
   		queryString = "";
   var url;
       url = baseUrl + text;
   this.getView().byId("qrcode").setSrc(url);​

   <Image id="qrcode" width="160px"/>

7. Output

Barcode Scanner(sap.ndc.BarcodeScannerButton):

Development Scenario:

When the user scans the Barcode/QR successfully, all data regarding that medicine should be visible and available for further processing (generating Goods Receipt)

1. Add the sap.ndc library and button code in View.
2. On Scan Success ,the user will be able to see the dataand if you print the scan results it would be like this
3. Then the user can click on generate GR button to create Goods Receipt.

Summary:

In this blog, I have shared my implementation of sap.ndc.BarcodeScannerButton and simple process for creation of Barcode/QR using external libraries in SAPUI5 Applications.

Please feel free to share your views about my Barcode/Qr Scanner Implementation in the comment section.

Thank You for Reading.

Resources:

1. https://sapui5.hana.ondemand.com/#/entity/sap.ndc.BarcodeScannerButton/sample/sap.ndc.sample.BarcodeScannerButton
2. https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js