QR Code control

The QR Code (abbreviated from Quick Response Code) control creates a graphical image in the form of a two-dimensional bar code which, when read by a QR scanner, directs you to a particular web site.

Typically, QR scanners are available for download on camera-enabled smart phones for free. The QR code enables you to access a particular web site easily. After you line up the scanner to the QR code, you are automatically taken to a specific web site that was configured on the QR Code control.

Data binding

Set or modify the data binding for the control in the General properties tab. The QR Code control is bound to a String variable that has a default value set to http://www.ibm.com.

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab. Set the formula configuration properties in the Events tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the QR Code control are shown in the following table:

Table 1. Appearance configuration properties for the QR Code control
Appearance configuration property	Description	Data type
Label placement	Specifies the label placement for the control Top Left Note: Labels on the left change the specified width of the control.	`String`
Width	Specifies the width of the control in pixels, percent, or em units. For example: `50px` or `20%` or `0.4em`. If no unit type is specified, `px` is assumed.	`String`
Height	Specifies the height of the control in `px` (pixels) or `em` units. If no unit type is specified, `px` is assumed.	`String`
Background image URL	Specifies the background image for the QR control.	`String`

The behavior configuration properties for the QR Code control are listed in the following table:

Table 2. Behavior configuration properties for the QR Code control
Behavior configuration property	Description	Data type
Error correction level	Specifies the error correction levels that are used for QR codes. Each error code adds a different amount of backup data depending on how much damage the QR code is expected to suffer in its intended environment, hence how much error correction might be required. Level L - up to 7% damage Level M - up to 15% damage Level Q - up to 25% damage Level H - up to 30% damage	`String`

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.

The formula configuration properties for the QR Code control are shown in the following table:

Table 3. Formula configuration properties for the QR Code control
Formula configuration property	Description	Data type
QR code formula	Specifies the formula or expression to use for calculating the QR code value.	`String`

The QR Code control has the following types of event handlers:

On load: Activated when the QR code is loaded. For example:
```
me.setQRCode("www.ibm.com")
```
On change: Activated when the QR code value is changed. For example:
```
${Text1}.setText(oldQRCode); ${Text2}.setText(newQRCode);
```

Methods

For detailed information on the available methods for the QR Code control, see the JavaScript documentation.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.