sc-check-box
This document is a user guide for the sc-check-box component version 5.1, released September 1, 2018.
1 Purpose
sc-check-box places a check box field on a form.
The sc-check-box definition provides fields for setting the properties of a check box field and is fully described below.
2 Definition
sc-check-box is defined by a set of name/value pair fields consisting of:
- Required system fields
- Required customizable fields
- Optional customizable fields
Note:
- 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-check-box | The component name. Example: "componentName": "sc-check-box" |
2.2 Required Customizable Fields
Field | Valid Values | Description |
---|---|---|
name | Any value written in camel case. | Defines the name of the check box field in the document and database. Example: "name": "testScCheckBox" |
2.3 Optional Customizable Fields
Field | Valid Values | Description |
---|---|---|
defaultValue | true | The check box field displays as ticked. Example: "defaultValue": true |
false | Default value. The check box field displays as unticked. | |
disableSave | true | Changing the sc-check-box field value (i.e. ticking or unticking the check box) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-check-box field value does not trigger a warning message to display. In the Angular version of the sc-check-box component, clicking the Save icon will not save the sc-check-box field value to the document. In the AngularJS version of the sc-check-box component, clicking the Save icon will save the sc-check-box field value to the document. Example: "disableSave": true |
false | Default value. Changing the sc-check-box field value (i.e. ticking or unticking the check box) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-check-box field value does \trigger a warning message to display. In both the Angular and AngularJS versions of the sc-check-box component, clicking the Save icon will save the sc-check-box field value to the document. |
|
enabled | false | The check box field is greyed out. A Stop icon appears on mouseover. The check box field cannot be ticked. Example: "enabled": false |
true | Default value. The check box field is not greyed out. A Stop icon does not appear on mouseover. The check box field can be ticked. |
|
fullWidth | true | The check box field displays full width on the form. Example: "fullWidth": true |
false | Default value. The check box field does not display full width on the form. | |
label | Any value | Defines the name of the check box field on the form i.e. the field label. Example: "label": "Test sc-check-box" |
Defaults to the check box field displays without a field label on the form. | ||
mandatory | true | The check box field displays as mandatory (i.e. label in red text with an asterisk). Saving without a value, a message prompts the user to enter a value for the check box field. Example: "mandatory": true |
false | Default value. The check box field displays as optional (i.e. label in black text). Saving without a value, a message does not prompt the user to enter a value for check box field. |
|
visible | false | The check box field is not visible on the form. Example: "visible": false |
true | Default value. The check box field is visible on the form. |
3 Typical Definition
Below is a typical sc-check-box definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-check-box",
"name": "testScCheckBox",
"label": "Test sc-check-box"
}
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.
"mandatory": true,
"defaultValue": true,
"disableSave":true,
"enabled":false,
"fullWidth":true,
"visible":false,
4 Examples
Example 1
sc-check-box defined with the typically needed fields plus the "mandatory" field.
{
"componentName": "sc-check-box",
"name": "testScCheckBox",
"label": "Test sc-check-box",
"mandatory": true
}
Resulting field on the form:
Resulting field on the form after ticking the check box field
Resulting field in the document and database after saving the ticked check box:
"testScCheckBox": true