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!

👍

Code scanning support

The full list of supported barcodes is available here : https://github.com/mebjas/html5-qrcode#supported-code-formats

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.

SettingDescription
NameThe builder component name
LabelThe text visible to the user next to the Barcode/QR component as a descriptor of the field
FieldConnected field from the parent Form element, or custom by typing in a field name.
Manual entryWhen checked, the user will have the ability to toggle manual entry and enter code text via a text input
Button textThe text displayed on the Barcode/QR launch button. Defaults to 'Scan code'
Default valueWhen a default value is provided, every time the form is opened this will be pre-filled in the field.
DisabledWhen checked, disables the field; The user cannot change the value.
Play sound on scanPlays a single note on scan. The Sound pitch can also be chosen.
Preferred cameraDetermines if the front or back camera of the app device will be used for scanning.
Auto confirmUpon a successful scan, the scan modal will automatically close.

Validation

When scanning a barcode, the underlying data type can be a varied, such as text, a number, a URL, etc. Sometimes you will want to add validation to ensure only barcodes of a certain type can be scanned successfully.

For example, if you want to ensure only a web URL can be scanned and saved, you can add a regex rule:

This can also be used safely in conjunction with the Auto confirm setting. If the barcode passes the validation on scan, then the modal will close. On the other hand, if the barcode was not a valid URL as expected in this case, then the modal will wait until the user scans an appropriate barcode, or cancels.

Red light indicates that the custom validation rule has not passed

Red light indicates that the custom validation rule has not passed