TextField / Textarea

<input id="customer_street" 
    type="text" 
    data-win-control="HFWinJSCtrl.TextField" 
    data-win-options="{
        label: 'Address: Street name' 
    }">

<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.

Property	Type	How to use	Description
autoResize	Boolean	autoResize: true	Set "true" whenever the Textarea should be auto resized on typing. The default value is false.
defaultValue	String	defaultValue: 'Default Text'	Provide a default text inside your input field.
disabled	Boolean	disabled: true	Set "true" whenever the TextField/Textarea should be disabled. The default value is false.
displayOnly	Boolean	displayOnly: 'true	Disables the Textfield and makes it readonly, without input styling.
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
label	String	label: 'Addrees: Street name'	Define a label for your control element.
list	Boolean	list: true	Set "true" whenever the content should show up in the list on the dashboard.
listOptions	Object	listOptions: {...}	Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them complettely.
mapping	Boolean	mapping: true	Set "true" whenever the form element should be visible / editable in the corresponding SharePoint list.
mask	String	mask: '(000) 000-0000'	Used to give the user an input mask. For more information visit: https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox/configuration/mask.
persistent	String	persistent: 'user'	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.
required	Boolean	required: true	Set "true" if the control has to be filled in.
tooltip	String	tooltip: 'Please fill in a remark.'	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.
visiting	Boolean	visiting: true	Set "true" whenever the form element should be marked as "visited" when the user has clicked or tapped at the form field.
onChanged	Function(value: string)	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes (optional)

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

Property	Type	How to use	Description
dialogText	String	dialogText: 'Display Text'	Set custom label for filter/sort/group dialogs.
dialogHide	Boolean	dialogHide: true	Hide field from filter/sort/group dialogs.

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"
}