After SAP decided last year on their own to not only moving away from their mobile hybrid SDK Kapsel, but to also end the Fiori Mobile Client (FMC), their mobile customers were not profusely grateful. While for FMC, SAP moved away from their decision and considered customer demands, the problem regarding Kapsel and its plugins like barcode scanner wasn’t solved. In my previous blog about this issue I listed alternatives how to solve this issue. One was to include an official barcode scanner control and that is what SAP has done. Barcode scanner capability for web scenarios has been added to SAPUI5. The control does not depend on native features, it works purely in the browser. Analyzing the barcodes is done via the library ZXing-JS.

Batteries included

The Barcode Scanner UI control has been available for a long time. The namespace of the control (sap.ndc) indicates that it is a control that depends on native device capabilities, like a Cordova / Kapsel plugin for barcode scanning. Starting with release 1.84.18, SAP delivers ZXing which allows the control to use this library for scanning the codes. If you want to validate this, library is included in release 1.84.18, and not in release 1.84.17. For more information about ZXing, go to GitHub. Project documentation has a list of supported formats that looks promising. Project status is the same as a few month ago: it could need more love. Maybe now that SAP is including it in SAPUI5 it will get more active contributions.

With this step, no Kapsel plugin is needed to scan barcodes. This is exactly what I asked for in my previous blog. With this feature added to SAPUI5, SAP delivers a good solution. The same UI control that was used previously for barcode scanning in Kapsel apps is enhanced with a web only solution. It checks if a Cordova plugin is available (source code: sap.Settings.isFeatureEnabled( “cordova.plugins.barcodeScanner”) and if not, loads ZXing (source code: sap.ui.requireSync( “sap/ndc/thirdparty/ZXing”). A very nice side effect of this is that it is not necessary to adjust the UI5 app to the web when migrating away from Kapsel. The change is transparent (there is still work to do for logon, offline, …). The UI5 source code for barcode scanning is untouched. For new developments, the UI control can be used, and it will simply work, no need to find out how to integrate a plugin or to make the app a hybrid app just for barcode scanning. It should be future proof as the control is now part of SAPUI5. It automatically falls under the release cycle, documentation, patches, and life cycle of a control. Which, looking at the current list of removed UI controls in UI5, should mean that the control will stay around for years.

UI5 Control

UI5 has an excellent documentation and a very impressive sample list where almost every UI control can be experienced live, and sample code viewed. Currently, there is no sample for the Barcode Scanner control. My guess is that it is just a question of time until an official sample is provided.

As it is UI5, creating your own sample is easy. The UI control is just a button with a default icon assigned. That’s what I did when testing the UI control.

The scan button will open a new dialog, activate the camera and start scanning. If it works, the extracted text information is passed on, or a new input dialog is shown where the code can be entered manually.

Conclusion

Adding the web capability to the barcode scanner control was the right decision. The included library is good enough to catch most barcode scanning scenarios. The control works fine, just ensure to test if it works for your scenarios. Keep in mind that the scanning process consumes resources like memory and CPU, more than as a plugin. You cannot minimize resource consumption by defining the frame frate for scanning. For scenarios with heavy scanning activities an evaluation should be done. I doubt that this will cause any real problems, but then again, not all smartphones in use by companies are generously equipped.

Current version does not allow setting many options. You cannot set the code type like QR Code. The library scans the captured image and tries (via brute force?) to find out the code format. Scanning an area where several codes, albeit different formats, are sticking together will be a challenge. Is seems that you also cannot define the camera to use (source code: facingMode: ‘environment’).

How the new capability was added allows customers to transform their current Fiori hybrid app based on Kapsel/Cordova plugin to a web only app. Best case is that the Kapsel part is removed and the actual app works without any further adjustments. The capability is included in SAPUI5, making it available to everyone that uses SAPUI5, on premise or in the cloud. At the same time this means: you have to update your on premise systems to get at least SAPUI5 1.84.18. If you depend on an upgrade, you might find yourself in a position that a solution is available, but also unavailable for the next years. I think it would be beneficial for everyone if SAP releases the barcode scanner also as a plugin. This would allow customers to use the plugin without depending on having the correct SAPUI5 version available. Maybe making it this way possible to use it in OpenUI5 too? In the meantime, if you need to add barcode scanning as a plugin, take a look at my sample UI5 plugin.

Tests

Besides QR Codes, the ZXing library can read other formats too. The test if the control can read codes, I went to Wikipedia and scanned the sample codes provided there.

QR Code

Reading QR code works fine, no problem here.

DataMatrix

Result: works

Aztec Code

Result: works

EAN-8 / EAN-13

Result: does not work

ZXing lists these as supported, but in my tests the Barcode scanner was not able to read the codes successfully. It was only scanning and scanning without success.