sc-email
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:
- 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:
Resulting field on the form after entered data:
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: