Skip to main content
Version: 9.6

DrawingControl

<div id="mark_damage" 
    data-win-control="HFWinJSCtrl.DrawingControl" 
    data-win-options="{
        label: 'Mark damage with pen',
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true 
    }">
</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

disabled​

Set "true" whenever the DrawingControl should be disabled.

How to use: disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should get deleted if form is copied.

How to use: doNotCopy: true
Type: boolean

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

responsive​

Set "true" whenever the DrawingControl should be responsive. It overrites given width and height values.

How to use: responsive: true
Type: boolean

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 a 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: number

Stored data​

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

For each DrawingControl 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 DrawingControl has been used …

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

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

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

Finally, the third pair stores the information of the strokes

{
    "id": "mark_damage_HFDrawingStrokes",
    "value": "fabric.Objects"
}