sc-checklist-comment
This document is a user guide for the sc-checklist-comment component version 6.0 (released Feb 12, 2020).
1 Purpose
sc-checklist-comment places a checklist comment field on a form, allowing the user to tick one or more options and/or add a comment against one or more options.
The sc-checklist-comment definition provides fields for setting the properties of a checklist comment field and is fully described below.
2 Definition
sc-checklist-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-checklist-comment | The component name. Example: "componentName": "sc-checklist-comment" |
2.2 Required Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| name | Any value written in camel case. | Defines the name of the sc-checklist-comment field in the document and database. Example: "name": "testScCheckListComment" |
| list | Any value(s) | An array of one or more values Example: list": ["Option 1","Option 2","Option 3","Option 4","Option 5","Option 6"] |
2.3 Optional Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| disableSave | true | Changing the sc-checklist-comment field value (i.e. ticking or unticking a check box and/or adding or editing a comment) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-checklist-comment field value does not trigger a warning message to display. In the Angular version of the sc-checklist-comment component, clicking the Save icon will not save the sc-checklist-comment field value to the document. In the AngularJS version of the sc-checklist-comment component, clicking the Save icon will save the sc-checklist-comment field value to the document. Example: "disableSave": true |
| false | Default value. Changing the sc-checklist-comment field value (i.e. ticking or unticking a check box and/or adding or editing a comment) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-checklist-comment field value does trigger a warning message to display. In both the Angular and AngularJS versions of the sc-checklist-comment component, clicking the Save icon will save the sc-checklist-comment field value to the document. |
|
| enabled | false | The checkboxes and comment lines of the checklist comment field are greyed out. A Stop icon appears on mouseover of the checklist comment field. The checkboxes and comment lines of the checklist comment field cannot entered. Hovering over a checklist comment field option will not highlight that option's comment line. Example: "enabled": false |
| true | Default value. The checkboxes and comment lines of the checklist comment field are not greyed out. A Stop icon does not appear on mouseover of the checklist comment field. The checkboxes and comment lines of the checklist comment field can be entered. Hovering over a checklist comment field option will highlight that option's comment line. |
|
| fullWidth | true | The checklist comment field displays full width on the form. Example: "fullWidth": true |
| false | Default value. The checklist comment field does not display full width on the form. |
|
| label | Any value | Defines the name of the field on the form i.e. the field label. Example: "label": "Test sc-checklist-comment" |
| Defaults to the checklist comment field displays without a field label on the form. | ||
| mandatory | true | The checklist 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 checklist comment field . Example: mandatory": true |
| false | Default value. The checklist comment field displays as optional (i.e. label in black text). Saving without a value, a message does not prompt the user to enter a value for checklist comment field . |
|
| visible | false | The checklist comment field is not visible on the form. Example: "visible": false |
| true | Default value. The checklist comment field is visible on the form. |
3 Typical Definition
Below is a typical sc-checklist-comment definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-checklist-comment",
"name": "testScCheckListComment",
"label": "Test sc-checklist-comment",
"list": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5",
"Option 6"
]
}
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,
"disableSave":true,
"enabled":false,
"fullWidth":true,
"visible":false,
4 Examples
Example 1
sc-checklist-comment defined with its typically needed fields:
{
"componentName": "sc-checklist-comment",
"name": "testTypicalScCheckListComment",
"label": "Test Typical sc-checklist-comment Defination",
"list": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5",
"Option 6"
]
}
Resulting field on the form:
Resulting field on the form after entering one or more ticks and/or comments in the checklist comment field:
Resulting field in document and database after saving the checklist comment:
"testTypicalScCheckListComment": [
{
"item": "Option 1",
"checkedBool": true,
"comment": "Option 1 Comment",
"createdDate": "2021-01-12T12:37:59.706Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
},
{
"item": "Option 2",
"checkedBool": true,
"createdDate": "2021-01-12T12:37:59.706Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
},
{
"item": "Option 4",
"comment": "Option 4 Comment",
"createdDate": "2021-01-12T12:37:59.706Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
}
]
Example 2
sc-checklist-comment defined with its typically needed fields plus 2 optional fields, "fullWidth" and "mandatory" fields:
{
"componentName": "sc-checklist-comment",
"name": "testNonTypicalScCheckListCommentDefinition",
"label": "Test Non-Typical sc-checklist-comment Definition",
"list": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5",
"Option 6"
],
"fullWidth": true,
"mandatory": true
}
Resulting field on the form:
Resulting warning pop-up on saving the form without entering at least one tick or comment in the mandatory checklist comment field:
Resulting field on the form after entering one or more ticks and/or comments in the checklist comment field:
Resulting field in document and database after saving the checklist comment:
"testNonTypicalScCheckListCommentDefinition": [
{
"item": "Option 1",
"checkedBool": true,
"comment": "Option 1 Comment",
"createdDate": "2021-01-12T12:27:18.791Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
},
{
"item": "Option 2",
"checkedBool": true,
"createdDate": "2021-01-12T12:27:18.791Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
},
{
"item": "Option 4",
"comment": "Option 4 Comment",
"createdDate": "2021-01-12T12:27:18.791Z",
"createdBy": {
"documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
"name": "User Account - reginald.katting@formird.com"
}
}
]