- SAP Managed Tags
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:
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.
Step by Step Implementation:
Prerequisites:
I'll be using the following test-data:
Configuring the above data as barcodeData.json and adding it in manifest.json
Configuring external JSBarcode library and adding it in manifest.json:
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:
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)
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:
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:
- 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.
- 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:
- Copy the code for JSBarcode from https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js
- In your util directory create a folder call barcode.js and paste the code.
- Configure it in manifest.json
"resources": {
"js":[{
"uri":"util/barcode.js"
}]
}
- 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:
- Creating the UI
- Adding the barcode library in sap.ui.define : ..../util/barcode in your controller.
- Setting the json model in onInit function
onInit: function () {
this.detailData = new sap.ui.model.json.JSONModel();
this.detailData = this.getView().getModel("mainDetails");
}
- 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;
}
- 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"/>
- 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"/>
- 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)
- Add the sap.ndc library and button code in View.
- On Scan Success ,the user will be able to see the data
and if you print the scan results it would be like this
- 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:
9 Comments
| User | Count |
|---|---|
| 10 | |
| 8 | |
| 7 | |
| 6 | |
| 6 | |
| 4 | |
| 4 | |
| 4 | |
| 4 | |
| 4 |
