Skip to content

sc-approve

This document is a user guide for the sc-approve component version 6.5.64.

go-to-typical-definition

sc-approve-field-Example-1-Image-2

 

1 Purpose

sc-approve places an approve field in the form of a checkbox on a form. Ticking the checkbox indicates approval and will display an approval message beside the ticked checkbox. The approval message consists of a message label, the approver's account name and the approval date & time.

The sc-approve field is only enabled for those users whose account has the access key associated with that sc-approve field.

The sc-approve definition provides fields for setting the properties of an approve field and is fully described below.

2 Definition

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

Example:
"componentName": "sc-approve"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the sc-approve field in the document and database.

Examples:
"name": "typicalDefnScApprove"
"name": "reviewedAndApproved"

2.3 Optional Customizable Fields

Field Valid Values Description
approveMessage Ticking the sc-approve field checkbox will display an approval message beside the ticked checkbox.
The message consists of a message label, the approver's account name and the approval date & time.
Any text value The approval message label.

Example:
"approveMessage": "Reviewed and Approved by:"
Approved by: Default value.
defaultValue true The sc-approve-field checkbox will initially display as ticked.

Example:
"defaultValue": true
false Default value.
The sc-approve-field checkbox will initially display as unticked.
disableSave true Changing the sc-approve field value (ticking or unticking the checkbox) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-approve field value does not trigger a warning message to display.
In the Angular version of the sc-approve component, clicking the Save icon will not save the sc-approve field value to the document.
In the AngularJS version of the sc-approve component, clicking the Save icon will save the sc-approve field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-approve field value (ticking or unticking the checkbox) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-approve field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-approve component, clicking the Save icon will save the sc-approve field value to the document.
enabled false The sc-approve field checkbox is greyed out.
A Stop icon appears on mouseover of the sc-approve field checkbox.
The sc-approve field checkbox cannot be ticked (or unticked).

Example:
"enabled": false
true Default value.
The sc-approve field checkbox is not greyed out.
A Stop icon does not appear on mouseover of the sc-approve field checkbox.
The sc-approve field checkbox can be ticked (or unticked).
fullWidth true The sc-approve field displays full width on the form.

Example: "fullWidth": true
false Default value.
The sc-approve field does not display full width on the form.
keyIds Array of keys ids An array of one or more key ids.
A user account must have at least one of these keyIds in order to access the sc-approve field.
If a user account does not have at least one of these keyIds, then the sc-approve field will be disabled and the stop icon will display on mouseover of the sc-approve field.

Example:
"keyIds": [
    "de00fcb0-84af-11e8-82c8-778f0f89c2be"
]
label Any value Defines the name of the sc-approve field on the form i.e. the field label.

Examples:
"label": "Typical Defn sc-approve"
"label": "Reviewed and Approved"
Defaults to no label is displayed.
mandatory true The sc-approve field displays as mandatory (i.e. label in red text with an asterisk).
Saving without ticking the sc-approve field, a pop-up message displays prompting the user to enter a value for the sc-approve field.
Unticking the sc-ace-text field checkbox, "This field is required" in red text will display below the sc-approve field.

Example:
"mandatory": true
false Default value.
The field displays as optional (i.e. label in black text).
Saving without ticking the sc-approve field, a pop-up message does not display prompting the user to enter a value for the sc-approve field.
Unticking the sc-ace-text field checkbox, "This field is required" in red text will not display below the sc-approve field.
visible false The sc-approve field is not visible on the form.

Example:
"visible": false
true Default value.
The sc-approve field is visible on the form.

3 Typical Definition

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

{
    "name": "Typical Defn sc-approve",
    "keyIds": ["3e88afa0-5e50-11e8-baa9-a9d161e55a91"],
    "label": "Typical Defn sc-approve",
    "componentName": "sc-approve"
}

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.

    "approveMessage": "Reviewed and Finalised By:",
    "defaultValue":true,
    "disableSave":true,
    "enabled":false,
    "fullWidth":true,
    "mandatory": true,
    "visible":false,

4 Examples

Example 1:

A typical sc-approve definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-approve",
            "name": "typicalDefnScApprove",
            "keyIds": [
                "de00fcb0-84af-11e8-82c8-778f0f89c2be"
            ],
            "label": "Typical Defn sc-approve"
        }

Resulting sc-approve field on the form:

sc-approve-field-Example-1-Image-1

Resulting sc-approve field on the form after ticking its checkbox:

sc-approve-field-Example-1-Image-2

Resulting field in the document and database:

    "typicalDefnScApprove": {
        "approveAccount": {
            "documentId": "b7c1e1b0-2b9f-11e6-ac9c-170c531a5a0c",
            "name": "User Account - barry.eadie@fieldtec.com"
        },
        "approveDate": "2021-11-24T02:05:58.046Z"
    }

 

Example 2

sc-approve field defined as:

        {
            "componentName": "sc-approve",
            "name": "nonTypicalDefnScApprove",
            "keyIds": [
                "de00fcb0-84af-11e8-82c8-778f0f89c2be"
            ],
            "label": "Reviewed and Approved",
            "approveMessage": "Reviewed and Approved by:",
            "mandatory": true
        }

Resulting field on the form:

sc-approve-field-Example-2-Image-1

Resulting sc-approve field on the form after ticking its checkbox:

sc-approve-field-Example-2-Image-2

Resulting field in the document and database after saving the document:

    "nonTypicalDefnScApprove": {
        "approveAccount": {
            "documentId": "b6d7e1b0-1abc-2def-3ghi-100c135a5f3d",
            "name": "User Account - barry.eadie@fieldtec.com"
        },
        "approveDate": "2021-11-24T11:11:15.231Z"
    }