Skip to content

sc-note-comment

NOTE: This document is currently being updated

This document is a user guide for the sc-note-comment component version 6.3.6.1 (released Jan 15, 2021).

go-to-typical-definition

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

1 Purpose

sc-note-comment places a note comment field on a form, allowing the users to:

  • Add notes
  • Edit a note.
  • Indicate a 'like' or 'dislike' for a note.
  • Add a comment against a 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 sc-note-comment field in the document and database.

Example:
"name": "testScNoteComment"

2.3 Optional Customizable Fields

Field Valid Values Description
allowNoteEditingKeys The value of this field determines which users can edit an existing note.
Array of keys ids An array of one or more key ids.
A note can only be edited by the user who created the note or by a user whose user account has at least one of the listed keyIds.
Otherwise the note will be disabled and the stop icon will display on mouseover of the field.

Example:
"allowNoteEditingKeys": [
    "de00fcb0-84af-11e8-82c8-778f0f89c2be"
]
[]
i.e. Empty Array		 A note can only be edited by the user who created the note.

Example:
"allowNoteEditingKeys": []
Defaults to all users can edit a note.
disableCommentFunction true Disable the ability to add comments to a note.

Example:
"disableCommentFunction": "true"
false Default value.
Enable the ability to add comments to a note.
disableSave true Changing the sc-note-comment field value (i.e. Addingor editing a note or a comment to a note or adding a 'like' or ''dislike' to a note) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-note-comment field value does not trigger a warning message to display.
In the Angular version of the sc-note-comment component, clicking the Save icon will not save the sc-note-comment field value to the document.
In the AngularJS version of the sc-note-comment component, clicking the Save icon will save the sc-note-comment field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-note-comment field value (i.e. Addingor editing a note or a comment to a note or adding a 'like' or ''dislike' to a note) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-note-comment field value does not trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-note-comment component, clicking the Save icon will not save the sc-note-comment field value to the document.
disableVoteFunction true Disable the ability to 'like' or 'dislike' the note.

Example:
"disableVoteFunction ": true
false Default value.
Enable 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 sc-note-comment field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the sc-note-comment field.

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

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

Example:
"mandatory": true
false Default value.
The sc-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 Default value.
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 sc-note-commen 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",
    "label": "Typical Defn sc-note-comment",
    "name": "typicalDefnScNoteComment",
    "disableVoteFunction": true,
    "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.

    "allowNoteEditingKeys": ["de00fcb0-84af-11e8-82c8-778f0f89c2be"],
    "allowNoteEditingKeys": [],
    "disableCommentFunction": true,
    "disableSave":true,
    "enabled":false,
    "mandatory": true,
    "useRichText": true,
    "visible":false,


4 Examples

Example 1 - Add a Note

sc-note-comment definition defined with its typically needed fields:

{
    "componentName": "sc-note-comment",
    "label": "Typical Defn sc-note-comment",
    "name": "typicalDefnScNoteComment",
    "disableVoteFunction": true,
    "fullWidth": true
}

Resulting field on the form:

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


To add a new note:

  1. Click the "add note" button: Icon-sc-note-comment-Add-Note

    The note box can be resized by clicking and dragging its "resize" button: Icon-sc-note-comment-Resize

    Resulting field on the form on clicking the "add note" button:

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

  2. Enter a note into the sc-note-comment field.

    Resulting field on the form on entering a note:

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

  3. Click Save to save the note together with the user account that created the note and the date and time the note was created.

    Resulting field on the form on saving the note:

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

Resulting field in the document and database:

    "typicalDefnScNoteComment": [
        {
            "dataId": "e0c38420-86e3-11eb-b8eb-83433c2ce83a",
            "detail": "This is the first sentence entered into the sc-note-comment field. This second sentence has exceeded the width of the field on the form hence it has automatically wrapped. Clicking enter will move the cursor to a new line.\n",
            "createdBy": {
                "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                "name": "User Account - barry.eadie@fieldtec.com"
            },
            "createdDate": "2021-03-17T05:44:45.154Z"
        }
    ]


Example 2 - Edit a Note

To edit the note that was saved in Example 1:

  1. Mouseover the note to trigger the display of the "edit note" button: Icon-sc-note-comment-Edit-Note The resulting field on the form is shown below:

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

  2. Click the "edit note" button to put the note in edit mode.

  3. Edit the note and save the document.
    On saving, the sc-note-comment field will display the edited note, the user account that edited the note, the edit date and time and an "edited note" icon": Icon-sc-note-comment-Edited-Note Mouseover of the "edited note" icon will display the tooltip text "This note detail has been edited".

    The resulting sc-note-comment field on the form is shown below.

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

  4. Click the "edited note" icon to display a pop-up showing the detail of the note prior to the edit.

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

Resulting field in the document and database:

    "typicalDefnScNoteComment": [
        {
            "dataId": "e0c38420-86e3-11eb-b8eb-83433c2ce83a",
            "detail": "This is the first sentence entered into the sc-note-comment field. This second sentence has exceeded the width of the field on the form hence it has automatically wrapped. Clicking enter will move the cursor to a new line.\nThe original note was edited in order to include this sentence.",
            "createdBy": {
                "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                "name": "User Account - barry.eadie@fieldtec.com"
            },
            "createdDate": "2021-03-17T05:44:45.154Z",
            "modifiedDate": "2021-03-18T04:41:41.613Z",
            "notesHistory": [
                {
                    "dataId": "e0c38420-86e3-11eb-b8eb-83433c2ce83a",
                    "detail": "This is the first sentence entered into the sc-note-comment field. This second sentence has exceeded the width of the field on the form hence it has automatically wrapped. Clicking enter will move the cursor to a new line.\n",
                    "createdBy": {
                        "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                        "name": "User Account - barry.eadie@fieldtec.com"
                    },
                    "createdDate": "2021-03-17T05:44:45.154Z",
                    "modifiedDate": "2021-03-17T05:44:45.154Z"
                }
            ]
        }
    ]


Example 3 - Add a Comment

To add a comment to the note that was saved in Example 2:

  1. Click the note comment button: Icon-sc-note-comment-comment

    The resulting field on the form is shown below.

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

  2. Enter a comment and save the document.

    The resulting field on the form is shown below.

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

Resulting field in the document and database:

    "typicalDefnScNoteComment": [
        {
            "dataId": "e0c38420-86e3-11eb-b8eb-83433c2ce83a",
            "detail": "This is the first sentence entered into the sc-note-comment field. This second sentence has exceeded the width of the field on the form hence it has automatically wrapped. Clicking enter will move the cursor to a new line.\nThe original note was edited in order to include this sentence.",
            "createdBy": {
                "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                "name": "User Account - barry.eadie@fieldtec.com"
            },
            "createdDate": "2021-03-17T05:44:45.154Z",
            "modifiedDate": "2021-03-18T04:41:41.613Z",
            "notesHistory": [
                {
                    "dataId": "e0c38420-86e3-11eb-b8eb-83433c2ce83a",
                    "detail": "This is the first sentence entered into the sc-note-comment field. This second sentence has exceeded the width of the field on the form hence it has automatically wrapped. Clicking enter will move the cursor to a new line.\n",
                    "createdBy": {
                        "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                        "name": "User Account - barry.eadie@fieldtec.com"
                    },
                    "createdDate": "2021-03-17T05:44:45.154Z",
                    "modifiedDate": "2021-03-17T05:44:45.154Z"
                }
            ],
            "comments": [
                {
                    "createdBy": {
                        "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
                        "name": "User Account - barry.eadie@fieldtec.com"
                    },
                    "createdDate": "2021-03-18T13:27:44.752Z",
                    "dataId": "b91b8701-87ed-11eb-ac95-3948d41e5e07",
                    "detail": "This is the first sentence of a comment against a note. This is the second sentence of comment against a note."
                }
            ]
        }
    ]


5 Video 1