sc-switch-box
This document is a user guide for the sc-switch-box component version 6.3.6.1 (released Jan 15, 2021).
1 Purpose
sc-switch-box places a switch box field on a form, allowing the user to set its "On/Off" status i.e.:
- To switch the switch box field "On", move the switch box field's button to the right.
- To switch the switch box field "Off", move the switch box field's button to the left.
The sc-switch-box definition provides fields for setting the properties of the sc-switch-box field on the form and is fully described below.
2 Definition
sc-witch-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-switch-box | The component name. Example: "componentName": "sc-switch-box" |
2.2 Required Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| name | Any value written in camel case. | Defines the name of the sc-switch-box field in the document and database. Example: "name": "ScSwitchBoxTypicalDefinition" |
2.3 Optional Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| defaultValue | true | The sc-switch-box field displays with a status of "On". Example: "defaultValue": true |
| false | Default value. The sc-switch-box field displays with a status of "Off". | |
| disableSave | true | Changing the sc-switch-box field value (i.e. changing the "On/Off" status of the switch box) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-switch-box field value does not trigger a warning message to display. In the Angular version of the sc-switch-box component, clicking the Save icon will not save the sc-switch-box field value to the document. In the AngularJS version of the sc-switch-box component, clicking the Save icon will save the sc-switch-box field value to the document. Example: "disableSave": true |
| false | Default value. Changing the sc-switch-box field value (i.e. changing the "On/Off" status of the switch box) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-switch-box field value does trigger a warning message to display. In the Angular and AngularJS versions of the sc-switch-box component, clicking the Save icon will save the sc-switch-box field value to the document. |
|
| enabled | false | The sc-switch-box field on the form is greyed out. A Stop icon appears on mouseover of the sc-switch-box field. The sc-switch-box field's "On/Off" status cannot be changed. Example: "enabled": false |
| true | Default value. The sc-switch-box field on the form is not greyed out. A Stop icon does not appear on mouseover of the sc-switch-box field. The sc-switch-box field's "On/Off" status can be changed. |
|
| fullWidth | true | The sc-switch-box field displays full width on the form. Example: "fullWidth": true |
| false | Default value. The sc-switch-box field does not display full width on the form. |
|
| label | Any value | Defines the name of the sc-switch-box field on the form i.e. the field label. Example: "label": "sc-switch-box Typical Definition" |
| Defaults to the sc-switch-box field displays without a field label on the form. | ||
| mandatory | true | The sc-switch-box field displays as mandatory on the form (i.e. label in red text with an asterisk). Saving with the sc-switch-box field status set to "Off", a message will display prompting the user to set the sc-switch-box field status to "On". Example: "mandatory": true |
| false | Default value. The sc-switch-box field displays as optional on the form (i.e. label in black text). Saving with the sc-switch-box field status set to "Off", a message does not display prompting the user to set the sc-switch-box field status to "On". |
|
| visible | false | The sc-switch-box field is not visible on the form. Example: "visible": false |
| true | Default value. The sc-switch-box field is visible on the form. |
3 Typical Definition
Below is a typical sc-switch-box definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-switch-box",
"name": "scSwitchBoxTypicalDefinition",
"label": "sc-switch-box Typical Definition"
}
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.
"defaultValue": true,
"disableSave":true,
"enabled":false,
"fullWidth":true,
"mandatory": true,
"visible":false
4 Examples
Example 1
Sc-switch-box definition defined with its typically needed fields.
{
"componentName": "sc-switch-box",
"name": "scSwitchBoxTypicalDefinition",
"label": "sc-switch-box Typical Definition"
}
Resulting field on the form:
Resulting fields on the form after setting the sc-switch-box field status to "On":
Resulting field in document and database after saving the sc-switch-box with status set to "On":
"scSwitchBoxTypicalDefinition": true
Example 2
Sc-switch-box defined with its typically needed fields plus the optional field of "mandatory":
{
"componentName": "sc-switch-box",
"name": "scSwitchBoxTypicalDefinition",
"label": "sc-switch-box Typical Definition",
"mandatory": true
}
Resulting field on the form:
Resulting pop-up message on saving the form without setting the status of the mandatory sc-switch-box field to "On":
