Skip to content

sc-switch-box

This document is a user guide for the sc-switch-box component version 6.3.6.1 (released Jan 15, 2021).

go-to-typical-definition

sc-switch-box-field-Example-1-Image-1


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. sc-switch-box-field-Status-On
  • To switch the switch box field "Off", move the switch box field's button to the left. sc-switch-box-field-Status-Off

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:

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

sc-switch-box-field-Example-1-Image-1

Resulting fields on the form after setting the sc-switch-box field status to "On":

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

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:

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

Resulting pop-up message on saving the form without setting the status of the mandatory sc-switch-box field to "On":

sc-switch-box-field-Example-2-Image-2