Skip to main content
Version: Upcoming 🦄

InkControl

DEPRECATED use DrawingControl instead.

<div
    id="mark_damage"
    data-hf-control="InkControl"
    data-hf-options="{
        label: 'Mark damage with pen',
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true,
        clearButton: true,
        defaultColor: '255, 33, 203, 0' 
    }"
></div>

FormControl Options​

image - required​

Write down the path to connect the field with your picture. The first part of the path represents a placeholder and will be changed at runtime.
How to use:
image: '{{HFFormPath}}/watermeter.png'
Type: string

clearButton​

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

defaultColor​

The app default color is red (except for Signatures!). To customize it, use RGB values for the last three entries (33, 203, 0). The first value (255) always remains the same (Alpha value).
How to use:
defaultColor: '255, 33, 203, 0'
Type: string

disabled​

Set "true" whenever the InkControl 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

eraserButton​

Defines a small toggleable button (Eraser Icon) on the bottom left of the picture with which the latest drawing can be erased
How to use:
eraserButton: false
Type: boolean
Default: true

height​

Needs to be set for this control to define the height of the field. The value is defined in pixels.
How to use:
height: 280
Type: number

hidden​

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

label​

Define a label for your control element.
How to use:
label: 'Mark damage with pen'
Type: string

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

required​

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

saveTimeout​

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

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: 'Please indicate at least one cause of damage.'
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

width​

Needs to be set for this control to define the width of the field. The value is in pixels. The maximum is always 460 px
How to use:
width: 226
Type: integer

Stored data

​

<div
    id="mark_damage"
    data-hf-control="InkControl"
    data-hf-options="{
    width: 226,
    height: 270,
    image: '{{HFFormPath}}/watermeter.png',
    required: true,
    clearButton: true }"
></div>

For each InkControl inside your Forms there are several value pairs of stored data:

The first two value pairs are the default data to be stored – the first pair indicates the InkControl has been used …

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

… and the second pair stores the information on the created image

{
    "id": "mark_damage_HFInkImage",
    "value": "mark_damage.png"
}

Finally, the third pair stores the information on the image merged with a provided background image

{
    "id": "mark_damage_HFInkImageMerged",
    "value": "mark_damage_merged.png"
}