Skip to main content
Version: Upcoming 🦄

CheckBox

An HTML CheckBox to be used in Forms.

<input
    id="repair_cover_glass_broken"
    type="checkbox"
    value="Cover glass broken"
    data-hf-control="CheckBox"
    data-hf-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 the 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 used as a sorting/filtering/grouping option on the ListPage, in template objects (eg. the listTemplate) and in Admin UI listings.
How to use:
list: true
Type: boolean

listOptions​

Define additional options for controls where 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 }

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​

It is the value where the "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

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<input id="repair_cover_glass_broken" 
    type="checkbox"
    value="Cover glass broken"
    data-hf-control="CheckBox" 
    data-hf-options="{ 
        label: 'Cover glass broken', 
        defaultValue: true,
        copyValueFrom: 'is_broken'
    }">
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

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

sourceId​

Specify source id
How to use:
sourceId: 'target_id'
Type: string

Stored data

​

<input
    id="repair_cover_glass_broken"
    type="checkbox"
    data-hf-control="CheckBox"
    value="Cover glass broken"
    data-hf-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"
}