SAPUI5 & SAP Fiori:Barcode or QR code scanning in SAPUI5 applications.

[priteshpatel65]

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

1. Knowldge of UI5,Javascript,xml


2. 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!