Skip to main content
Version: 9.6

SelectBox

This type of form control is similar to the HTML select box and the ComboBox control.

<select id="floor" 
    data-win-control="HFWinJSCtrl.SelectBox" 
    data-win-options="{
        label: 'Floor',
        defaultValue: '1',
        required: true 
    }">
    <option> </option>
    <option value="1">1st floor</option>
    <option value="2">2nd floor</option>
</select>

FormControl Options​

defaultValue​

Set the initial status of the SelectBox to a "selected" option. A custom code function can be used to set defaultValue.

How to use: defaultValue: '1'
Type: string | function
Signature: function() => string

deletable​

Set "true" whenever the values of the SelectBox should be deletable.

How to use: deletable: true
Type: boolean

disabled​

Set "true" whenever the SelectBox should be disabled.

How to use: disabled: 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: 'Floor'
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 }

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 selected value of the select box 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 indicate at least one cause of damage.'
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

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

Stored data​

For each SelectBox there are two value pairs stored:

{
    "id": "floor",
    "value": "1"
}
{
    "id": "floor_HFSelectText",
    "value": "1st floor"
}