Skip to main content
Version: Upcoming 🦄

SelectBox

This type of Form control is similar to the HTML Select Box and the ComboBox control.

<select
    id="floor"
    data-hf-control="SelectBox"
    data-hf-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 the 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 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(value: string) => void

persistent​

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

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".

<select
    id="floor"
    data-hf-control="SelectBox"
    data-hf-options="{
    label: 'Floor',
    defaultValue: '1',
    required: true,
    copyValueFrom: 'floor_2'
}"
>
    <option> </option>
    <option value="1">1st floor</option>
    <option value="2">2nd floor</option>
</select>
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

​

For each SelectBox there are two value pairs stored:

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