Check Box
A check box is a type of button used to enter or display binary (true-false) data. Basically, it is either checked or unchecked, but a third state can be defined.
Check boxes are controlled by methods or standard actions. The method associated with it executes when the check box is selected. Like all buttons, a check box variable is set to 0 when the form is first opened.
A check box displays text next to a small square. This text is set in the Title property of the check box. You can enter a title in the form of an XLIFF reference in this area (see Appendix B: XLIFF architecture).
Using check boxes
A check box can be associated to a variable or expression of type integer or boolean.
- integer: if the box is checked, the variable has the value 1. When not checked, it has the value 0. If check box is in third state (see below), it has the value 2.
- boolean: if the box is checked, the variable has the value
True. When not checked, it has the valueFalse.
Any or all check boxes in a form can be checked or unchecked. Multiple check boxes allow the user to select multiple options.
Three-States check box
Check box objects with Regular and Flat button style accept a third state. This third state is an intermediate status, which is generally used for display purposes. For example, it allows indicating that a property is present in a selection of objects, but not in each object of the selection.
To enable this third state, you must select the Three-States property.
This property is only available for regular and flat check boxes associated with numeric variables or expressions — check boxes for Boolean expressions cannot use the Three-States property (a Boolean expression cannot be in an intermediary state).
The variable associated with the check box returns the value 2 when the check box is in the third state.
In entry mode, the Three-States check boxes display each state sequentially, in the following order: unchecked / checked / intermediary / unchecked, etc. The intermediary state is generally not very useful in entry mode; in the code, simply force the value of the variable to 0 when it takes the value of 2 in order to pass directly from the checked state to the unchecked state.
Using a standard action
You can assign a standard action to a check box to handle attributes of text areas. For example, if you assign the fontBold standard action, at runtime the check box will manage the "bold" attribute of the selected text in the current area.
Only actions that can represent a true/false status ("checkable" actions) are supported by this object:
| Supported actions | Usage condition (if any) |
|---|---|
| avoidPageBreakInsideEnabled | 4D Write Pro areas only |
| fontItalic | |
| fontBold | |
| fontLinethrough | |
| fontSubscript | 4D Write Pro areas only |
| fontSuperscript | 4D Write Pro areas only |
| fontUnderline | |
| font/showDialog | Mac only |
| htmlWYSIWIGEnabled | 4D Write Pro areas only |
| section/differentFirstPage | 4D Write Pro areas only |
| section/differentLeftRightPages | 4D Write Pro areas only |
| spell/autoCorrectionEnabled | |
| spell/autoDashSubstitutionsEnabled | Mac only |
| spell/autoLanguageEnabled | Mac only |
| spell/autoQuoteSubstitutionsEnabled | Mac only |
| spell/autoSubstitutionsEnabled | |
| spell/enabled | |
| spell/grammarEnabled | Mac only |
| spell/showDialog | Mac only |
| spell/visibleSubstitutions | |
| visibleBackground | 4D Write Pro areas only |
| visibleFooters | 4D Write Pro areas only |
| visibleHeaders | 4D Write Pro areas only |
| visibleHiddenChars | 4D Write Pro areas only |
| visibleHorizontalRuler | 4D Write Pro areas only |
| visiblePageFrames | 4D Write Pro areas only |
| visibleReferences | |
| widowAndOrphanControlEnabled | 4D Write Pro areas only |
For detailed information on these actions, please refer to the Standard actions section.
Check box button styles
Check boxes use button styles to control a check box's general appearance as well as its available properties. It is possible to apply different predefined styles to check boxes. A great number of variations can be obtained by combining these properties / behaviors.
With the exception of the available properties, many check box objects are structurally identical. The difference is in the processing of their associated variables.
4D provides check boxes in the following predefined button styles:
Regular
The Regular check box button style is a standard system check box (i.e., a rectangle with a descriptive title):
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"regular",
"text": "Cancel",
"action": "Cancel",
"left": 60,
"top": 160,
"width": 100,
"height": 20
"dataSourceTypeHint":"boolean"
}
Flat
The Flat check box button style is a minimalist appearance. The Flat style's graphic nature is particularly useful for forms that will be printed.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"flat",
"text": "Cancel",
"action": "cancel",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Toolbar Button
The Toolbar Button check box button style is primarily intended for integration in a toolbar.
The Toolbar Button check box button style has a transparent background with a title. It is usually associated with a 4-state picture.
Example with states unchecked / checked / highlighted:
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"toolbar",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Bevel
The Bevel check box button style combines the appearance of the Regular button style (i.e., a rectangle with a descriptive title) with the Toolbar Button button style's behavior.
The Bevel button style has a light gray background with a title. It is usually associated with a 4-state picture.
Example with states unchecked / checked / highlighted:
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"bevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Rounded Bevel
The Rounded Bevel check box button style is nearly identical to the Bevel button style except, depending on the OS, the corners of the button may be rounded. As with the Bevel button style, the Rounded Bevel button style combines the appearance of the Regular button style with the Toolbar Button button style's behavior.
The Rounded Bevel button style has a light gray background with a title. It is usually associated with a 4-state picture.
Example on macOS:
On Windows, the Rounded Bevel button style is identical to the Bevel button style.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"roundedBevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
OS X Gradient
The OS X Gradient check box button style is nearly identical to the Bevel button style. As with the Bevel button style, the OS X Gradient button style combines the appearance of the Regular button style with the Toolbar Button button style's behavior.
The OS X Gradient button style has a light gray background with a title and may be displayed as a two-tone system button on macOS. It is usually associated with a 4-state picture.
On Windows, this check box button style is identical to the Bevel button style.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"gradientBevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
OS X Textured
The OS X Textured button style is similar to the Bevel button style but with a smaller size (maximum size is the size of a standard macOS system button). As with the Bevel button style, the OS X Textured button style combines the appearance of the Regular button style with the Toolbar Button button style's behavior.
By default, the OS X Textured button style appears as:
Windows - a standard system button with a light blue background with a title in the center.
macOS - a standard system button. Its height is predefined: it is not possible to enlarge or reduce it.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"texturedBevel",
"text": "Checkbox",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Office XP
The Office XP button style combines the appearance of the Regular button style with the Toolbar Button button style's behavior.
The colors (highlight and background) of a check box with the Office XP button style are based on the system colors. The appearance of the check box can be different when the cursor hovers over it, depending on the OS:
Windows - its background only appears when the mouse rolls over it. Example with states unchecked / checked / highlighted:
macOS - its background is always displayed. Example with states unchecked / checked:
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"office",
"text": "Checkbox",
"action": "fontBold",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Collapse/Expand
This check box button style can be used to add a standard collapse/expand icon. These icons are used natively in hierarchical lists.
Windows - the icon looks like a [+] or a [-]
macOS - it looks like a triangle pointing right or down.
The Collapse/Expand style is named "disclosure" in the button style JSON Grammar.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"disclosure",
"method": "m_collapse",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Disclosure
In macOS and Windows, a check box with the "Disclosure" button style appears as a standard disclosure button, usually used to show/hide additional information. When used as a radio button, the button symbol points downwards with value 0 and upwards with value 1.
Windows
macOS
The Disclosure style is named "roundedDisclosure" in the button style JSON Grammar.
JSON Example:
"myCheckBox": {
"type": "checkbox",
"style":"roundedDisclosure",
"method": "m_disclose",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}
Custom
The Custom button style accepts a personalized background picture and allows managing specific properties:
It is usually associated with a 4-state picture, that can be used in conjunction with a 4-state background picture.
JSON Example:
"myCheckbox": {
"type": "checkbox",
"style":"custom",
"text": "OK",
"icon": "/RESOURCES/smiley.jpg",
"iconFrame": 4,
"customBackgroundPicture": "/RESOURCES/paper.jpg",
"iconOffset": 5, //custom icon offset when clicked
"left": 60,
"top": 160,
"width": 100,
"height": 20,
"customBorderX": 20,
"customBorderY": 5
}
Supported Properties
All check boxes share the same set of basic properties:
Bold - Bottom - Button Style - Class - Enterable - Expression Type - Focusable - Font - Font Color - Font Size - Height - Help Tip - Horizontal Alignment(1) - Horizontal Sizing - Image hugs title(2) - Italic - Left - Number of States(2) - Object Name - Picture pathname(2) - Right - Save value - Shortcut - Standard action - Title - Title/Picture Position(2) - Top - Type - Underline - Variable or Expression - Vertical Sizing - Visibility - Width
(1) Not supported by the Regular and Flat styles.
(2) Not supported by the Regular, Flat, Disclosure and Collapse/Expand styles.
Additional specific properties are available, depending on the button style:
- Custom: Background pathname - Horizontal Margin - Icon Offset - Vertical Margin
- Flat, Regular: Three-States