Hello Everyone!
In this blog I will demonstrate how a device camera can be accessed within a SAPUI5 application to scan a barcode and populate the value of the barcode into an input field. This will be achieved in a plain SAPUI5 web application which can be accessed via any device that has a camera and a supported browser (we will implement a fallback solution when the application is accessed via a desktop or device with no camera). We will make use of an external JavaScript library called cordova plugin which will handle the detection and decoding of barcodes.
This is a step by step tutorial showing how to use your device camera as a barcode scanner in SAPUI5 App with SAP Web IDE.We make use of cordova barcode scanner plugin.This plugin enables to scan and decode a barcode using the device camera.The plugin support android and ios platforms.
This code for Employee Attendance . In this code, When any id card scaned by Employee at that time data checked in backend and display data in table.
Pre-requisites
More information about the Cordova Barcode Scanner can be found here:
Build SAPUI5 Cordova Barcode Scanner with OData Service
Steps
Create Ui5 app and write this code in XML file this xml file include button for scan and table.that table displday scaned data.
write below code in controller.
The onbarcodescan method performs the barcode scanning. It is calling the cordova plugin barcodeScanner to get the barcode detail in result.text. Then pass this to the OData query string to perform the OData query. The response will be captured and printed in the scanresult page. Update model method used for update data in backend, and other two method used for search and display Employee data.
when you run your application your application look like below
if you face any kind of issues executing these steps kindly comment it down here and give me your valueble feedback regarding this blog post ,I am always ready to help!!
Thanks for reading!
In this blog I will demonstrate how a device camera can be accessed within a SAPUI5 application to scan a barcode and populate the value of the barcode into an input field. This will be achieved in a plain SAPUI5 web application which can be accessed via any device that has a camera and a supported browser (we will implement a fallback solution when the application is accessed via a desktop or device with no camera). We will make use of an external JavaScript library called cordova plugin which will handle the detection and decoding of barcodes.
This is a step by step tutorial showing how to use your device camera as a barcode scanner in SAPUI5 App with SAP Web IDE.We make use of cordova barcode scanner plugin.This plugin enables to scan and decode a barcode using the device camera.The plugin support android and ios platforms.
This code for Employee Attendance . In this code, When any id card scaned by Employee at that time data checked in backend and display data in table.
Pre-requisites
- Knowldge of UI5,Javascript,xml
- Created basic SAPUI5 Application
More information about the Cordova Barcode Scanner can be found here:
Build SAPUI5 Cordova Barcode Scanner with OData Service
Steps
Create Ui5 app and write this code in XML file this xml file include button for scan and table.that table displday scaned data.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="qrcode.qrcode.controller.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<App id="app">
<pages>
<Page id="page" title="Employee Attendance">
<content>
<Button text="Scan" press="onBarcodeScan" icon="sap-icon://bar-code"/>
<Panel backgroundDesign="Transparent">
<Table id="Employee" items="{/daf_empattSet}">
<headerToolbar>
<Toolbar>
<Title text="{i18n>Employee Attendence Details}"/>
<ToolbarSpacer/>
<SearchField placeholder="Search By Name" width="50%" liveChange="onFilterInvoices1" search="onFilterInvoices"/>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{Srno}"></Text>
<Text text="{Dinkid}"></Text>
<Text text="{path: 'Tdate', type:'sap.ui.model.type.Date', formatOptions : { pattern:'dd.MM.yyyy'}}"/>
<Text text="{path: 'Entrytime', type:'sap.ui.model.odata.type.Time', formatOptions: {pattern: 'HH:mm:ss'}}"/>
<Text text="{path: 'Exittime', type:'sap.ui.model.odata.type.Time', formatOptions: {pattern: 'HH:mm:ss'}}"/>
<Text text="{path: 'Totalhrs', type:'sap.ui.model.odata.type.Time', formatOptions: {pattern: 'HH:mm:ss'}}"/>
<Text text="{Latehrs}"></Text>
</cells>
</ColumnListItem>
</items>
<columns>
<Column>
<Text text="Srno"></Text>
</Column>
<Column>
<Text id="Dinkid" text="Dinkid"></Text>
</Column>
<Column>
<Text text="Date"></Text>
</Column>
<Column>
<Text id="Entrytime1" text="In Time"></Text>
</Column>
<Column>
<Text id="Exittime2" text="Out Time"></Text>
</Column>
<Column>
<Text text="Total Hours"></Text>
</Column>
<Column>
<Text id="Latehrs3" text="Latehrs"></Text>
</Column>
</columns>
</Table>
</Panel>
</content>
</Page>
</pages>
</App>
</core:View>write below code in controller.
The onbarcodescan method performs the barcode scanning. It is calling the cordova plugin barcodeScanner to get the barcode detail in result.text. Then pass this to the OData query string to perform the OData query. The response will be captured and printed in the scanresult page. Update model method used for update data in backend, and other two method used for search and display Employee data.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ndc/BarcodeScanner",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, BarcodeScanner, Filter, FilterOperator) {
"use strict";
var ServiceUrl = "";
var oModel = new sap.ui.model.odata.ODataModel(ServiceUrl);
return Controller.extend("qrcode.qrcode.controller.View1", {
onInit: function () {
},
onBarcodeScan: function () {
var dinkid;
var that = this;
var code = "";
if (!cordova.plugins.barcodeScanner) {
alert("Barcode scanning not supported");
return;
}
cordova.plugins.barcodeScanner.scan(
function (result) {
if (result.format == "QR_CODE") {
code = result.text;
dinkid = result.text.split(" ")[2];
oModel.read("/daf_empmasterSet", null, null, true, function (oData, response) {
for (var i = 0; i < response.data.results.length; i++) {
var mdinkid = response.data.results[i].Dinkid;
if (dinkid === mdinkid) {
var Srno1 = response.data.results[i].Srno;
var Dinkid1 = response.data.results[i].Dinkid;
that.updateModel(Srno1, Dinkid1);
}
}
});
that.getView().byId("searchField").setValue(code);
that.onSearch();
}
},
function (error) {
alert("Scan failed: " + error);
},
{
preferFrontCamera: true, // iOS and Android
showFlipCameraButton: true, // iOS and Android
showTorchButton: true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt: "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats: "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation: "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations: true, // iOS
disableSuccessBeep: false // iOS and Android
}
);
},
updateModel: function (Srno1, Dinkid1) {
var oTable = this.byId("Employee");
var Tdate = new Date();
var dateFormat = sap.ui.core.format.DateFormat.getInstance({
pattern: "yyyy-MM-ddThh:mm:ss"
});
var Tdate1 = dateFormat.format(new Date(Tdate));
/* var EntryTime1 = Tdate.toTimeString().split(" ")[0];
var tdateFormat = sap.ui.model.odata.type.Time({
pattern: "HH:mm:ss"
});
var EntryTime = tdateFormat.format(Tdate);*/
var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({
pattern: "'PT'HH'H'mm'M'ss'S'"
});
var EntryTime = timeFormat.format(Tdate);
var oEntry = {
"Srno": Srno1,
"Dinkid": Dinkid1,
"Tdate": Tdate1,
"Entrytime": EntryTime,
"Exittime": EntryTime,
// "Totalhrs": EntryTime,
"Latehrs": "X"
};
oModel.update("/daf_empattSet(Srno='" + Srno1 + "')",
oEntry, {
method: "PUT",
success: function (oData, oResponse) {
oTable.getModel().refresh();
oTable.getBinding("items").refresh(true);
sap.m.MessageToast.show("Successfully Scanned");
},
error: function (err, oResponse) {
sap.m.MessageToast.show("Somthing is Wrong.");
}
});
},
onFilterInvoices: function (oEvent) {
// build filter array
var aFilter = [];
var sQuery = oEvent.getParameter("query").toUpperCase();
if (sQuery) {
aFilter.push(new Filter("Dinkid", FilterOperator.Contains, sQuery));
}
// filter binding
var oList = this.getView().byId("Employee");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
},
onFilterInvoices1: function (oEvent) {
// build filter array
var aFilter = [];
var sQuery = oEvent.getParameters().newValue.toUpperCase();
if (sQuery) {
aFilter.push(new Filter("Dinkid", FilterOperator.Contains, sQuery));
}
// filter binding
var oList = this.getView().byId("Employee");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}
});
});when you run your application your application look like below
if you face any kind of issues executing these steps kindly comment it down here and give me your valueble feedback regarding this blog post ,I am always ready to help!!
Thanks for reading!
- SAP Managed Tags:
16 Comments
