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 component can also be customised to allow signature images to be available.

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:

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	Changing the sc-signature field value (i.e. entering or editing a signature) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-signature field value does not trigger a warning message to display. In the Angular version of the sc-signature component, clicking the Save icon will not save the sc-signature field value to the document. In the AngularJS version of the sc-signature component, clicking the Save icon will save the sc-signature field value to the document. Example: `"disableSave": true`
	false	Default value. Changing the sc-signature field value (i.e. entering or editing a signature) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-signature field value does trigger a warning message to display. In both the Angular and AngularJS versions of the sc-signature component, clicking the Save icon will save the sc-signature field value to the document.
downloadImage	true	Displays the "download" action button. When clicked it downloads the signature as a png file Example: `"downloadImage: true"`
	false	Default value. No download action button is displayed
enabled	true	Default value. A value can be entered in the signature field.
	false	Exiting the form without saving the entered value does trigger a warning message to display. The signature field is greyed out. A Stop icon appears on mouseover. A value cannot be entered in the signature field. Example: `"enabled": false`
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).
penColor	A valid color	Changes the pen colour of the signature component. Colours are specified using predefined color names, HEX or RGB values. Examples: `"penColor": "lightblue"` `"penColor": "#008000"` `"penColor": "rgb(250,0,0)"`
	black	Default value.
saveAsImage	true	Saves the signature as an image to the server when the document is saved. The server url is added to the first index of the component's saved vector array. It can be accessed in by componentName[0] where componentName is the name specified for the component on the JSON document. It is important to note, the image is uploaded on the documents save. If you try and access the signature before this has occurred then it will not be available. Example: `"saveAsImage": true`
	false	Default value. The signature just saves the vector array to the document.
uploadOld	true	Uploads previously saved signatures as image. Converts legacy data types and vector arrays to save image as the first itemin fieldValue array. Must also have saveAsImage as true. Example: `"uploadOld": true`
	false	Default value. The signature saved value will remain unchanged as long as no changes are made to the signature. If an edit is made and saveAsImage is set, then the signature will be uploaded as an image.
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 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,
    "downloadImage": true,
    "penColor": "green",
    "saveAsImage": true,
    "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

Example 2

A sc-signature definition defined with the typically needed fields plus the optional fields "penColor" and "downloadImage".

{
    "componentName": "sc-signature",
    "name": "testScSignature",
    "label": "Test sc-signature",
    "penColor": "lightblue",
    "downloadImage": true
}

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

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

"testScSignature": [
        "{\"dotSize\":0,\"minWidth\":0.5,\"maxWidth\":2.5,\"penColor\":\"lightblue\",\"points\":[{\"time\":1663208895746,\"x\":81.51171875,\"y\":89.6875,\"pressure\":0.5},{\"time\":1663208895943,\"x\":87.86328125,\"y\":89.6875,\"pressure\":0.5},{\"time\":1663208895975,\"x\":93.18359375,\"y\":89.6875,\"pressure\":0.5}]}"
    ]

If "saveAsImage"= true, then the first index will be the server url for the image.

"testScSignature": [
                "api/getFile/954832c0.../signature.png",
        "{\"dotSize\":0,\"minWidth\":0.5,\"maxWidth\":2.5,\"penColor\":\"lightblue\",\"points\":    [{\"time\":1663208895746,\"x\":81.51171875,\"y\":89.6875,\"pressure\":0.5},{\"time\":1663208895943,\"x\":87.86328125,\"y\":89.6875,\"pressure\":0.5},{\"time\":1663208895975,\"x\":93.18359375,\"y\":89.6875,\"pressure\":0.5}]}"
    ]

This url can then be used in other components such as the sc-pdf to generate formatted Pdfs with the signature. It can be addressed in the rulesets by...

url = "https://" + window.location.hostname + "api/getFile/954832c0.../signature.png";

eg. https://comp-dev-ng.formbird.com/api/getFile/954832c0-.../signature.png

The sc-signature component still works with the older angularJS file types. eg.

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