Barcode scanner extension

[tgr]

I wanted to make it easy to scan bar codes and QR codes into fields in Espo, without using external scanners. Laptops, phones, tablets all have cameras that can read codes, and there is a HTML5 BarcodeDetector API, albeit not very widely supported. My extension polyfills the detector API using the ZXing browser layer if natively not supported.

Add the field to an entity, and in edit mode you'll see a button with a QR code icon on it. Click that, and a live camera view is displayed in a modal popup. Show a code to the camera view and the field is populated with the value from the code.



This is still a work in progress, but basic functionality is there. Happy to receive feedback!

[emillod]

Great idea

[maxniebieski]

Great idea. It could be expanded to scan the barcode to find the assigned record.

[tgr]

Yes, I have to look into how to add a scan button to the search field. Is there a view for that too, do you know? I'm also thinking to extend the default barcode field to allow scanning into that in edit/create mode. The field would display the barcode in chosen format in view mode.

[maxniebieski]

I think it would be better to add your own search modal only for barcodes.

[tgr]

Search modal, okay. Where would that be triggered from, any suggestions? On the list view, I know of primary filters (the drop-down left of the search field) and extended filtering (from the three dots menu right of the search, defined in layouts/EntityName/filters.json). I don't now immediately see, how either of those could be used from my extension, as both are specific to the entity using a barcode scanner field. I'm still quite new to Espo CRM, there's probably something I'm missing.

Primary filters, defined in clientDefs and selectDefs	Extended filtering, defined in entity layout's filters.json

[maxniebieski]

Maybe create a "scan and search" button that brings up the camera and allows me to enter the search results into the search engine?

The scanner doesn't read barcodes, e.g., EAN?

[tgr]

Okay, I will try something like that.
The scanner uses zxing-js/browser and should read all codes supported by that: QR, EAN, UPC, ITF, Code 39, Code 93, Code 128 ... I have tested QR, ITF and Code 128.