Reading QR Codes

Create a Table and add a Text field to it. This will receive the text read from the QR Code.

Create a Data Entry Form, and configure it to use that table.

On the Text Surfaces, set the Record Edit to Custom

Edit the "Record edit (custom)" surface.

On this surface, embed the Text field.

In the embed dialog for this configure it:

Input format

Set this to "QR Code"

The settings on the embed dialog will adjust to provide further relevant options.

Auto-start camera on page load

Check this checkbox if you want the camera to be activated as soon as the Data Entry Form is opened. This is useful to provide a smooth user experience with the least interaction required.

If left unchecked (default), the user must click on a camera icon

Placeholder text

Any text entered here will be displayed in the textbox that is shown below the camera view on the Data Entry Form surface until the QR code is scanned

Default: none

Style

Camera Selector

If there are multiple cameras available (on cellphones there are usually a choice of at least front and rear facing), these will be offered in a dropdown. This dropdown can be styled here.

Camera View

This styles the preview video feed of what the chosen camera is seeing. Typically the styling here will be to define the size of the preview

Value Field

This styles the textbox that appears below the video feed, which will show the text decoded from the QR code.

Note: If the QR code is illegible, but the user can read the value (maybe from next printed beside the QR code) they can type it this textbox.

Note: if you do not wish to allow the user to enter text manually in this way, you can style the textbox to not display with a custom style of display none

 

On Scan Tab

The On Scan tab provides further settings, to determine what should happen the moment a QR code is successfully scanned

Sounds & Vibration

On Scan,

Play Sound

Specify an mp3 file containing a sound to be played.

The Play icon allow this to be previewed

Default is a short beep

Vibrate

Enter a comma separated series of durations for alternate vibrations and pauses, in ms

Example:

200, 50, 200

would vibrate for 200 ms, followed by a 50 ms pause, followed by another 200 ms vibration

The Play icon allows this to be previewed, if the device supports vibration (Note however desktop browsers generally do not support this)

Default is none

Auto-submit form

If checked, this will submit the form as soon as the QR code is scanned, without further interaction from the user. (Any specified sounds and vibrations will play first)

If checked, options are available to validate the form, and to store an identifier value in a field (in the same way that Submit buttons can be configured)

 

Using the Data Entry Form

Once configured, editing/adding a record in the Data Entry Form will show the Data Entry Form with the text field in QR code mode as configured:

If there are multiple cameras on the device, a dropdown will be shown allowing the camera to use to be selected. This choice will be remembered using a cookie for 30 days, so subsequent uses of the Data Entry Form will not need the camera to be chosen again.

If the auto start option was not checked in the configuration, the user will be shown an icon of a camera, which they should click on to proceed. 

The user may be shown a popup by the device asking them to provide permission to access the camera. Typically this will offer options of Allow and Block. The user should select Allow to proceed. This choice will normally be remembered by the device, avoiding asking them again. If they chose Block inadvertently, they can undo this using their browser settings menu.

The user will then be shown a video feed from the camera. If this proves to be the wrong camera, they can change their selection in the dropdown above it.

When the camera is shown a QR code, and successfully decodes it, the decoded test is shown in the textbox below the camera, and any configured On Scan activity is executed (ie sounds, vibration, auto submission of the form)

If the QR code cannot be read, the user is able to type text directly into the textbox below the camera. In this case, On Scan actions will not be executed (as it didn't scan), so an alternative Submit button should be provided for such cases.

 

Note: QR code decoding is executed in the client device: the video feed is not transmitted to the server.