Skip to main content
Version: Upcoming 🦄

TextField / Textarea

Input Example
<input
    id="customer_street"
    type="text"
    data-hf-control="TextField"
    data-hf-options="{
        label: 'Address: Street name' 
    }"
/>
Textarea Example
<textarea
    id="repair_remark"
    style="min-height:110px; height:auto"
    data-hf-control="TextField"
    data-hf-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 the 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 completely.
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​

It is the value where the "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 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

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-hf-control="TextField"
    data-hf-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

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<input id="textfield_multiple_copy_target"
    type="text"
    data-hf-control="TextField"
    data-hf-options="{
        label: 'TestField: target',
        copyValueFrom: 'textfield_multiple_copy_source'
    }">
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

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

sourceId​

Specify source id
How to use:
sourceId: '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-hf-control="TextField"
    data-hf-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"
}