Skip to main content
Version: 9.5

TextField / Textarea

Input Example
<input id="customer_street" 
    type="text" 
    data-win-control="HFWinJSCtrl.TextField" 
    data-win-options="{
        label: 'Address: Street name' 
    }">
Textarea Example
<textarea id="repair_remark" 
    style="min-height:110px; height:auto"
    data-win-control="HFWinJSCtrl.TextField"   
    data-win-options="{ 
        label: 'Remark' 
    }"></textarea>
Note

Please ensure there is no non breaking space or line break between the 'textarea'-opening and closing tag. Otherwise the cursor will not be positioned at the correct place on focus.

FormControl Options​

autoResize​

Set "true" whenever the Textarea should be auto resized on typing.
How to use:
autoResize: true
Type: boolean

charCounter​

Set "true" whenever the Textarea should display a character counter. It gets updated on every key stroke. The maxlength amount is taken from the validator.
How to use:
charCounter: true
Type: boolean

copyValueTo​

Copy value to specified FormControls.
How to use:
copyValueTo: ...
Type: CopyValueToType

defaultValue​

Provide a default text inside your input field. A custom code function can be used to set defaultValue.
How to use:
defaultValue: 'Default Text'
Type: string | function
Signature: function() => string

disabled​

Set "true" whenever the TextField/Textarea should be disabled.
How to use:
disabled: true
Type: boolean

displayOnly​

Disables the Textfield and makes it readonly, without input styling.
How to use:
displayOnly: 'true'
Type: boolean

doNotCopy​

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

hidden​

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

label​

Define a label for your control element.
How to use:
label: 'Addrees: Street name'
Type: string

list​

Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the listpage, is used in template objects (eg. the listTemplate) or it should show up in admin ui listings.
How to use:
list: true
Type: boolean

listOptions​

Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them complettely.
How to use:
listOptions: {...}
Type: { dialogText: string, dialogHide: boolean }

mask​

Used to give the user an input mask. For more information visit: https://imask.js.org/guide.html.
How to use:
mask: '(000) 000-0000'
Type: string

maskOptions​

Used to define an input mask more precise. For more information visit: https://imask.js.org/guide.html.
How to use:
maskOptions: {...}
Type: AnyMaskedOptions | function
Signature: function() => AnyMaskedOptions

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: string) => void

persistent​

The value "user" sets the initial value of the TextField to the value of the previous form item of the current user and overwrites any defaultValue.
How to use:
persistent: 'user'
Type: 'user'

required​

Set "true" if the control has to be filled in.
How to use:
required: 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 fill in a remark.'
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

visiting​

Set "true" whenever the form element should be marked as "visited" when the user has clicked or tapped at the form field.
How to use:
visiting: true
Type: boolean
Note

A textarea is a special kind of a TextField. You can specify the look-and-feel of the textarea by providing style information. Set the minimal height "min-height" and the behavior of the textarea scrolling by setting the style attribute height to "auto".

listOptions Object​

dialogHide​

Hide field from filter/sort/group dialogs.
How to use:
dialogHide: true
Type: boolean

dialogText​

Set custom label for filter/sort/group dialogs.
How to use:
dialogText: 'Display Text'
Type: string

copyValueTo​

Define FormControls in which the entered value should be copied.

Example
<input id="textfield_multiple_copy_source"
    type="text"
    data-win-control="HFWinJSCtrl.TextField"
    data-win-options="{
        label: 'TestField: source',
        copyValueTo: [
            'textfield_multiple_copy_traget_1', 
            'textfield_multiple_copy_traget_2'
        ]
    }">
Option interface
interface ICopyValueToObject {
    targetId: string;
    mode: 'overwrite' | null;
    shadowPostfix: string;
    callback: (value: string) => string;
}

type CopyValueToType = string | ICopyValueToObject | Array<string | ICopyValueToObject>;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

shadowPostfix​

Specify which shadow field is copied.
How to use:
shadowPostfix: '_HFNumericField'
Type: string

targetId​

Specify target id
How to use:
targetId: 'target_id'
Type: string

Stored data​

The simplest storage – id and the filled-in value:

{
    "id": "customer_street",
    "value": "Cranfield Road"
}

MaskedInput data​

<input id="masked_input" 
    type="text" 
    data-win-control="HFWinJSCtrl.TextField" 
    data-win-options="{
        label: 'Phone number', 
        mask: '(000) 000-0000'
    }">

First the raw input data

{
    "id": "masked_input",
    "value": "1234567890"
}

and second for the masked value

{
    "id": "masked_input_HFMaskedValue",
    "value": "(123) 456-7890"
}