Add a Barcode/QR field to allow users to scan codes directly into their forms!
Adding a Barcode/Scanner field
The field can be found under the Form section of the components list.
To add the scanner to your app, you to need add it as a child of a Form component.
The field has its own data type of Barcode/QR so be sure to select a valid field from the Field setting.
With your form open and the Barcode/QR component in place, simply click the Scan code button to launch the camera modal.
The modal will indicate that the camera is Searching for code....
Position a valid QR/Barcode in front of the camera and when scanned successfully, the green indicator and the code content will be displayed on screen.
On closing the scanning modal, the contents of the QR/Barcode will now be in the field!
The user can also click Enter manually if, for example, the code type is not supported or it cannot be scanned. Once clicked, the camera modal will close and a text input will display, allowing manual entry of the code.
To enable manual entry, ensure the Allow manual entry option has been enabled in the Barcode/QR component settings
The Barcode/QR scanner will require access to your devices camera in order to attempt a scan.
You may be prompted to grant camera access to Budibase or you may have to enable it manually in your browser and/or operating system.
In the event that the camera is unavailable, the following message will be displayed.
Listed below are configuration options available for the field.
|Name||The builder component name|
|Label||The text visible to the user next to the Barcode/QR component as a descriptor of the field|
|Field||Connected field from the parent Form element, or custom by typing in a field name.|
|Allow manual entry||When checked, the user will have the ability to toggle manual entry and enter code text via a text input|
|Button text||The text displayed on the Barcode/QR launch button. Defaults to 'Scan code'|
|Default value||When a default value is provided, every time the form is opened this will be pre-filled in the field.|
|Disabled||When checked, disables the field; The user cannot change the value.|
Code Scanning Support
The full list of supported barcodes is available here : https://github.com/mebjas/html5-qrcode#supported-code-formats
Updated 5 months ago