Skip to Content
Author's profile photo Former Member

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.

  1. Create a new project by using ‘SAPUI5 Application’ template from WebIDE.
  2. Add a button into App.view.xml by using this code.
    <Button text="Scan" press="onPress" icon="sap-icon://bar-code"/>
    
  1. Open App.controller.js and import “sap/ndc/BarcodeScanner”.
  2. Copy above function and paste it into App.controller.js.
  3. Deploy app to SAP Cloud Platform.
  4. Register app to the SAP Fiori Launchpad.
  5. Download SAP Fiori Client app into iOS device from App store.
  6. Copy Fiori Launchpad url and paste it into Fiori Client app.
  7. 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.

Assigned tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Virinchy P
      Virinchy P

      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

      Author's profile photo Kiran Gonuguntla
      Kiran Gonuguntla

      HI Virinchy,

      Thanks for very nice explanation.

      NDC works for both IOS and Andrid?

       

      Regards,

      Kiran

      Author's profile photo Virinchy P
      Virinchy P

      Hi Kiran,

      yes it does work for both.

      Regards

      Virinchy

      Author's profile photo Biplab Chakraborty
      Biplab Chakraborty

      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

      Author's profile photo Tapesh Syawariya
      Tapesh Syawariya

      Hi Biplab,

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

      Author's profile photo Jaiganesh Ravindran
      Jaiganesh Ravindran

      hi Mausam,

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

       

      how to import sap/ndc/BarcodeScanner ??

       

       

      Author's profile photo C. Ubkcah
      C. Ubkcah

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

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

       

      Author's profile photo Jaiganesh Ravindran
      Jaiganesh Ravindran

      Hi Ubkcah ,

       

      Thanks for your reply.

      I got manual Input field ,Scanner not opening.

      How to resolve this ?

      Author's profile photo C. Ubkcah
      C. Ubkcah

      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

      Author's profile photo Rakesh Singh
      Rakesh Singh

      Hi C.Ubkcah,

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

      Regards

      Rakesh

      Author's profile photo C. Ubkcah
      C. Ubkcah

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

       

      Author's profile photo Rakesh Singh
      Rakesh Singh

      I am working on HCP.

      Author's profile photo C. Ubkcah
      C. Ubkcah

      Me too. This should be no problem...

      Author's profile photo Muhammad Noor Ichsan
      Muhammad Noor Ichsan

      Hi Rakesh Singh,
      Does this fix your issue ?

      i got same issue here.

      Thanks.

      Author's profile photo amaresh kumar pabbathi
      amaresh kumar pabbathi

      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

      Author's profile photo Muhammad Noor Ichsan
      Muhammad Noor Ichsan

      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.

      Author's profile photo Aswini Omanakuttan
      Aswini Omanakuttan

      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 ,