_

Mobile - QR Code Scanner

Overview

The ProcessMaker Mobile application has a control called QR Code, which is a trademark for a kind of matrix code or two dimensional code. Always create a variable for the QR Code control so the QR code saved by the user can be stored in the database.

QR Code Properties

First, create a new Dynaform, then on the left side of the Dynaform open the Mobile Controls tab to display the mobile controls. Drag and drop the QR Code control into the form.
Click on it to display the properties on the left side of the screen.

The first property is Type, which only shows the name of the field, in this case "scannerCode". The next property is Variable, and as mentioned in the overview, a variable must be created for this field.
Click on the ellipsis ... and a new window with all the created variables will open. Select the "scannercode" variable.

The properties ID and Name are filled in by default and don't need to be changed unless programming code is going to be used. The Label property will help the user change the name of the field displayed on the Dynaform. In this case we changed the Label property to "Code Scanner", but it can be changed to any label the user likes.

The Hint property is next, and next to it is a small blank box where a description of the field can be written. This description will be displayed to the end user when the "?" next to the field in the Dynaform is hovered over. The last property of this field is the Required property, which is a checkbox that can be clicked if the end user needs to fill out this field to submit the Dynaform and continue the process.

The application uses webkit tools exclusively for Android and iOS to display the form fields, thus forms are not rendered the same way on the mobile app as in the web edition (in the preview of the designer or when running cases). The screenshot below shows the QR Code control running on the Mobile app.

Now see what the QR Code control looks like when opening a case in the web edition after using the mobile application.

By checking this option, a red asterisk is added next to the label to indicate that the field is required. It means that the end user must select an option or fill in the control before the Dynaform can be submitted.