Skip to content

sc-email

go-to-typical-definition

sc-email-field-Example-1-Image-2

1 Purpose

This document is a user guide for the sc-email component as of version 5.1.

sc-email places an email field on a form, allowing the user to enter an email address.

The sc-email definition provides fields for setting the properties of an email field and is fully described below.

2 Definition

sc-email 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-email The component name.

Example:
`"componentName": "sc-email"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the email field in the document and database.

Example:
"name": "testScEmail"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue Any value The value to initially load in the email field.

Example:
"defaultValue": "test.email@gmail.com"
Defaults to no value is initially loaded.
disableSave true Changing the sc-email field value (i.e. entering or editing the email field) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-email field value does not trigger a warning message to display.
In the Angular version of the sc-email component, clicking the Save icon will not save the sc-email field value to the document.
In the AngularJS version of the sc-email component, clicking the Save icon will save the sc-email field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-email field value (i.e. entering or editing the email field) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-email field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-email component, clicking the Save icon will save the sc-email field value to the document.
enabled false The email field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the email field.

Example:
"enabled": false
true Default value.
A value can be entered in the email field e.g.
"john.citizen@gmail.com".
fullWidth true The email field displays full width on the form.

Example:
"fullWidth": true
false Default value.
The email field does not display full width on the form.
label Any value Defines the name of the email field on the form i.e. the field label.

Example:
"label": "Test sc-email"
Defaults to the numeric field displays without a field label on the form.
mandatory true The email 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 email field.

Example:
"mandatory": true
false Default value.
The email field displays as optional (i.e. label in black text).
visible false The email field is not visible on the form.

Example:
"visible": false
true Default value.
The email field is visible on the form.

3 Typical Definition

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

{
    "componentName": "sc-email",
    "name": "testScEmail",
    "label": "Test sc-email"
}

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": "user@email.com",
    "disableSave":true,
    "enabled":false,
    "fullWidth":true,
    "visible":false

4 Examples

Example 1

sc-email defined with the typically needed fields.

{
      "componentName": "sc-email",
       "name": "testScEmail",
       "label": "Test sc-email"
}

Resulting field on the form:

sc-email-field-Example-1-Image-1

Resulting field on the form after entered data:

sc-email-field-Example-1-Image-2

Resulting field in the document and database

"testScEmail": "test@gmail.com"

Example 2

sc-email defined with the typically needed fields plus the optional fields "mandatory", and "defaultValue".

{
    "componentName": "sc-email",
    "name": "testScEmail",
    "label": "Test sc-email",
    "defaultValue": "john.citizen@gmail.com",
    "mandatory": true
},

Resulting field on the form:

sc-email-field-Example-2-Image-1