Skip to main content
Version: Upcoming 🦄

SignatureLight

Like our Signature control, the SignatureLight control captures signatures. However, the SignatureLight control does not capture biometric data but only stores the user’s signature as an image.

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

SignatureDark Signature
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-hf-control="SignatureLight"
    data-hf-options="{
        label: 'Customer\'s signature',
        ...,
        signingFromFields: ['tab1_first_name', 'tab1_last_name'],
        ...
    }"
></div>

FormControl Options​

background​

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.
How to use:
background: {{HFFormPath}}/signature-background.png
Type: 'string' | 'none'

clearButton​

Defines a small button (x) on the bottom left of the picture with which the drawing can be deleted.
How to use:
clearButton: true
Type: boolean
Default: true

disabled​

Set "true" whenever the Signature field should be disabled.
How to use:
disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should get deleted if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

forceUnsafe​

Allow the saving of the biometric data without Certificate. Caution! This saves sensitive data on the server without encryption. Should only be used for testing or debugging!
How to use:
forceUnsafe: true
Type: boolean

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

highAccuracyLocation​

Enables high accuracy when requesting the location.
How to use:
highAccuracyLocation: true
Type: boolean
Default: true

locationRequestTimeout​

Sets the request timeout for the geolocation service in seconds.
How to use:
locationRequestTimeout: 5
Type: number
Default: 10

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: boolean) => void

openInOverlay​

Define an object of type openInOverlay for displaying a signature ctrl in a separate dialog (i.e. Form page overlay).
Type: OverlayObject

printMetadata​

Set false if you do not want any Metadata added to the generated signature graphics. If set to false the options printMetadataParts will be ignored.
How to use:
printMetadata: true
Type: boolean
Default: true

printMetadataParts​

Define the Metadata added to the generated signature graphics.
  • 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: The signer's name will be added to the signature graphics.
  • ItemID: A SHA256 base64 encoded checksum of the Form data is added to the signature graphics.
  • DateTime: The time stamp will be added to the signature graphics.
How to use:
printMetadataParts: ['Location', 'Signer', 'ItemID', 'DateTime']
Type: ('Location' | 'Signer' | 'ItemID' | 'DateTime')[]
Default: ['Location', 'Signer', 'ItemID', 'DateTime']

required​

Set "true" if the control has to be filled in.
How to use:
required: true
Type: boolean

saveTimeout​

Duration in seconds until the signature control is locked and saved.
How to use:
saveTimeout: 10
Type: integer
Default: 5

signingAsCallback​

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!
How to use:
signingAsCallback: HFFormdefinition.Namespace.getSigner
Type: function
Signature: function() => any

signingFromFields​

Write the signer's name (or some other additional infos) within the signature field (optional).
How to use:
signingFromFields: ['fieldId_01', 'fieldId_02']
Type: string[]

stamp​

Define an object of type stamp for setting a stamp image on the signature's background.
How to use:
stamp: {...}
Type: StampObject

tooltip​

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.
How to use:
tooltip: 'Sign here!'
Type: string

tooltipTemplate​

Write an ID of an HTML container 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 content of the container will occur.
How to use:
tooltipTemplate: 'example_control_tooltip'
Type: string

Overlay Object​

type - required​

Define the range of application - "always" to open the overlay to sign in all App versions and all devices or "mobile" to open the overlay only on mobile devices. "never" to use in-place Singature.
How to use:
type: 'always' / 'mobile'
Type: 'never' | 'always' | 'mobile'

rotateToLandscape​

Define the behaviour of the overlay on mobile devices: prevent rotating the overlay to landscape by setting the option to false.
How to use:
rotateToLandscape: false
Type: boolean
Default: true

Stamp Object​

url - required​

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.
How to use:
url: '{{HFFormPath}}/stamp-image.png'
Type: string

alpha​

Define the alpha value of the provided image. Provide a number between 0 (fully transparent) and 1 (not transparent).
How to use:
alpha: 0.2
Type: number

Stored data

​

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