Visual Builder provides a simple way to scan barcodes. But that solution depends on Barcode Detection API and whether the user's browser supports this API or not. This website lists the browsers and platforms supporting the Barcode Detection API. If your users are using another platform/browser you will likely want to use another solution for barcode scanning. This post is going to focus on how to use open sourced zxing library inside Visual Builder application to scan barcodes. (Note that there are many other commercial offerings that support barcode scanning and can be integrated into VB too).

This blog will describe the high level steps of how to use the library and an example application running zxing based barcode scanning will be provided.

Using zxing library

zxing library is written in c++ and using WebAssembly it can be run inside any modern browser. You can read more about that at their zxing web assembly section. To use the library, download wasm-artifacts.zip from their latest release page, unzip it and import zxing_reader.js and zxing_reader.wasm files into your VB app, for example under resources/zxing folder. How to use these libraries is illustrated in a few examples which can be found here – inspect their source code.

To be able to call zxing library from a Visual Builder's page, you add into app-flow.json RequireJS import:

"requirejs": {
  "paths": {
    "zxing": "resources/js/zxing"
  }
}

and then in your page you can access the library via

define(['zxing/zxing_reader'], () => {
  var zxing;
  window.ZXing().then(function (value) {
    zxing = value;
  });

The rest of the code would be the same as in their samples.

Barcode Scanner Custom Action

In the Visual Builder sample application attached below, the zxing library was wrapped into a new Custom Action called "BarcodeScanner". See /resources/actions/mycompany/barcodescanner folder where the custom action is declared and coded. The BarcodeScanner custom action will be available in action chain composer palette:

BarcodeScanner action in palette

What the action does is that it opens a dialog, shows barcode scanner and closes the dialog when scanning was successful or cancelled by user. The result of the action is JSON response in form of:

{
  "format":"EAN-13",
  "text":"9414732111476"
}

For the action to work, pay attention to these sections in the sample app:

1. custom action RequireJS registration in app-flow.json

  "requirejs": {
    "paths": {
      "zxing": "resources/js/zxing",
      "MyCompany/BarcodeScanner":"resources/actions/mycompany/barcodescanner/action"
    }
  },

2. dialog placeholder for the scanning in the shell-page.html. Dialog and buttons IDs are referred to from the custom action code:

<oj-dialog style="display:none" dialog-title="Barcode Scanner" id="barcode-scanning-dialog">
  <div slot="body">
    <canvas id="barcode-scanning-canvas" style="max-height: 640px; max-width: 480px" ></canvas>
  </div>
  <div slot="footer">
    <oj-button id="barcode-scanning-dialog-cancel">Cancel</oj-button>
  </div>
</oj-dialog>

Application Source Code