Skip to main content
Version: Upcoming 🦄

NumericField

NumericFields restrict the input value to numbers in the case of a simple input field or you refine it by further properties to offer a kind of slider.

<div
    id="temperatur"
    data-hf-control="NumericField"
    data-hf-options="{
        step: 0.1,
        min: 20,
        max: 45,
        placeholder: '°C',
        decimals: 1,
        format: '0.0°',
        startValue: 36 
    }"
></div>

FormControl Options​

Options of the kendo component are also available. read more

copyValueTo​

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

culture​

Set the number format according to the lingual characteristics.
How to use:
culture: 'de-CH'
Type: string

decimals​

Define the number of decimals you want to display.
How to use:
decimals: 1
Type: number

defaultValue​

Set a numeric default value. A Custom Code function can be used to set defaultValue.
How to use:
defaultValue: 123
Type: number | function
Signature: function() => number

disabled​

Set "true" whenever the NumericField should be disabled.
How to use:
disabled: true
Type: boolean

disableOpenDialog​

Set "true" whenever the NumericField should be prevented opening in a dialog and hide spinner buttons on mobile devices.
How to use:
disableOpenDialog: true
Type: boolean

doNotCopy​

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

format​

Define the format of the value shown in the final Form. https://docs.telerik.com/kendo-ui/globalization/intl/numberformatting
How to use:
format: '0.0°'
Type: string

hidden​

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

inputMode​

Set the virtual keyboard on a mobile device to a certain type of data. But be careful with this setting. If region settings on the phone differs to culture settings in the Form, this could lead to unwanted behaviour. For all available options, see: here
How to use:
inputMode: 'numeric'
Type: string

label​

Define a label for your control element.
How to use:
label: 'Date'
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 }

max​

Set the maximum input value.
How to use:
max: 45
Type: number

min​

Set the minimum input value.
How to use:
min: 20
Type: number

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

persistent​

It is the value where the "user" sets the initial value of the NumericField to the value of the previous Form Item of the current user and overwrites any defaultValue.
How to use:
persistent: 'user'
Type: 'user'

placeholder​

Define a placeholder text for the NumericField.
How to use:
placeholder: '°C'
Type: string

required​

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

spinners​

The field will feature arrow controls that enable users to increment or decrement a number for value selection.
How to use:
spinners: true
Type: boolean

startValue​

When the field is empty, specify the initial value of the NumericField using the spinners.
How to use:
startValue: 36
Type: number

step​

Define the value of increase / decrease step when using the up and down arrows.
How to use:
step: 0.1
Type: number

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

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

For defining the format to be displayed as percentage value you have to escape the special character by using the number sign and two back slashes (i.e. format: '# \%').

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
<div
    id="numeric_field_copy_source"
    data-hf-control="NumericField"
    data-hf-options="{
    label: 'NumericField: source',
    spinners: false,
    disableOpenDialog: true,
    format: '# kWp',
    copyValueTo: ['numeric_field_copy_target_1', {
        targetId: 'numeric_field_copy_target_2',
        shadowPostfix: '_HFNumericField',
        mode: 'overwrite'
    }]
}"
></div>
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

​

<div
    id="temperatur"
    data-hf-control="NumericField"
    data-hf-options="{
    step: 0.1,
    min: 20,
    max: 45,
    placeholder: '°C',
    decimals: 1,
    format: '0.0°',
    startValue: 36 }"
></div>

For each NumericField inside your Forms there are two value pairs of stored data:

{
    "id": "temperatur",
    "value": 36.2
}
{
    "id": "temperatur_HFNumericField",
    "value": "36°C"
}