Skip to main content
Version: 9.5

CheckBox

<input id="repair_cover_glass_broken" 
    type="checkbox"
    value="Cover glass broken"
    data-win-control="HFWinJSCtrl.CheckBox" 
    data-win-options="{ 
        label: 'Cover glass broken', 
        list: true, 
        defaultValue: true,
        style: 'default | highlightChecked | toggleButton',
        toggle: {
            defaultClass: 'hf-radio-red', 
            checkedClass: 'highlight'
        }
    }">

FormControl Options​

defaultValue​

Set the defaultValue to "true" to display the CheckBox as checked by default. A custom code function can be used to set defaultValue.

How to use: defaultValue: true
Type: boolean | function
Signature: function() => boolean

disabled​

Set "true" whenever the checkbox 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

htmlLabel​

Define a label that allows html tags inside the text set next to the checkbox. If a label and a htmlLabel is set, the htmlLabel overwrites the label.

How to use: htmlLabel: 'Cover glass broken'
Type: string

label​

Define a label set next to the checkbox (optional)

How to use: label: 'Cover glass broken'
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(data: { value: boolean, hfValue: string }) => void

persistent​

The value "user" sets the initial value of the checkbox 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

style​

Define the display behaviour of the radiobox and its label depending on its status (checked/unchecked). Default is the previously familiar behavior, highlightChecked softens the unchecked input ctrl and its label and emphasizes the checked control by bold font and dark font color.

How to use: style: 'default'
Type: 'default' | 'highlightChecked' | 'toggleButton' | 'backgroundHighlight'

toggle​

Define up to two CSS classes applied to the container-div of the checkbox to emphasize the toggle-effect of the form control. At least the "defaultClass" has to be defined. Note: Use in case of style: 'toggleButton' to assign the background color, this option is ignored in case of the other two possibilities.

How to use: toggle: {defaultClass: 'hf-radio-orange', checkedClass: 'highlight'}
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​

<input id="repair_cover_glass_broken" 
    type="checkbox"
    data-win-control="HFWinJSCtrl.CheckBox" 
    value="Cover glass broken"
    data-win-options="{
        label: 'Cover glass broken', 
        list: true, 
        defaultValue: true 
    }"
>

For each checked CheckBox inside your forms there are two value pairs of stored data:

First the information if the Checkbox is checked

{
    "id": "repair_cover_glass_broken",
    "value": true
}

and for the defined value:

{
    "id": "repair_cover_glass_broken_HFValue",
    "value": "Cover glass broken"
}