Skip to content

sc-drop-down

sc-drop-down-field-Example-1-Image-2

 

1 Purpose

sc-drop-down places a drop down field on a form, allowing the user to select one value from a list.

The sc-drop-down definition provides fields for setting the properties of a drop down field and is fully described below.

 

2 Definition

sc-drop-down 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-drop-down The component name.
Example: "componentName": "sc-drop-down"

2.2 Required Customizable Fields

Field Valid Values Description
dropDownList Any value(s) An array of one or more values.
Example:
"dropDownList": [
      "Father",
      "Mother",
      "Son",
      "Daughter"
      "Brother"
      "Sister"
]
name Any value written in camel case. Defines the name of the drop-down field in the document and database.
Example: "name": "testScDropDown"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue One of the listed values. The drop down field displays with the default value selected.
Example: "defaultValue": "Mother"
Defaults to no value selected.
disableSave true Selecting a drop down field value does not trigger the Save icon to flash.
Exiting the form without saving the selected value does not trigger a warning message to display.
Example: "disableSave": true
false Default value. Selecting a drop down field value does trigger the Save icon to flash.
Exiting the form without saving the selected value does trigger a warning message to display.
enabled false The drop down field is greyed out.
A Stop icon appears on mouseover.
A drop down field value cannot be selected.
Example: "enabled": false
true Default value. The drop down field is not greyed out.
A Stop icon does not appear on mouseover.
A drop down field value can be selected.
fullWidth true The drop down field displays full width on the form.
Example: "fullWidth": true
false Default value. The drop down field does not display full width on the form.
label Any value Defines the name of the drop down field on the form i.e. the field label.
Example: "label": "Test sc-drop-down"
Defaults to the drop down field displays without a field label on the form.
mandatory true The drop down field displays as mandatory (i.e. label in red text with an asterisk).
Saving without selecting a drop down field value, a message prompts the user to select a value for the drop down field.
Example: mandatory": true
false Default value. The drop down field displays as optional (i.e. label in black text).
Saving without selecting a drop down field value, a message does not prompt the user to select a value for drop down field.
visible false The drop down field is not visible on the form.
Example: "visible": false
true Default value. The drop down field is visible on the form.

 

3 Typical sc-drop-down Definition

Below is a typical sc-drop-down definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-drop-down",
    "name": "testScDropDown",
    "label": "Test sc-drop-down",
    "dropDownList": [
        "Father",
        "Mother",
        "Son",
        "Daughter",
        "Brother",
        "Sister"
    ]
}

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": "Mother",
    "disableSave":true,
    "enabled":false,
    "fullWidth":true,
    "visible":false

 

4 Examples

Example 1

A sc-drop-down definition defined with the typically needed fields plus the "mandatory" field.

{
    "componentName": "sc-drop-down",
    "name": "testScDropDown",
    "label": "Test sc-drop-down",
    "dropDownList": [
        "Father",
        "Mother",
        "Son",
        "Daughter",
        "Brother",
        "Sister"
    ],
   "mandatory": true
}

Resulting field on the form:

sc-drop-down-field-Example-1-Image-1

Resulting fields on the form after clicking the drop down field:

sc-drop-down-field-Example-1-Image-2

Resulting fields on the form after selecting a drop down value:

sc-drop-down-field-Example-1-Image-3

Resulting field in document and database after saving the selected drop down value:

"testScDropDown": "Daughter"