Skip to content

sc-q-r-code-generator

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

go-to-typical-definition

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


1 Purpose

sc-q-r-code-generator places a sc-q-r-code-generator field on a form, allowing the user to generate a QR Code for a user entered value (e.g. a URL) and display the resulting QR code on the form.

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


2 Definition

sc-q-r-code-generator 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-generator The component name.
Example:
"componentName": "sc-q-r-code-generator"

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-generator field in the document and database.
Example:
"name": "scQrCodeGeneratorTypicalDefinition"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue Any value The value to initially load in the sc-q-r-code-generator field.
Example:
"defaultValue": "https://www.formbird.com"
Defaults to no value is initially loaded.
disableSave true Changing the sc-q-r-code-generator field value (i.e. entering or editing a value) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-q-r-code-generator field value does not trigger a warning message to display.
In the Angular version of the sc-q-r-code-generator component, clicking the Save icon will not save the sc-q-r-code-generator field value to the document.
In the AngularJS version of the sc-q-r-code-generator component, clicking the Save icon will save the sc-q-r-code-generator field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-q-r-code-generator field value (i.e. entering or editing a value) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-q-r-code-generator field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-q-r-code-generator component, clicking the Save icon will save the sc-q-r-code-generator field value to the document.
enabled false The sc-q-r-code-generator field on the form is greyed out.
A Stop icon appears on mouseover of the sc-q-r-code-generator field.
A value cannot be entered into ther sc-q-r-code-generator field.
Example:
"enabled": false
true Default value.
The sc-q-r-code-generator field on the form is not greyed out.
A Stop icon does not appear on mouseover of the sc-q-r-code-generator field.
A value can be entered into ther sc-q-r-code-generator field..
fullWidth true The sc-q-r-code-generator field displays full width on the form.
Example:
"fullWidth": true
false Default value.
The sc-q-r-code-generator field does not display full width on the form.
hideQrText true The sc-q-r-code-generator field displays the label but not the entry box, preventing the user from entering a value.
Example:
"hideQrText": true
false Default value.
The sc-q-r-code-generator field displays the label but not the entry box, allowing the user to enter a value.
label Any value Defines the name of the sc-q-r-code-generator field on the form i.e. the field label.
Example:
"label": "Typical Defn sc-q-r-code-generator"
Defaults to the sc-q-r-code-generator field on the form displays without a field label.
mandatory true The sc-q-r-code-generator field displays as mandatory (i.e. label in red text with an asterisk).
Saving without entering a value in the sc-q-r-code-generator field, a message prompts the user to enter a value.
Example:
"mandatory": true
false Default value.
The sc-q-r-code-generator field displays as optional (i.e. label in black text).
Saving without entering a value in the sc-q-r-code-generator field, a message does not prompt the user to enter a value.
visible false The sc-q-r-code-generator field is not visible on the form.
Example:
"visible": false
true Default value.
The sc-q-r-code-generator field is visible on the form.


3 Typical Definition

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

{
    "componentName": "sc-q-r-code-generator",
    "label": "Typical Defn sc-q-r-code-generator",
    "name": "typicalDefnScQrCodeGenerator"
}

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.

    "defaultValue":"https://www.formbird.com",
    "disableSave": true,
    "enabled":false,
    "fullWidth":true,
    "hideQrText": true,
    "mandatory": true,
    "visible":false


4 Examples

Example 1

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

{
    "componentName": "sc-q-r-code-generator",
    "label": "Typical Defn sc-q-r-code-generator",
    "name": "typicalDefnScQrCodeGenerator"
}

Resulting field on the form:

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


Resulting field on the form after entering a value in the sc-q-r-code-generator:

On entering a value for the sc-q-r-code-generator field:

  1. The sc-q-r-code-generator field displays the resulting QR Code below the entered value.
  2. The document "Save" button flashes.

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

Mouseover the resulting QR Code displays the information it represents (i.e. the entered value)

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


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

    "typicalDefnScQRCodeGenerator": "https://www.formbird.com"