Skip to content

sc-signature

sc-signature-field-Example-1-Image-1

1 Purpose

sc-signature places a signature field on a form, allowing the user to enter their signature.

An undo function allows the user to undo in reverse order, the successive strokes used to enter of the signature.

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

 

2 Definition

sc-signature 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-signature The component name.
Example: "componentName": "sc-signature"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the signature field in the document and database.
Example: "name": "testScSignature"

2.3 Optional Customizable Fields

Field Valid Values Description
disableSave true Entering a value in the signature field does not trigger the Save icon to flash.
Exiting the form without saving the entered value does not trigger a warning message to display.
Example: "disableSave": true
false Default value. Entering a value in the signature field does trigger the Save icon to flash.
Exiting the form without saving the entered value does trigger a warning message to display.
enabled false The signature field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the signature field.
Example: "enabled": false
true Default value. A value can be entered in the signature field.
fullWidth true The signature field displays full width on the form.
Example: "fullWidth": true
false Default value. The signature field does not display full width on the form.
label Any value Defines the name of the signature field on the form i.e. the field label.
Example: "label": "Test sc-signature"
Defaults to the signature field displays without a field label on the form.
mandatory true The signature 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 signature field.
Example: "mandatory": true
false Default value. The field displays as optional (i.e. label in black text).
visible false The signature field is not visible on the form.
Example: "visible": false
true Default value. The signature field is visible on the form.

 

3 Typical sc-signature Definition

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

{
    "componentName": "sc-signature",
    "label": "Test sc-signature",
    "name": "testScSignature"
    "mandatory": 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.

    "disableSave":true,
    "enabled":false,
    "visible":false,

 

4 Examples

Example 1

A sc-signature definition defined with the typically needed fields.

        {
            "componentName": "sc-signature",
            "label": "Test sc-signature",
            "name": "testScSignature",
            "mandatory": true
        }

Resulting field on the form:

sc-signature-field-Example-1-Image-1

Resulting field on the form after entering a value:

The undo function allows the user to undo in reverse order the successive strokes used to enter the signature.

sc-signature-field-Example-1-Image-2

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

    "testScSignatureBox": [
        "image/jsignature;base30",       
 "1E566654Z34555442Y3466764485Z1368466Y57420Z45444_2E200Z332Y24556533Z2355431210Y4420Z122Y3433620Z121_3D_3y_3U394b46341Z2355210Y241Z14Y5644341223342Z1220Y335430Z2Y1334630Z1Y343222Z1Y134333332232Z312221Y15554222122311Z14111111221Y336521043Z2_3IZ242525365322Y13656944Z2Y42Z1323Y4Z6522Y15543Z5321Y1264Z53210Y3552Z23343Y5421Z234454555Y4545444310Z13345456444Y2546445344Z2220Y345Z123_8H5555Z3_2J0000Z2_7U_2P"
    ]