Skip to Content

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) {
				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:



You must be Logged on to comment or reply to a post.
  • 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



  • 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.




  • 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,