Skip to content

sc-note-comment

go-to-typical-definition

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

1 Purpose

This document is a user guide for the sc-note-comment component as of version 5.14.

sc-note-comment places a note comment field on a form, allowing the user to enter a note and users to enter comments against that note.

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

2 Definition

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

Example:
"componentName": "sc-note-comment"

2.2 Required Customizable Fields

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

Example:
"name": "testScNoteComment"

2.3 Optional Customizable Fields

Field Valid Values Description
disableCommentFunction true Do not provide the ability to add a comment.

Example:
"disableCommentFunction": "true"
false Default value. Provide the ability to add a comment.
disableSave true Entering a value in the note comment 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 comment field does trigger the Save icon to flash.
Exiting the form without saving the entered value does trigger a warning message to display.
disableVoteFunction true Does not provide the ability to 'like' or 'dislike' the note.

Example:
"disableVoteFunction ": true
false Default value. Provides the ability to 'like' or 'dislike' the note .
Exiting the form without saving the entered value does trigger a warning message to display.
enabled false The note comment field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the note comment field.

Example:
"enabled": false
true Default value. A value can be entered in the note comment field.
fullWidth true The note comment field displays full width on the form.
Example:
"fullWidth": true
false Default value. The note comment field does not display full width on the form.
label Any value Defines the name of the note comment field on the form i.e. the field label.

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

Example:
"mandatory": true
false Default value. The note comment field displays as optional (i.e. label in black text).
useRichText true Display a WYSIWYG HTML Editor to enable rich text editing.

Example:
"useRichText": true
false Do not display a rich text editor.
visible false The note comment field is not visible on the form.

Example:
"visible": false*
true Default value. The note comment field is visible on the form.

 

3 Typical Definition

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

{
    "componentName": "sc-note-comment",
    "name": "testScNoteComment",
    "disableVoteFunction": true,
    "fullWidth": true,
    "label": "Test sc-note-comment"
}

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

4 Examples

Example 1

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

        {
            "componentName": "sc-note-comment",
            "name": "testScNoteComment",
            "disableVoteFunction": true,
            "fullWidth": true,
            "label": "Test sc-note-comment"
        }

Resulting field on the form:

sc-note-comment-field-Example-1-Image-1

Resulting field on the form after entering data:

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

Resulting field on the form after saving the entered value:

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

The user account that created the note and the date and time the note was created are automatically included with the saved note.

Resulting field in the document and database:

Horizontally scroll the image below to view the entire saved value.

    "testScNoteComment": [
        {
            "dataId": "4fc4e010-2e73-11e9-99cc-c9883a4cdd8d",
            "detail": "First line of text entered into the note comment field.\nAnother line of text entered into the note comment field.\nYet another line of text entered into the note comment field. However this line is intentionally a very long line of text in order to demonstrate that a line exceeding the width of the note comment field displayed on the form will automatically wrap.\nYet another line of text. To enter more lines, clicking enter will scroll the note comment field.",
            "createdBy": {
                "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                "name": "User Account - barry.eadie@fieldtec.com"
            },
            "createdDate": "2019-02-12T03:07:20.879Z"
        }
    ]

Resulting field on the form after adding and saving a comment:

sc-note-comment-field-Example-1-Image-4

Resulting field in the document and database:

   "testScNoteComment": [
        {
            "dataId": "4fc4e010-2e73-11e9-99cc-c9883a4cdd8d",
            "detail": "First line of text entered into the note comment field.\nAnother line of text entered into the note comment field.\nYet another line of text entered into the note comment field. However this line is intentionally a very long line of text in order to demonstrate that a line exceeding the width of the note comment field displayed on the form will automatically wrap.\nYet another line of text. To enter more lines, clicking enter will scroll the note comment field.",
            "createdBy": {
                "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                "name": "User Account - barry.eadie@fieldtec.com"
            },
            "createdDate": "2019-02-12T03:07:20.879Z",
            "comments": [
                {
                    "dataId": "f4810e11-2e84-11e9-b19b-77026d9357b4",
                    "detail": "This is the first sentence of a comment.\nThis is the second sentence of a comment.\nThis is the third sentence of a comment.\nThis is the fourth sentence of a comment.\nThis is the final sentence of a comment.",
                    "createdBy": {
                        "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                        "name": "User Account - barry.eadie@fieldtec.com"
                    },
                    "createdDate": "2019-02-12T05:13:39.397Z"
                }
            ]
        }
    ]

Example 2

Below is the above sc-note-comment definition but defined with "useRichText": true.

        {
            "componentName": "sc-note-comment",
            "name": "testScNoteComment",
            "disableVoteFunction": true,
            "fullWidth": true,
            "label": "Test sc-note-comment"
            "useRichText": true
        }

Resulting field on the form:

sc-note-comment-field-Example-1-Image-1

Clicking the add note icon will display the Rich Text Editor toolbar:

sc-note-comment-field-Example-2-Image-2

Resulting field on the form after entering formatted data:

The formatted data includes examples of bold text, italic text, different font types and sizes, inserted table and an inserted image.

sc-note-comment-field-Example-2-Image-3

Resulting field on the form after saving the entered data:

sc-note-comment-field-Example-2-Image-4

Resulting field on the form after adding and saving a comment:

Horizontally scroll the image below to view the entire saved value.

"testScNoteComment": [
    {
        "dataId": "081fa150-2e9b-11e9-a88c-4b5724a7e393",
        "detail": "<p>The <strong>first</strong> line of <em>formatted</em> <u>text</u></p><ul><li style=\"margin-left: 20px;\"><span style=\"font-family: Times New Roman,Times,serif;\">The <strong><span style=\"font-size: 24px;\">second</span></strong> line of <span style=\"color: rgb(226, 80, 65);\">formatted</span> text</span></li></ul><table style=\"width: 33%;\"><thead><tr><th style=\"width: 10.2852%;\">Title</th><th style=\"width: 21.5544%;\">First Name</th><th>Surname</th><th>City</th></tr></thead><tbody><tr><td style=\"width: 10.2852%;\">Mr</td><td style=\"width: 21.5544%;\">William</td><td style=\"width: 27.4506%;\">Simpson</td><td style=\"width: 39.0391%;\">Ballarat, Victoria</td></tr><tr><td style=\"width: 10.2852%;\">Mrs</td><td style=\"width: 21.5544%;\">Mary</td><td style=\"width: 27.4506%;\">Watson</td><td style=\"width: 39.0391%;\">Toowoomba, Queensland</td></tr></tbody></table><p><img class=\"fr-dib fr-draggable fr-fil\" src=\"api/getFile/4a3003a0-2e9b-11e9-a88c-4b5724a7e393/Formbird-Makes-It-Possible-Icon.png\" style=\"width: 300px;\"></p><p><br></p>",
        "createdBy": {
            "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
            "name": "User Account - barry.eadie@fieldtec.com"
        },
        "createdDate": "2019-02-12T10:07:35.607Z"
    }
]