Checkbox

axCheckBox

Description

Presents a field as a Checkbox.

Context	Supported
Input screen fields	Yes
Output screen fields	Yes
Input subfile fields	Yes
Output subfile fields	Yes
New screen elements	Yes

Properties

Name	Description and Comments	JavaScript	Shipped default
enabled	Indicates whether this element is enabled. TS2 only.	Yes. Must return a Boolean.	True
fitText	Indicates whether to automatically resize the text to fit inside the extension. For JqueryUI theme only.	Yes	True
label	This is only available when JQueryUI of the Application->Styling->appStylesTheme property is selected. The text that will be displayed inside the checkbox button.	Yes	None
onBlur	Optional. JavaScript code to be executed when the element lost the focus.	Yes	None
onChange	Optional. JavaScript code to be executed when the element changes state from unchecked to checked and vice versa.	Yes	None
onChecked	Sets the field to the nominated value when the checkbox is checked.	Yes	FIELD.setValue("Y")
onFocus	Optional. JavaScript code to be executed when the element receives the focus.	Yes	None
onSetValue	Optional. The JavaScript code (condition) to be executed when the extension is loaded to reflect the value of the underlying field. Should return true or false. See examples below.	Yes	FIELD.getValue() == "Y"
onUnchecked	Sets the field to the nominated value when the checkbox is unchecked.	Yes	FIELD.setValue("N")
sizeToField	Indicates whether this button should be sized to fill its containing field or automatically sized to match its content.	Yes	True
style	Additional style properties that should be applied to the button.	Yes. Must return a valid style object.	None
useBasicCheckbox	Display a normal checkbox. Note: Properties like the style, label, sizeToField and fitText will not be applied when this is checked. For JqueryUI theme only.	Yes. Must return a Boolean.	False

Notes, Comments and Warnings

The axCheckBox extension is ideally suited to fields whose value has only two possibilities, e.g. "Y" or "N", "TRUE" or "FALSE", "Enabled" or "Disabled". The JavaScript of the supplied properties should be changed to use the required field values (see examples).

appStylesTheme Application Property

When the appStylesTheme property of the Application is set to JQueryUI, the display of this extension will change according to the theme that was set in the Application’s jqueryTheme property.

Basic theme display:

JQueryUI theme display:

As you can see above, the checkbox is displayed as a button. Clicking/Selecting it will change its display indicating that it is checked.

When JQueryUI theme is used, the label property can also be set. Any string set in this property will be displayed inside the button. The size of the button will automatically adjust to the size of the label. The longer the label, the wider the button becomes.

The checked and unchecked style of the button differs to indicate the state. Also, hovering over the button will change its style.

When the appStylesTheme property of the Application is set to Material Design, the display of this extension will change according to the theme that was set in the Application’s mdTheme property.

Examples

(1). If the value of the field can be either "YES" or "NO" the axCheckBox properties should be set as follows;

Property	JavaScript
onSetValue	FIELD.getValue() == "YES"
onChecked	FIELD.setValue("YES ")
onUnchecked	FIELD.setValue("NO")

should produce a display like this …

Checking the checkbox displayed would set the field to "YES", confirming the deletion of the Employee to the underlying 5250 application.

(2). If the value of the field can be either "*ENABLED" or "*DISABLED" the axCheckBox properties should be set as follows;

Property	JavaScript
onSetValue	FIELD.getValue() == "*ENABLED"
onChecked	FIELD.setValue("*ENABLED")
onUnchecked	FIELD.setValue("*DISABLED")

Checkbox

appStylesTheme Application Property

See Also