Barcode scanner

The code scanner component is an input field field element with attached 1D/2D-code reader. With this element, bar codes, 2D codes (e.g. QR codes) are scanned and interpreted using the device’s camera. The element generates an HTML input field with a side button to activate the scanner (camera). Once the code is read, it’s value will be placed in the input field.

UPC-A and QR Code example

Use input-scanner element type to place the code scanner on your form.

Note: The mobile app that uses scanner element must be published in SSL mode. Due to security features of the browser, the camera is accessilbe only when running via HTTPS.

The scanner has the following properties:

  • “id” - the id of the element
  • “length” - the lengthof the field. Should long enough to receive the scanned codes.
  • “text” - the label of the field
  • “codeTypes” - the list of code types the scanner will be configured to detect
Code types

The scanner can operate using one of the libraries: zxing-js or QuaggaJS. Therefore there are two groups of codes to choose from. You can not mix the codes from different groups as only one library may be used per element.

The first one (zxing-js) can be configured specifying property “codeTypes” with one of the values:

  • “1D” - enables scanning of 1D codes: EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14
  • “2D” - enables scanning of 2D codes: QR Code, Data Matrix, PDF 417
  • “1D,2D” - all of the above (default)

Example: “codeTypes”: “2D” - will scan only 2-dimensional codes.

The second scanner (QuaggaJS) is activated when specifying “codeType” with a comma separated list of the following code types:

  • EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93, CODABAR.

Example : “codeTypes”: “upc, upc-e, Codabar, i2of5, 2of5”

An example element configured to read linear (EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14) and 2D codes:

{ "id": "item", "type": "input-scanner", "codeTypes":"1D,2D", "length": 128, "text": "Code 1D/2D" }

An example to read UPC, UPC-E, CODABAR, I2of5, 2of5 linear codes:

{ "id": "item", "type": "input-scanner", "codeTypes":"upc,upc-e,Codabar,i2of5,2of5", "length": 128, "text": "Bar code" }

… and these elements on a form:

Code scanner fields