Skip to content

sc-checklist-comment

This document is a user guide for the sc-checklist-comment component version 6.0 (released Feb 12, 2020).

go-to-typical-definition

sc-checklist-comment-field-Example-1-Image-1


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:

  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-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 Entering one or more ticks and/or comments in the checklist comment field does not trigger the Save icon to flash.
Exiting the form without saving the entered ticks and/or comments in the checklist comment field does not trigger a warning message to display.

Example:
"disableSave": true
false Default value.
Entering one or more ticks and/or comments in the checklist comment field does trigger the Save icon to flash.
Exiting the form without saving the entered ticks and/or comments in the checklist comment field does trigger a warning message to display.
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:

sc-checklist-comment-field-Example-1-Image-1

Resulting field on the form after entering one or more ticks and/or comments in the checklist comment field:

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

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:

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

Resulting warning pop-up on saving the form without entering at least one tick or comment in the mandatory checklist comment field:

sc-checklist-comment-field-Example-2-Image-2

Resulting field on the form after entering one or more ticks and/or comments in the checklist comment field:

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

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"
            }
        }
    ]