Skip to content

sc-q-r-code-reader

This document is a user guide for the sc-q-r-code-reader component version 6.3.6.1 (released Jan 15, 2021).

go-to-typical-definition

sc-q-r-code-reader-field-Example-1-Image-1


1 Purpose

sc-q-r-code-reader places a sc-q-r-code-reader field on a form, allowing the user to use the camera on their device to read the information represented by a QR code and display the result as the value of the sc-q-r-code-reader field on the form.

The sc-q-r-code-reader definition provides fields for setting the properties of the sc-q-r-code-reader field on the form and is fully described below.


2 Definition

sc-q-r-code-reader is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-q-r-code-reader The component name.
Example:
"componentName": "sc-q-r-code-reader"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the sc-q-r-code-reader field in the document and database.
Example:
"name": "scQRCodeReaderTypicalDefinition"

2.3 Optional Customizable Fields

Field Valid Values Description
enabled false The sc-q-r-code-reader field on the form is greyed out.
A Stop icon appears on mouseover of the sc-q-r-code-reader field.
A sc-q-r-code-reader field value cannot be captured.
Example:
"enabled": false
true Default value.
The sc-q-r-code-reader field on the form is not greyed out.
A Stop icon does not appear on mouseover of the sc-q-r-code-reader field.
A sc-q-r-code-reader field value can be captured.
fullWidth true The sc-q-r-code-reader field displays full width on the form.
Example:
"fullWidth": true
false Default value.
The sc-q-r-code-reader field does not display full width on the form.
label Any value Defines the name of the sc-q-r-code-reader field on the form i.e. the field label.
Example:
"label": "sc-q-r-code-reader Typical Definition"
Defaults to the sc-q-r-code-reader field on the form displays without a field label.
mandatory true The sc-q-r-code-reader field displays as mandatory (i.e. label in red text with an asterisk).
Saving without capturing a value for the sc-q-r-code-reader field, a message prompts the user to capture a value.
Example:
"mandatory": true
false Default value.
The sc-q-r-code-reader field displays as optional (i.e. label in black text).
Saving without capturing a value for the sc-q-r-code-reader field, a message does not prompt the user to capture a value.
visible false The sc-q-r-code-reader field is not visible on the form.
Example:
"visible": false
true Default value.
The sc-q-r-code-reader field is visible on the form.


3 Typical Definition

Below is a typical sc-q-r-code-reader definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-q-r-code-reader",
    "label": "sc-q-r-code-reader Typical Definition",
    "name": "scQRCodeReaderTypicalDefinition"
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "enabled":false,
    "fullWidth":true,
    "mandatory": true,
    "visible":false


4 Examples

Example 1

sc-q-r-code-reader definition defined with its typically needed fields.

{
    "componentName": "sc-q-r-code-reader",
    "label": "sc-q-r-code-reader Typical Definition",
    "name": "scQRCodeReaderTypicalDefinition"
}

Resulting field on the form:

sc-q-r-code-reader-field-Example-1-Image-1

 

Resulting field on the form after clicking the sc-q-r-code-reader "Scan Code" button:

On clicking the sc-q-r-code-reader "Scan Code" button:

  1. The device camera automatically turns on.

  2. The sc-q-r-code-reader displays a view finder window with a "Camera" button sc-q-r-code-reader-field-camera-button-Example-1-Image-5

    The user would then focus the camera on the QR Code so that it appears in the view finder window as shown below.

sc-q-r-code-reader-field-Example-1-Image-2

Resulting field on the form on clicking the sc-q-r-code-reader "Camera" button:

Clicking the sc-q-r-code-reader "Camera" button will:

  1. Read the information represented by the QR code and display the result as the value of the sc-q-r-code-reader field on the form.
  2. Display a "Open URL" button sc-q-r-code-reader-field-cancel-button-Example-1-Image-4 allowing the user to open the URL represented by the QR code.
  3. Trigger the document "Save" button to flash. Clicking "Save" button will save the information represented by the QR Code as the value of the sc-q-r-code-reader field on the form.

sc-q-r-code-reader-field-Example-1-Image-3

Resulting field in document and database after saving the sc-q-r-code-reader value:

    "scQRCodeReaderTypicalDefinition": "Https://fb.formbird.com"