Version: 9.4

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-win-control="HFWinJSCtrl.DropDownList" 
    data-win-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',
        mapping: true 
    }"></div>

external datasource (URL):

<div id="tab1_dropdownlist" 
    data-win-control="HFWinJSCtrl.DropDownList" 
    data-win-options="{
        label: 'DropDownList (HFSql Catalogs)',
        list: true,
        mapping: 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-win-control="HFWinJSCtrl.DropDownList" 
    data-win-options="{
        label: 'DropDownList (HFSql Catalogs)',
        list: true,
        mapping: 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-win-control="HFWinJSCtrl.DropDownList" 
    data-win-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>

Property	Type	How to use	Description
autoBind	Boolean	`autoBind: false`	Controls whether to bind the control to the data source on initialization. Default value is `true`. Use `false` if you use in multiple controls the same data source. This reduces server requests.
dataSource*	JSON Pseudo Array	`dataSource: [{name: 'Bauer, F', code: 'Bauer, F'}, {name: 'Gruber, P', code: 'Gruber,P'}]`	Provide the data for the drop down selection formatted like a JSON Array inside your template
checkValueInitially	Boolean	`checkValueInitially: true`	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. The default value is true.
dataTextField	String	`dataTextField: 'name'`	Define the key of the key-value pair.
dataValueField	String	`dataValueField: 'code'`	Define the value of the key-value pair.
defaultValue	String/Function	`defaultValue: 'Title1',`	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.
disabled	Boolean	`disabled: true`	Set "true" whenever the DropDownList should be disabled. The default value is false.
doNotCopy	Boolean	`doNotCopy: true`	Set "true" whenever the field should get deleted if form is copied.
formControlMapping	Object	`{ example_id: 'example_key' }`	Define a mapping object to copy fields from the selecetd dataItem to given form controls. `more infos`
i18nDataTextField	JSON Array	`{ en: 'Streetname', de: 'Strassenname', default: ‘Streetname' }`	Use the i18nDataTextfield instead of teh dataTextfield to use multilingual catalogs in addition to the translation.json file.
label	String	`label: 'Technician'`	Define a label for your control element.
list	Boolean	`list: true`	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.
listOptions	Object	`listOptions: {...}`	Set additional options for controls with `list` equals `true`. E.g. set custom label for filter/sort/group dialogs or hide them complettely.
mapping	Boolean	`mapping: true`	Set "true" whenever the form element should be visible / editable in the corresponding HFSql server list list.
minLength	Number	`minLength: 3`	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.
optionLabel	String	`optionLabel: 'Please select ...'`	Define a placeholder text for the DropDownList.
optionTemplate	String	`optionTemplate: '<span class="default-option-label">label</span>'`	Define a placeholder template for the DropDownList.
persistent	String	`persistent: 'user'`	The value "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.
required	Boolean	`required: true`	Set "true" if the control has to be filled in.
tooltip	String	`tooltip: 'Please indicate at least one cause of damage.'`	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.
template	String	`template: '\#: Streetname # <small>(#: PLZ # #: Postort #)</small>',`	Define the formatting of the DropDownList values for display e.g. combining one or more columns of the datasource for single selection. Important: Have to return string inside a wrapping `<span>` element.
typeAhead	Boolean	`typeAhead: false,`	Enable/Disable filter for DropDownList. Default is `true`.
url	String	`url: '/api/catalogs/Items?$select=Title,KatalogText&$orderby=Title'`	The URL must be a HFSql server relative URL. For instance, the oData link to a HFSql server list.
valueTemplate	String	`valueTemplate: '\<strong>#: Streetname #</strong> <small>(#: PLZ # #: Postort #)</small>'`	Define the formatting of the DropDownList values for saved value e.g. combining one or more columns of the datasource for single selection
valueMapperDelay	Boolean	`valueMapperDelay: true`	Add a delay to the Kendo ValueMapper. Useful for very large catalogs.
visiting	Boolean	`visiting: true`	Set "true" whenever the form element should be marked as "visited" when the user has clicked or tapped at the form element.field.
onChanged	Function(value: string, text: string)	`onChanged: HFFormdefinition.Namespace.Method`	Call a pre-defined JS-method to do something when the status of the control changes

* These options are required.

listOptions Object

Property	Type	How to use	Description
dialogText	String	`dialogText: 'Display Text'`	Set custom label for filter/sort/group dialogs.
dialogHide	Boolean	`dialogHide: true`	Hide field from filter/sort/group dialogs.

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.

Every value change the specified data source entries are copied to the given form controls.

<div id="exmaple_mapping" 
    data-win-control="HFWinJSCtrl.DropDownList" 
    data-win-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-win-control="HFWinJSCtrl.DropDownList" 
    data-win-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,
        mapping: 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"
}

DropDownList

listOptions Object​

formControlMapping​

Stored data​

listOptions Object

formControlMapping

Stored data