Version: 9.2

Signature

The signature element is a special inkControl element, which is stored in the ink format "ISF (Ink Serialized Format)" by Microsoft.

Info

For security and legal reasons the HybridForms App advises an encryption of the stored data. Unless a certificate is provided as part of your form definition a notification will appear each time a user signs.

You can store your signaure data unencrypted, but in case of taking advantage of this security feature, please follow the instruction of the HFSQL Server administration guide, capitel 7 „Biometric Signature Data“ for creating the necessary certificate or contact your HFSQL Server administrator.

<div id="repair_customer_sign" 
    data-win-control="HFWinJSCtrl.Signature" 
    data-win-options="{
        label: 'Customer\'s signature',
        required: true,
        tooltip: 'Sign here!',
        clearButton: true,
        saveTimeout: 10,
        openInOverlay: {
            type: 'mobile',
            rotateToLandscape: true
        }
        getSignerOptions: 'tab1_full_name',
        logSigning: false,
        printMetadata: true,
        printMetadataParts: ['Location', 'Signer', 'ItemID', 'DateTime'] 
    }">
</div>

Signature

Instead of coding a "signingAsCallback" function you can also use the alternative option to fill in the signer's name:

<div id="repair_customer_sign" 
    data-win-control="HFWinJSCtrl.Signature" 
    data-win-options="{
        label: 'Customer\'s signature',
        ...,
        signingFromFields: ['tab1_first_name', 'tab1_last_name'],
        ...
    }"></div>

Property	Type	How to use	Description
background	string	`background: 'none' or background: {{HFFormPath}}/signature-background.png`	Sets the background of the signature field. If "none" is the provided value, the signature gets a white background otherwise a reference to a formdefinition image should be provided. If image is not set the signature field gets the Hybrid Forms default signature background.
clearButton	Boolean	`clearButton: true`	Defines a small button (x) on the bottom left of the picture with which the drawing can be deleted.
disabled	Boolean	`disabled: true`	Set "true" whenever the Signature field should be disabled. The default value is false.
doNotCopy	Boolean	`doNotCopy: true`	Set "true" whenever the field should get deleted if form is copied.
forceUnsafe	Boolean	`forceUnsafe: true`	Allow the saving of the biometric data without Certificate. Caution! This saves sensitive data on the server without encryption. Should only used for testing or debugging!
highAccuracyLocation	boolean	`highAccuracyLocation: true`	Enables high accuracy when requesting the location, default is set to `true`.
locationRequestTimeout	number	`locationRequestTimeout: 5`(seconds)	Sets the request timeout for the geolocation service, default is set to 10 seconds.
logSigning	Boolean	`logSigning: false`	Set `false` for preventing the recording of signature recognition stored besides the generated picture as json object. Default is set to `true`.
mapping	Boolean	`mapping: true`	Set "true" whenever the form element should be visible / editable in the corresponding SharePoint list.
onChanged	Function(filled: boolean)	`onChanged: HFFormdefinition.Namespace.Method`	Call a pre-defined JS-method to do something when the status of the control changes
openInOverlay	Object	`openInOverlay: {...}`	Define an object of type `openInOverlay` for displaying a signature ctrl in a separate dialog (i.e. form page overlay).
printMetadata	Boolean	`printMetadata: true`	Set `false` if you do not want any Metadata added to the generated signature graphics. Default is set to `true`. If set to `false` the options `printMetadataParts` will be ignored
printMetadataParts	Array	`printMetadataParts:` `['Location','Signer',` `'ItemID','DateTime']`	Define the Metadata added to the generated signature graphics. Default is containing all parts except the "Signer".
- Location	String	`printMetadataParts:` `['Location',..]`	The coords will be added to the signature graphics. If no "Location" is contained in the printMetadata array, the location will not be collected.
- Signer	String	`printMetadataParts:` `['Signer',..]`	The signer's name will be added to the signature graphics.
- ItemID	String	`printMetadataParts:` `['ItemID,..]`	A SHA256 base64 encoded checksum of the form data is added to the signature graphics.
- DateTime	String	`printMetadataParts:` `['DateTime',..]`	The time stamp will be added to the signature graphics.
required	Boolean	`required: true`	Set "true" if the control has to be filled in.
saveTimeout	Integer	`saveTimeout: 10`	Duration in seconds until the signature control is locked and saved. Default is 5 seconds. (optional)
signingAsCallback	Function(): any	`signingAsCallback: HFFormdefinition.Namespace.getSigner`	Call the method you previously defined to write the signer's name within the signature field. This method is optional and needs to be coded first!
signingFromFields	Array	`signingFromFields: ['fieldId_01','fieldId_02']`	Write the signer's name (or some other additional infos) within the signature field. Optional.
signingFromFields	Array	`signingFromFields: ['fieldId_01','fieldId_02']`	Write the signer's name (or some other additional infos) within the signature field. Optional.
stamp	Object	`stamp: {...}`	Define an object of type `stamp` for setting a stamp image on the signature background.
tooltip	String	`tooltip: 'Sign here!'`	Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur.

Overlay Object

Property	Type	How to use	Description
type	String	`type: 'always'	'mobile'`
rotateToLandscape	Boolean	`rotateToLandscape: false`	Define the behaviour of the overlay on mobile devices: prevent rotating the overlay to landscape by setting the option to false. The default behaviour is `true`.

Stamp Object

Property	Type	How to use	Description
url	String	`url: '{{HFFormPath}}/stamp-image.png'`	The URL to the image that should be used as stamp. The image is resized automatically if it is to big, but it is recommended not to provide images bigger than 920px.
alpha	Number	`alpha: 0.2`	Define the alpha value of the provided image. Provide a number between 0 (fully transparent) and 1 (not transparent).

Stored data

{
    "id": "repair_customer_sign",
    "value": true
}

{
    "id": "repair_customer_sign_HFInkImage",
    "value": "repair_customer_sign.png"
}

{
    "id": "repair_customer_sign_HFSignatureZip",
    "value": "repair_customer_sign.zip"
}

{
    "id": "repair_customer_sign_HFSignatureMetadata",
    "value": {
        "timestamp": "2018-07-03T14:37:01.802Z",
        "geoposition": {
            "latitude": 47.06734,
            "longitude": 15.43349,
            "accuracy": 20,
            "accuracyFormatted": "~ 20 m",
            "timestamp": "2018-07-03T14:36:51.292Z"
        },
        "signer": "Robert Simon",
        "eventCounter": 190,
        "itemid": "84395929-b38e-1a9f-ffac-b97ef6c9b4f2",
        "formHash":"ZH82iLfZEfaxtceMMTECCRmwMOjZrB3ERm5tynSegPY=",
        "timeunit": "milliseconds",
        "input": "mouse"
    }
}

Signature

Overlay Object​

Stamp Object​

Stored data​

Overlay Object

Stamp Object

Stored data