Third-party lib within the UI5 app is only loaded after a refresh

Question

I'm trying to implement the ZXing barcode scanner library inside my UI5 project. For this I'm following the following tutorial: https://blogs.sap.com/2021/02/01/native-js-zxing-scanner-in-sapui5/.

So far it works pretty well. Now I've discovered that the external library doesn't load at the first app opening. So if I open the UI5 lib in incognito mode, the library isn't loaded and I get the following error:

Can't find variable: ZXing

After an additional page reload the lib is successfully loaded and works.

The resources section inside my mainfest.json:

"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ],
  "js": [
    {
      "uri": "libs/zxing.min.js"
    }
  ]
}

I'm then using the ZXing inside the custom control under "webapp/controls/BarcodeScanner" (as in the tutorial stated) and I have annotated the file with /* global ZXing:true */.

Then inside the Master.controller.js#init, I initialize the scanner:

this.oScanner = new BarcodeScanner({
  valueScanned: [this.onScanned, this],
  decoderKey: 'text',
});

I'm completely lost. Why doesn't the library get loaded at the first page view? But from the first refresh on the library works without problems. It's just the first load. That's such a dumb problem and I can't get the solution for.

Boghyon Hoffmann · Accepted Answer · 2022-06-03T12:24:28.023

1

The manifest.json section /sap.ui5/resources/js is deprecated since UI5 1.94.

Instead, have a look at the existing solutions:

If the app is running with SAPUI5 1.84.18 or higher, simply use sap.ndc.BarcodeScanner(Button) which supports pure SAPUI5 web apps (no hybrid) unlike in earlier versions.* Sample: https://ui5.sap.com/#/entity/sap.ndc.BarcodeScannerButton/sample/sap.ndc.sample.BarcodeScannerButton
If the app is running with OpenUI5:
- Try the (experimental) web component sap/ui/webc/fiori/BarcodeScannerDialog control.
- If the app runs in a Chromium-based browser on Android or macOS (iOS not supported yet**), try the web standard Shape Detection API which supports detecting barcodes natively. Here is an OpenUI5 sample with the Shape Detection API:
  - Sample (Android phone required): https://run.plnkr.co/plunks/axL2LIJA4nuQbSxW/
  - Code: https://plnkr.co/edit/axL2LIJA4nuQbSxW

Both standard UI5 controls sap/ndc/BarcodeScanner and sap/ui/webc/fiori/BarcodeScannerDialog implement ZXing internally.

* See Note 2992772.
** Request for the Shape Detection API implementation in WebKit: https://bugs.webkit.org/show_bug.cgi?id=198174

edited Jun 03 '22 at 12:24

answered Jun 03 '22 at 11:26

Boghyon Hoffmann

17,103
12
72
170

Thank you verry much for your answer! We're using SAP UI5 v. 1.84.24. We already tried the implemented barcode scanner but there we have the problem, that the barcode scanner uses per default the wideangle camera on the iphone and with that cam we're obviously not able to scan any barcodes. So because of that I tried to implement the zxing-scanner by my self. – thmspl Jun 03 '22 at 12:47
@thmspl Thanks for reply. Shouldn't your ZXing.js implementation have the same issue then? `sap/ndc/BarcodeScanner(Button)` implements ZXing too as you can see here: https://ui5.sap.com/resources/sap/ndc/BarcodeScanner-dbg.js – Boghyon Hoffmann Jun 03 '22 at 12:53
That's the big question, I don't think that the problem is related to ZXing. It is something related to the sapui5 mechanism but I don't know the framework in deep so it's hard to find out. – thmspl Jun 03 '22 at 13:03
@thmspl I'd suggest creating a customer incident with the support component *MOB-SDK-UI5*. Let the SAP employees know about your issue. 1.84 is still actively maintained. If the `sap/ndc/BarcodeScanner(Button)` developer fixes the issue, request downporting the fix to the next patch release of 1.84.x. – Boghyon Hoffmann Jun 03 '22 at 13:04
@thmspl Does https://zxing-js.github.io/ngx-scanner/ work with your iPhone? – Boghyon Hoffmann Jun 03 '22 at 13:21
Yes. And my implementation also works but not on the first page load. It seems like the fiori app isn't loading the library correctly on the FIRST page view. But after that first page view it's working without problems. – thmspl Jun 03 '22 at 13:27
@thmspl https://zxing-js.github.io/ngx-scanner/ works but https://ui5.sap.com/#/entity/sap.ndc.BarcodeScannerButton/sample/sap.ndc.sample.BarcodeScannerButton doesn't? Could you please check the UI5 sample with your iPhone? – Boghyon Hoffmann Jun 03 '22 at 13:31
Both of them are working on my phone. The problem is the loading mechanism of the external library is somehow not working correctly. It's not a zxing problem. As I said the library can't be loaded the first time I'm on the app. After that it somehow can be loaded and it's not a problem anymore. That's the problem. – thmspl Jun 03 '22 at 13:34
@thmspl Yes, but I'm trying to understand why the app needs own implementation of ZXing if SAPUI5 already comes with the BarcodeScanner which also implements ZXing – Boghyon Hoffmann Jun 03 '22 at 13:36
@thmspl So the [SAPUI5 BarcodeScanner sample](https://ui5.sap.com/#/entity/sap.ndc.BarcodeScannerButton/sample/sap.ndc.sample.BarcodeScannerButton) in SAPUI5 1.102 works on your iPhone. **In SAPUI5 1.102, ZXing 0.19.1** is used (See https://ui5.sap.com/resources/sap/ndc/manifest.json). **In SAPUI5 1.84, ZXing 0.18.3** is used (See https://ui5.sap.com/1.84.24/resources/sap/ndc/manifest.json) which doesn't work in your iPhone. If that's the case, ask SAP to downport the ZXing upgrade to the SAPUI5 1.84 release via [customer incident](https://launchpad.support.sap.com/#incident/create). – Boghyon Hoffmann Jun 03 '22 at 13:49

Third-party lib within the UI5 app is only loaded after a refresh

1 Answers1