Barcode/QR field

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.

Scanning

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!

Manual Entry

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

Permissions

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.

Settings panel

Listed below are configuration options available for the field.

Setting	Description
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