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-win-control="HFWinJSCtrl.NumericField" 
    data-win-options="{
        step: 0.1,
        min: 20,
        max: 45,
        placeholder: '°C',
        decimals: 1,
        format: '0.0°',
        startValue: 36 
    }"></div>

Property	Type	How to use	Description
culture	String	culture: 'de-CH'	Set the number format according to the lingual characteristics.
decimals	Number	decimals: 1	Define the number of decimals you want to display.
defaultValue	Number/Function	defaultValue: 123	Set a numeric default value. A custom code function can be used to set defaultValue.
disabled	Boolean	disabled: true	Set "true" whenever the NumericField should be disabled. The default value is false.
disableOpenDialog	Boolean	disableOpenDialog: true	Set "true" whenever the NumericField should be prevented opening in a dialog and hide spinner buttons on mobile devices. The default value is false.
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
format	String	format: '0.0°'	Define the format of the value shown in the final form. https://docs.telerik.com/kendo-ui/globalization/intl/numberformatting
label	String	label: 'Date'	Define a label for your control element.
list	Boolean	list: true	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.
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.
max	Number	max: 45	Set the maximum input value.
min	Number	min: 20	Set the minimum input value.
persistent	String	persistent: 'user'	The value "user" sets the initial value of the NumericField to the value of the previous form item of the current user and overwrites any defaultValue.
placeholder	String	placeholder: '°C'	Define a placeholder text for the NumericField.
required	Boolean	required: true	Set "true" if the control has to be filled in.
startValue	Number	startValue: 36	Set the start value of the NumericField.
step	Number	step: 0.1	Define the value of increase / decrease step when using the up and down arrows.
tooltip	String	tooltip: 'Please indicate at least one cause of damage.'	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.
inputMode	String	inputMode: 'numeric'	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 this here
onChanged	Function(value: number)	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes

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

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

<div id="temperatur" data-win-control="HFWinJSCtrl.NumericField" data-win-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"
}