Skip to main content
Version: Upcoming 🦄

DropDownList

The new control is an alternative to the Control "ComboBox". The values of the control "DropDownList" can be provided as static datasource (data formatted as JSON Array inside your Template) or by an external datasource e.g. by referencing a HFSqlServer list by linking to the URL or by providing an oData source as known of the ComboBox control.

static datasource:

<div
    id="technician"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'Technician',
        required: true,
        optionLabel: 'Please select the responsible technician',
        dataSource: [
            { name: 'Bauer, F', code: 'Bauer, F' },
            { name: 'Gruber, P', code: 'Gruber, P' },
            { name: 'Lanner, G', code: 'Lanner, G' },
            { name: 'Simon, R', code: '3521' },
            { name: 'Herbert, W', code: '123456789012' }
        ],
        dataTextField: 'name',
        dataValueField: 'code'
    }"
></div>

external datasource (URL):

<div
    id="tab1_dropdownlist"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'DropDownList (HFSql Catalogs)',
        list: true,
        minLength: 3,
        url: '/api/catalogs/Items?$select=Title,KatalogText,Streetname&amp;%24orderby=Title,PLZ&amp;%24top=1000',
        defaultValue: 'Title1',
        dataTextField: 'KatalogText',
        dataValueField: 'Title',
        template:  '\#: Streetname # <small>(#: PLZ # #: Postort #)</small>',
        valueTemplate: '\<strong>#: Streetname #</strong> <small>(#: PLZ # #: Postort #)</small>',
    }"
></div>

multilingual external datasource (URL):

<div
    id="tab1_dropdownlist"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'DropDownList (HFSql Catalogs)',
        list: true,
        minLength: 3,
        url: '/api/catalogs/Items?$select=Title,KatalogText,Streetname,Strassenname&amp;%24orderby=Title,PLZ&amp;%24top=1000',
        i18nDataTextField: {
            en: 'Streetname', 
            de: 'Strassenname',
            default: 'Streetname'
        },
        dataValueField: 'Title',
        template:  '\#: Streetname # <small>(#: PLZ # #: Postort #)</small>',
        valueTemplate: '\<strong>#: Streetname #</strong> <small>(#: PLZ # #: Postort #)</small>',
    }"
></div>

external datasource (OData):

<div
    id="liveOdataSource"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'DropDownList with live OData source',
        required: true, 
        dataTextField: 'KatalogText',
        dataValueField: 'Title', 
        autoBind: false,
        dataSource: {
            type: 'odata',
            transport: {
                read: {
                    url:'https://example.com/liveOdataSource/?select=Title,KatalogText&orderby=KatalogText',
                    dataType: 'json',
                    headers: {
                        'Accept': 'application/json;odata=verbose'
                    }
                }
            }
        }
    }"
></div>

FormControl Options​

Options of the kendo component are also available. read more

dataTextField - required​

Define the key of the key-value pair.
How to use:
dataTextField: 'name'
Type: string

dataValueField - required​

Define the value of the key-value pair.
How to use:
dataValueField: 'code'
Type: string

autoBind​

Controls whether to bind the control to the data source on initialization. Use false if you use in multiple controls the same data source. This reduces server requests.
How to use:
autoBind: false
Type: boolean
Default: true

checkValueInitially​

Stored values gets initially checked if they are contained in the data source that is defined on the control. In certain scenarios this is not desireable.
How to use:
checkValueInitially: true
Type: boolean
Default: true

dataSource​

Provide the data for the drop down selection formatted like a JSON Array inside your template
How to use:
dataSource: [{name: 'Bauer, F', code: 'Bauer, F'}, {name: 'Gruber, P', code: 'Gruber,P'}]
Type: json pseudo array

defaultValue​

Define the value selected in newly created Forms. Note: This must be the appropiate dataValueField value. A Custom Code function can be used to set defaultValue.
How to use:
defaultValue: 'Title1',
Type: string | function
Signature: function() => string

disabled​

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

filterItems​

Define the filtering options for the DropDownList. Can be used to search the list in more than one datasource column. A field entry is required. The operator's default entry is contains. More infos
How to use:
[{ field: 'name', operator: 'contains' }, { field: 'address' }]
Type: { field: string; operator?: string; }[]

formControlMapping​

Define a mapping object to copy fields from the selecetd dataItem to given Form controls. More infos
How to use:
{ example_id: 'example_key' }
Type: IFormControlMapping

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

highlightTemplate​

Define the highlight format for filtered results of the DropDownList popup. Accepts a kendo template. Important: kendo templates use highlight as default placeholder for the highlighted text.
How to use:
highlightTemplate: '<strong>#: highlight #</strong>'
Type: string

i18nDataTextField​

Use the i18nDataTextfield instead of the dataTextfield to use multilingual catalogs in addition to the translation.json file.
How to use:
{ en: 'Streetname', de: 'Strassenname', default: ‘Streetname' }
Type: { default: string, [langCode: string]: string }

itemTemplate​

Define the formatting of the DropDownList values for display e.g. combining one or more columns of the datasource for single selection. Accepts a kendo template or a function returning a string. Important: Have to return string inside a wrapping element. Unless template option, itemTemplate keeps the original filter highlighting.
How to use:
itemTemplate: '<span>#: entry1 # - #: entry2 #</span>'
Type: string | function
Signature: function(item: any) => string

label​

Define a label for your control element.
How to use:
label: 'Technician'
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 }

minLength​

The minimum number of characters the user needs to type before a search is performed. Set a higher value than 1 whenever the search could match a lot of items.
How to use:
minLength: 3
Type: number

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: string, text: string }) => void

optionLabel​

Define a placeholder text for the DropDownList.
How to use:
optionLabel: 'Please select ...'
Type: string

optionTemplate​

Define a placeholder template for the DropDownList.
How to use:
optionTemplate: 'label'
Type: string

persistent​

It is the value where the "user" sets the initial selected value of the DropDownList 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

typeAhead​

Enable/Disable filter for DropDownList.
How to use:
typeAhead: false,
Type: boolean
Default: true

url​

The URL must be a HFSql server relative URL. For instance, the oData link to a HFSql server list.
How to use:
url: '/api/catalogs/Items?$select=Title,KatalogText&$orderby=Title'
Type: string

valueMapperDelay​

Add a delay to the Kendo ValueMapper. Useful for very large catalogs.
How to use:
valueMapperDelay: true
Type: boolean

valueTemplate​

Define the formatting of the DropDownList values for saved value e.g. combining one or more columns of the datasource for single selection.
How to use:
valueTemplate: '#: Streetname # (#: PLZ # #: Postort #)'
Type: string

visiting​

Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form element 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
Note

Please follow the conventions to build an oData Source Link by considering the following documentations:

formControlMapping

​

The mapping objects consists of keys which are the Form control ID's to copy to and the value which can be a data source key or an object with the data source key and a format function.

By every value change the specified data source entries are copied to the given Form controls.

<div
    id="exmaple_mapping"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'Example',
        url: '/api/catalogs/Example?$select=Text,Value,Description,Date',
        dataTextField: 'Text',
        dataValueField: 'Value',
        formControlMapping: {
            description: 'Description',
            date_picker: {
                key: 'Date',
                callback: HFFormdefinition.ExampleNamespace.formatDateFunc
            }
        }
    }"
></div>
type FormControlMappingType = {
    key: string;
    callback: (dataItem: any, dataKey: string) => any;
};

interface IFormControlMapping {
    [id: string]: string | FormControlMappingType;
}

Stored data

​

<div
    id="technician"
    data-hf-control="DropDownList"
    data-hf-options="{
        label: 'Technician',
        dataSource: [
            { name: 'Bauer, F', code: '1' },
            { name: 'Gruber, P', code: '2' },
            { name: 'Lanner, G', code: '3' },
            { name: 'Simon, R', code: '4' },
            { name: 'Herbert, W', code: '5' }
        ],
        dataTextField: 'name',
        dataValueField: 'code',
        required: true
    }"
></div>

For each DropDownList inside your Forms there are two value pairs of stored data:

First the information for the DropDownList itself...

{
    "id": "technician",
    "value": "3521"
}

...and second for the selected value:

{
    "id": "technician_HFDropDownListText",
    "value": "Simon, R"
}