Skip to content

sc-check-box

This document is a user guide for the sc-check-box component version 5.1, released September 1, 2018.

go-to-typical-definition

sc-check-box-field-Example-1-Image-2

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:

  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-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:

sc-check-box-field-Example-1-Image-1

Resulting field on the form after ticking the check box field

sc-check-box-field-Example-1-Image-2

Resulting field in the document and database after saving the ticked check box:

"testScCheckBox": true