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).
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:
- 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:
To add a new note:
-
Click the "add note" button:
The note box can be resized by clicking and dragging its "resize" button:
Resulting field on the form on clicking the "add note" button:
-
Enter a note into the sc-note-comment field.
Resulting field on the form on entering a note:
-
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:
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:
-
Mouseover the note to trigger the display of the "edit note" button: The resulting field on the form is shown below:
-
Click the "edit note" button to put the note in edit mode.
-
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": 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.
-
Click the "edited note" icon to display a pop-up showing the detail of the note prior to the edit.
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:
-
Click the note comment button:
The resulting field on the form is shown below.
-
Enter a comment and save the document.
The resulting field on the form is shown below.
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."
}
]
}
]