Skip to content

sc-note-box

sc-note-box-field-Example-1-Image-3

1 Purpose

sc-note-box places a note box field on a form, allowing the user to enter of lines of text. The default height of a note box field is 3 lines. The note box field automatically scrolls if more than 3 lines of text are entered. A drag handle on the bottom right corner allows the user to manually increase the height of the note box.

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

2 Definition

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

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the field in the document and database.
Example: "name": "testScNoteBox"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue Any value The value to initially load in the note box field.
Example: "defaultValue": "This is the default Note"
Defaults to no value is initially loaded.
disableSave true Entering a value in the note box field does not trigger the Save icon to flash.
Exiting the form without saving the entered value does not trigger a warning message to display.
Example: "disableSave": true
false Default value. Entering a value in the note box field does trigger the Save icon to flash.
Exiting the form without saving the entered value does trigger a warning message to display.
enabled false The note box field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the note box field.
Example: "enabled": false
true Default value. A value can be entered in the note box field.
fullWidth true The note box field displays full width on the form.
Example: "fullWidth": true
false Default value. The note box field does not display full width on the form.
label Any value Defines the name of the note box field on the form i.e. the field label.
Example: "label": "Test sc-note-box"
Defaults to the note box field displays without a field label on the form.
mandatory true The note box 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 note box field.
Example: "mandatory": true
false Default value. The note box field displays as optional (i.e. label in black text).
noteBoxRows Integer Specifies the number of rows to display in the note box field.
Example: "noteBoxRows": 10
3 Default value. The note box field displays 3 rows.
visible false The note box field is not visible on the form.
Example: "visible": false
true Default value. The note box field is visible on the form.

 

3 Typical sc-note-box Definition

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

{
    "componentName": "sc-note-box",
    "label": "Test sc-note-box",
    "name": "testScNoteBox",
    "fullWidth":true
}

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": "This is the default Note",
    "disableSave":true,
    "enabled":false,
    "visible":false,
    "noteBoxRows": 10

 

4 Examples

Example 1

A sc-note-box definition defined with the likely needed fields plus the "mandatory" and "noteBoxRows" fields.

        {
            "componentName": "sc-note-box",
            "name": "testScNoteBox",
            "label": "Test sc-note-box",
            "fullWidth": true,
            "mandatory": true,
            "noteBoxRows": 5
        }

Resulting field on the form:

sc-note-box-field-Example-1-Image-1

Resulting field on the form after entered a value in the note box field:

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

Resulting field on the form after saving the entered value:

sc-note-box-field-Example-1-Image-3

Resulting field in the document and database after saving the entered value:

Note: On save, each new line is automatically prefixed with \n.

"testScNoteBox": "First line of text entered into a note box.\nAnother line of text entered into a note box.\nYet another line of text entered into a note box.  This line is a very long line to demonstrate that a line exceeding the width of the text box field displayed on the form will automatically wrap.\nYet another line.  To enter more lines, clicking enter will scroll the note box OR use the note box handle to increase the note box height."