Former Member

October 27, 2017 Less than a 1 minute read

Barcode or QR code scanning functionality into SAPUI5 applications.

I came across sap.ndc.BarcodeScanner class. Below function can be used to open iOS device camera to scan the barcode.

	onPress: function(oEvent) {
			sap.ndc.BarcodeScanner.scan(
				function(mResult) {
					alert("We got a bar code\n" +
						"Result: " + mResult.text + "\n" +
						"Format: " + mResult.format + "\n" +
						"Cancelled: " + mResult.cancelled);
				},
				function(Error) {
					alert("Scanning failed: " + Error);
				},
			);
		}

Below are few steps to be able to use the iOS device camera by using above function.

Create a new project by using ‘SAPUI5 Application’ template from WebIDE.

Add a button into App.view.xml by using this code.

<Button text="Scan" press="onPress" icon="sap-icon://bar-code"/>

Open App.controller.js and import “sap/ndc/BarcodeScanner”.
Copy above function and paste it into App.controller.js.
Deploy app to SAP Cloud Platform.
Register app to the SAP Fiori Launchpad.
Download SAP Fiori Client app into iOS device from App store.
Copy Fiori Launchpad url and paste it into Fiori Client app.
Open the app and try out the barcode scanning functionality.

In simple words, to use Barcode or QR code functionality, Fiori Launch pad must be running through SAP Fiori Client iOS app instead of an iOS device browser.

For more information please review this: https://sapui5.hana.ondemand.com/#/api/sap.ndc.BarcodeScanner.

References:

https://sapui5.hana.ondemand.com/#/api/sap.ndc.BarcodeScanner.

18 Comments

You must be Logged on to comment or reply to a post.

Former Member

October 27, 2017 at 5:34 pm

Hey Mausam great post! Definitely helpful to know how to implement bar-code scanning in SAPUI5 on a mobile device. Great Work!

Virinchy Panangipalli

October 28, 2017 at 5:07 pm

Hi Mausam,

Thanks for taking time in writing about the most demand functionality by business and SAP support in this regards.

Just wanted to add that NDC stands for native device capabilities which is SAP custom developed API to use native device capabilities like barcode directly with the API directly instead of adding the Cordova plugin explicitly and calling it.

The additional advantage is that the sap.ndc.barcodescanner.scan api takes care of the check automatically if the app is opened via browser or hybrid app/Fiori client . If opened via browser or barcode scanner not detected, api opens up a dialog box to enter the value manually . This is an important value added by SAP reducing the validation development effort for our developers.

Few more examples of sap ndc barcode are available here

Cheers

Virinchy

Kiran Kumar Gonuguntla

February 16, 2018 at 7:09 am

HI Virinchy,

Thanks for very nice explanation.

NDC works for both IOS and Andrid?

Regards,

Kiran

Virinchy Panangipalli

March 13, 2018 at 2:57 am

Hi Kiran,

yes it does work for both.

Regards

Virinchy

Biplab Chakraborty

December 30, 2019 at 3:15 pm

Hello Virinchy,

I have deployed my code which consist NDC barcode scanner, but scanner not opening when I am opening it from Fiori launchpad in any OS.

Please let me know if any configuration need to be done.

Thanks,

Biplab

Tapesh Syawariya

February 11, 2021 at 6:11 pm

Hi Biplab,

Don't do anything just try to open this app through Fiori Client iOS or android any one, It will work.

Jaiganesh Ravindran

May 3, 2018 at 7:10 am

hi Mausam,

Open App.controller.js and import “sap/ndc/BarcodeScanner”.

how to import sap/ndc/BarcodeScanner ??

C. Ubkcah

May 15, 2018 at 8:07 am

I think you should add this code directly at the top of your controller:

jQuery.sap.require("sap.ndc.BarcodeScanner");

Jaiganesh Ravindran

May 28, 2018 at 7:23 am

Hi Ubkcah ,

Thanks for your reply.

I got manual Input field ,Scanner not opening.

How to resolve this ?

C. Ubkcah

May 28, 2018 at 10:45 am

I hope you develop in SAP Web IDE. Check if you turned on HAT Plugin:

Go to SAP Web IDE, select Tools > Preferences > Plugins > Optional Plugins > Hybrid App Toolkit

Rakesh Singh

July 4, 2018 at 6:45 am

Hi C.Ubkcah,

I am unable to find the HAT in WebIDE full Stack, Can you please guide here.

Regards

Rakesh

C. Ubkcah

July 5, 2018 at 12:06 pm

Do you work with SAP Web IDE Personal Edition (local) or with the one on the Hana Cloud Platform?

Rakesh Singh

July 5, 2018 at 12:49 pm

I am working on HCP.

C. Ubkcah

July 7, 2018 at 3:08 pm

Me too. This should be no problem...

Muhammad Noor Ichsan

March 10, 2020 at 7:00 am

Hi Rakesh Singh,
Does this fix your issue ?

i got same issue here.

Thanks.

amaresh kumar pabbathi

December 12, 2019 at 1:49 pm

Hi Mausam,

The code which you are given is perfectly running if i do copy paste. But while i am using same code for table means when i click on the table line item it should has to open but while i am using this its opened but camera is not opening. i didnt understand that.can you please help me out on this.

Thanks,

Amaresh

Muhammad Noor Ichsan

March 10, 2020 at 6:49 am

Hi Mausam,
I did this 3days ago and it works when testing on the sap webide or copy the link test and paste it to the fiori client, but why the camera wont triggered/work when i deploy the app to the ABAP System and test the application on the fiori client?

could you please help me,

Thanks.

Aswini Omanakuttan

May 5, 2021 at 12:52 pm

Hi,

This code is perfectly running. But I face an issue ,the camera does not open at the time of second scan.

could you please help ,

Barcode or QR code scanning functionality into SAPUI5 applications.

Assigned Tags