Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

Instead, have a look at the existing solutions:

  1. 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
  2. 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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!