Skip to content

sc-drop-down-open

This document is a user guide for the sc-drop-down-open component version 6.02 (released Jun 3, 2020).

go-to-typical-definition

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


1 Purpose

sc-drop-down-open places a drop down open field on a form, allowing the user to either select a value from a list or to enter a value in its text entry field.

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


2 Definition

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

2.2 Required Customizable Fields

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

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue One of the listed values. The sc-drop-down-open field displays on the form with the default value selected.
Example:
"defaultValue": "Mother"
Defaults to no value selected.
disableSave true Changing the sc-drop-down-open field value (i.e. entering, selecting, deselecting or selecting a different a drop down value) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-drop-down-open field value does not trigger a warning message to display.
In the Angular version of the sc-drop-down-open component, clicking the Save icon will not save the sc-drop-down-open field value to the document.
In the AngularJS version of the sc-drop-down-open component, clicking the Save icon will save the sc-drop-down-open field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-drop-down-open field value (i.e. entering, selecting, deselecting or selecting a different a drop down value) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-drop-down-open field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-drop-down-open component, clicking the Save icon will save the sc-drop-down-open field value to the document.
enabled false The sc-drop-down-open field on the form is greyed out.
A Stop icon appears on mouseover of the sc-drop-down-open field.
A sc-drop-down-open field value cannot be selected or entered.
Example:
"enabled": false
true Default value.
The sc-drop-down-open field on the form is not greyed out.
A Stop icon does not appear on mouseover of the sc-drop-down-open field.
A sc-drop-down-open field value can be selected or entered.
fullWidth true The sc-drop-down-open field displays full width on the form.
Example:
"fullWidth": true
false Default value.
The sc-drop-down-open field does not display full width on the form.
label Any value Defines the name of the sc-drop-down-open field on the form i.e. the field label.
Example:
"label": "sc-drop-down-open Typical Definition"
Defaults to the sc-drop-down-open field on the form displays without a field label.
mandatory true The sc-drop-down-open field displays as mandatory (i.e. label in red text with an asterisk).
Saving without selecting or entering a sc-drop-down-open field value, a message prompts the user to select or enter a value for the sc-drop-down-open field.
Example:
"mandatory": true
false Default value.
The sc-drop-down-open field displays as optional (i.e. label in black text).
Saving without selecting or entering a sc-drop-down-open field value, a message does not prompt the user to select or enter a value for sc-drop-down-open field.
visible false The sc-drop-down-open field is not visible on the form.
Example:
"visible": false
true Default value.
The sc-drop-down-open field is visible on the form.


3 Typical Definition

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

        {
            "componentName": "sc-drop-down-open",
            "label": "sc-drop-down-open Typical Definition",
            "name": "ScDropDownOpenTypicalDefinition",
            "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.

    "defaultValue": "Mother",
    "disableSave":true,
    "enabled":false,
    "fullWidth":true,
    "mandatory": true,
    "visible":false


4 Examples

Example 1

sc-drop-down-open definition defined with its typically needed fields.

        {
            "componentName": "sc-drop-down-open",
            "label": "sc-drop-down-open Typical Definition",
            "name": "ScDropDownOpenTypicalDefinition",
            "dropDownList": [
                "Father",
                "Mother",
                "Son",
                "Daughter",
                "Brother",
                "Sister"
            ]
        }

Resulting field on the form:

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

 

Scenario 1 (Selecting a sc-drop-down-open value)

Resulting fields on the form after clicking the sc-drop-down-open field:

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

Resulting fields on the form after selecting a sc-drop-down-open value (e.g. "Daughter"):

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

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

    "ScDropDownOpenTypicalDefinition": "Daughter"


Scenario 2 (Entering a sc-drop-down-open value)

Resulting fields on the form after entering a sc-drop-down-open value (e.g "Uncle"):

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

Resulting fields on the form after saving the entered a sc-drop-down-open value:

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

Resulting field in document and database after saving the enteredsc-drop-down-open value:

    "ScDropDownOpenTypicalDefinition": "Uncle"

Resulting fields on the form after clicking the sc-drop-down-open field with the saved entered value:

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


Example 2

sc-drop-down-open defined with its typically needed fields plus 2 optional fields, "defaultValue" and "fullWidth" fields:

        {
            "componentName": "sc-drop-down-open",
            "label": "sc-drop-down-open Typical Definition",
            "name": "ScDropDownOpenTypicalDefinition",
            "dropDownList": [
                "Father",
                "Mother",
                "Son",
                "Daughter",
                "Brother",
                "Sister"
            ],
            "defaultValue": "Mother",
            "fullWidth": true
        }

Resulting field on the form:

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