Several SAP modules have incorporated the barcode scanning feature, to enhance productivity and accuracy in various business processes. SAP Fiori apps have integrated scanning ability out-of-the-box for these modules. This functionality can be used via device browsers, be it a mobile, laptop, or desktop, if the device has a working camera.
Using sap.ndc.BarcodeScannerButton -
Barcode scanner related module is provided in library “sap.ndc” where NDC stands for Native Device Capabilities. Earlier the barcode scanner worked in SAP Fiori Client, where the necessary JS API is provided. The controls were meant specifically for capabilities provided by SAP in Cordova / Kapsel applications.
Scanning is supported using the browser as of SAPUI5 minimum versions 1.92, SAPUI5 1.84.18, SAPUI5 1.71.47, and later supported SAPUI5 versions. (Refer Note – 2402585)
After the end of maintenance of SAP Mobile Platform SDK on 31 December, 2024 (Kapsel, BTP Hybrid/Cloud Build, custom Fiori Client) SAP plans on providing barcode scanning through SAPUI5 by implementing class "sap.ndc.BarcodeScannerButton".
Few significant evolutions of this API in SAPUI5, as per Release Notes -
1.98 - Front Camera support in sap.ndc.BarcodeScannerButton
1.102 - Upgrade @zxing/library from 0.18.3 to 0.19.1 into rel-1.102
1.103 - Add new properties: frameRate and zoom into sap.ndc.BarcodeScannerButton to improve the success rate of scanning.
1.107 - Improve the performance of barcode scanner
1.115 - add Bluetooth Barcode Scanner and enable multi barcode scan
Note: Version 1.115 is NOT a Long-Term Maintenance version and is already out of maintenance as this is getting written. Current Version – 1.116.0 (Details - https://sapui5.hana.ondemand.com/versionoverview.html)
As we can see that SAP has enabled multi-barcode scan from 1.115 onwards. As per documentation for sap.ndc.BarcodeScanner.setConfig(options) - If enabled, will support scan multi barcodes, and the max number of the barcodes in each scanning is 10. By default, it is disabled. Only working for ZXingCPP, as of writing this.
The out-of-the-box browser-based scanning feature (sap.ndc.BarcodeScanner) from SAP is limited to scanning only 1 barcode at a time. Camera window closes after a barcode is read successfully. User must click on the Scan button for each barcode to be actioned on.
In practical use, scanning barcodes will not be limited to single digit quantities. So, in cases where one must scan say 30-35 barcodes, one has to click on the Scan button that many times, which is not at all a desired user experience. If one is using the latest libraries (1.115 and above), the number of clicks is definitely reduced (current limit is 10 per scanning).
In this approach there is an inherent dependency on the quality of camera /video resolution. In case of multi-scan, frame rate also matters. These factors are now added as of 1.103 version, as mentioned above. In my brush with sap.ndc.BarcodeScannerButton (version 1.84), the real constraint was the physical dimensions of the printed barcode (EAN-13). Anything less than 4cm in width was not getting recognized / read, while using iPhone Pro 13 device.
Using QuaggaJS -
As per SAP Note – 2991445, pure Javascript libraries like QuaggaJS can be used to achieve mobile browser-based scanning functionality. QuaggaJS library can be used to implement multiple / continuous barcode scanning with further modifications. This approach can be used to build browser based custom SAPUI5 applications and even extend standard SAP Fiori apps, which already have the barcode scanning feature.
Default QuaggaJS code snippet closes after successful read / detection of a single barcode. Changes, as per screenshot, keeps the camera window open and continuous scanning is made possible.
Default QuaggaJS code snippet allows the barcodes to be detected on the entire frame. As per documentation following parameters can be tweaked for getting the desired speed and accuracy.
For further details refer to - https://serratus.github.io/quaggaJS/
With this approach one needs much lesser clicks than the above mentioned sap.ndc.BarcodeScannerButton based solution. TCO is less compared to apps using SAP library, which might need to be updated with library version upgrades, to use the new features.
There is additional ability to enhance the experience with audio – sound and touch – vibration incorporated scanning for error / success feedback as required.
From my experience, aspects to consider with this approach:
Using Bluetooth enabled external scanner –
With the current state of Bluetooth enabled devices, one can simulate a touch or click of a button on a mobile, laptop and / or desktop by pressing a button on the external device. Paired a Selfie Stick via Bluetooth, anyone? Yes, using the same capability, we can do scans too. Online search brings up many such Bluetooth scanning devices.
These barcode scanner devices have an edge over camera enabled devices. They use red light (hence minimum deviation) to read the barcodes, which result in faster, at much higher accuracy, barcode reading. After all they are designed solely to read a barcode, black and white spaces, rather than whole spectrum of colours.
When one clicks on the button of the Bluetooth enabled barcode scanner device, it reads and decodes the text (based on barcode format supported by the scanner) and pastes the text on the mobile / laptop / desktop, wherever there is an active cursor to paste on.
Enhance any SAP standard app (which already has scanning feature), by adding a new button as shown below:
This button opens a “sap.m.SelectDialog” which has a search bar and a list together.
“Search” is triggered whenever the event (click on the Bluetooth device) is registered. As explained earlier, the device pastes the deciphered text from the barcode in the search bar where the “focus” is set.
The “Search” calls another function and then clears the value of the search bar, making it ready for the next text to be pasted at the click of the button.
The function which gets called from “Search” in turns calls the SAP standard function.
Please refer to the screenshot from the view where the standard SAP scan button is made hidden while adding a custom button.
“ScanSuccess” calls the function “onCameraBarcodeScan” which calls function “onScan” – the same function we call from the custom code.
I have used Transfer Stock application for enhancement - https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F0753')/S20OP
Other standard apps have also same architecture. The standard “onScan” function name will differ app to app.
This approach seems to have more pros than cons –
Please let me know, what do you think of these approaches.
Using sap.ndc.BarcodeScannerButton -
Barcode scanner related module is provided in library “sap.ndc” where NDC stands for Native Device Capabilities. Earlier the barcode scanner worked in SAP Fiori Client, where the necessary JS API is provided. The controls were meant specifically for capabilities provided by SAP in Cordova / Kapsel applications.
Scanning is supported using the browser as of SAPUI5 minimum versions 1.92, SAPUI5 1.84.18, SAPUI5 1.71.47, and later supported SAPUI5 versions. (Refer Note – 2402585)
After the end of maintenance of SAP Mobile Platform SDK on 31 December, 2024 (Kapsel, BTP Hybrid/Cloud Build, custom Fiori Client) SAP plans on providing barcode scanning through SAPUI5 by implementing class "sap.ndc.BarcodeScannerButton".
Few significant evolutions of this API in SAPUI5, as per Release Notes -
1.98 - Front Camera support in sap.ndc.BarcodeScannerButton
1.102 - Upgrade @zxing/library from 0.18.3 to 0.19.1 into rel-1.102
1.103 - Add new properties: frameRate and zoom into sap.ndc.BarcodeScannerButton to improve the success rate of scanning.
1.107 - Improve the performance of barcode scanner
1.115 - add Bluetooth Barcode Scanner and enable multi barcode scan
Note: Version 1.115 is NOT a Long-Term Maintenance version and is already out of maintenance as this is getting written. Current Version – 1.116.0 (Details - https://sapui5.hana.ondemand.com/versionoverview.html)
As we can see that SAP has enabled multi-barcode scan from 1.115 onwards. As per documentation for sap.ndc.BarcodeScanner.setConfig(options) - If enabled, will support scan multi barcodes, and the max number of the barcodes in each scanning is 10. By default, it is disabled. Only working for ZXingCPP, as of writing this.
The out-of-the-box browser-based scanning feature (sap.ndc.BarcodeScanner) from SAP is limited to scanning only 1 barcode at a time. Camera window closes after a barcode is read successfully. User must click on the Scan button for each barcode to be actioned on.
In practical use, scanning barcodes will not be limited to single digit quantities. So, in cases where one must scan say 30-35 barcodes, one has to click on the Scan button that many times, which is not at all a desired user experience. If one is using the latest libraries (1.115 and above), the number of clicks is definitely reduced (current limit is 10 per scanning).
In this approach there is an inherent dependency on the quality of camera /video resolution. In case of multi-scan, frame rate also matters. These factors are now added as of 1.103 version, as mentioned above. In my brush with sap.ndc.BarcodeScannerButton (version 1.84), the real constraint was the physical dimensions of the printed barcode (EAN-13). Anything less than 4cm in width was not getting recognized / read, while using iPhone Pro 13 device.
Using QuaggaJS -
As per SAP Note – 2991445, pure Javascript libraries like QuaggaJS can be used to achieve mobile browser-based scanning functionality. QuaggaJS library can be used to implement multiple / continuous barcode scanning with further modifications. This approach can be used to build browser based custom SAPUI5 applications and even extend standard SAP Fiori apps, which already have the barcode scanning feature.
Default QuaggaJS code snippet closes after successful read / detection of a single barcode. Changes, as per screenshot, keeps the camera window open and continuous scanning is made possible.
QuaggaJS Code Snippet
Default QuaggaJS code snippet allows the barcodes to be detected on the entire frame. As per documentation following parameters can be tweaked for getting the desired speed and accuracy.
For further details refer to - https://serratus.github.io/quaggaJS/
With this approach one needs much lesser clicks than the above mentioned sap.ndc.BarcodeScannerButton based solution. TCO is less compared to apps using SAP library, which might need to be updated with library version upgrades, to use the new features.
There is additional ability to enhance the experience with audio – sound and touch – vibration incorporated scanning for error / success feedback as required.
From my experience, aspects to consider with this approach:
- The continuous flow of data stream as the camera keeps open. A camera can easily capture 24 – 30 frames per second when kept open based on hardware capability, which is faster than any human can react (e.g – moving the camera away from barcode already scanned). The “frequency” parameter needs to be configured to get this at par with human reaction times.
- From user experience, while using camera in a mobile device, the entire screen is the video stream. So, a notification needs to be shown when a barcode is scanned successfully. I chose to use “sap.m.MessageToast” element for this aspect and as per guideline we should not use less than 3000ms (3 secs) for duration of the element. So, need to manage the scan frequency to around 1 frame per 3 secs. Also, need to keep in mind that high number of server calls with successful scans per second will affect performance of the system from where one is retrieving details based on barcode.
- Barcodes represent data by varying the width / spacing of parallel lines. At high frequency of data deciphering leads to false / incorrect reads, due to users not holding the camera or barcode steady enough. Shaky or out of focus frames misrepresent the width, spacing etc of barcode. Better to incorporate custom accuracy logic for this issue along with optimizing the resolution parameters. Try to eliminate inaccuracies before using the barcode data to fetch details from any SAP system.
- Normal humans are not capable to keep up with such a high frequency of data reading capability. This leads to the problem that one can end up scanning the same barcode multiple times, even when it is not desired.
- This solution was unable to decode / read EAN-13 barcode printed with less than 3cm width in dimension.
Using Bluetooth enabled external scanner –
With the current state of Bluetooth enabled devices, one can simulate a touch or click of a button on a mobile, laptop and / or desktop by pressing a button on the external device. Paired a Selfie Stick via Bluetooth, anyone? Yes, using the same capability, we can do scans too. Online search brings up many such Bluetooth scanning devices.
These barcode scanner devices have an edge over camera enabled devices. They use red light (hence minimum deviation) to read the barcodes, which result in faster, at much higher accuracy, barcode reading. After all they are designed solely to read a barcode, black and white spaces, rather than whole spectrum of colours.
When one clicks on the button of the Bluetooth enabled barcode scanner device, it reads and decodes the text (based on barcode format supported by the scanner) and pastes the text on the mobile / laptop / desktop, wherever there is an active cursor to paste on.
Enhance any SAP standard app (which already has scanning feature), by adding a new button as shown below:
Button for Bluetooth device scan
This button opens a “sap.m.SelectDialog” which has a search bar and a list together.
Event function for the device button
“Search” is triggered whenever the event (click on the Bluetooth device) is registered. As explained earlier, the device pastes the deciphered text from the barcode in the search bar where the “focus” is set.
The “Search” calls another function and then clears the value of the search bar, making it ready for the next text to be pasted at the click of the button.
Calling standard SAP function
The function which gets called from “Search” in turns calls the SAP standard function.
Please refer to the screenshot from the view where the standard SAP scan button is made hidden while adding a custom button.
“ScanSuccess” calls the function “onCameraBarcodeScan” which calls function “onScan” – the same function we call from the custom code.
Standard SAP functions
I have used Transfer Stock application for enhancement - https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F0753')/S20OP
Other standard apps have also same architecture. The standard “onScan” function name will differ app to app.
Scanning window - Desktop and Laptop
This approach seems to have more pros than cons –
- The format of the barcode is external device dependent. As long as the barcode gets decoded by the Bluetooth device and text gets pasted on the cursor, this solution is the simplest of all plug-n-play options with highest reusability factor. For both the above “sap.ndc.BarcodeScannerButton” (via SE73) and “QuaggaJS” approach, the format of the barcode need to configured specifically.
- This solution will work even on devices which does not have camera (for security reasons). It does require Bluetooth capability.
- It also has a better mobility factor in comparison to laptops and desktops, as the Bluetooth device can stay connected wirelessly over a specified distance.
- In my experience, it does possess better accuracy over camera enabled devices, as the barcode scanner Bluetooth device could scan EAN-13 barcodes with width of 2cm, on a glossy paper.
Please let me know, what do you think of these approaches.
- SAP Managed Tags:
2 Comments
