ComboBox

The values of the control "ComboBox" can be provided as static datasource (data formatted like a Json Array inside your template) or in case of a external datasource e.g. by referencing a SharePoint list by linking to the URL or by providing a oData source.

static datasource:

<div id="technician" 
    data-win-control="HFWinJSCtrl.ComboBox" 
    data-win-options="{
        label: 'Technician',
        required: true,
        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_combobox_liste" 
    data-win-control="HFWinJSCtrl.ComboBox" 
    data-win-options="{
        label: 'ComboBox (HFSql Catalogs)',
        list: true,
        mapping: true,
        minLength: 3,
        url: '/api/catalogs/CatalogName?$select=Title,KatalogText,PLZ,Postort&amp;%24orderby=Title,PLZ&amp;%24top=1000',
        template: HFFormdefinition.Namespace.setStreetTemplate,
        dataTextField: 'KatalogText',
        dataValueField: 'Title'
    }"></div>

multilingual external datasource (URL):

<div id="tab1_combobox_liste" 
    data-win-control="HFWinJSCtrl.ComboBox" 
    data-win-options="{
        label: 'ComboBox (HFSql Catalogs)',
        list: true,
        mapping: true,
        minLength: 3,
        template: HFFormdefinition.Namespace.setStreetTemplate,
        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'
    }"></div>

external datasource (oData):

<div id="liveOdataSource" 
    data-win-control="HFWinJSCtrl.ComboBox" 
    data-win-options="{
        label: 'Combobox 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
anytext	Boolean	anytext: false	Set "false" whenever free text input should be prevented. The default value is true.
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 text of the key-value pair.
dataValueField	String	dataValueField: 'code'	Define the value of the key-value pair.
disabled	Boolean	disabled: true	Set "true" whenever the ComboBox 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: 'PLZ', default: ‘Streetname' }	Use the i18nDataTextfield instead of the 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 "true" whenever the content should show up in the list on the dashboard.
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 SharePoint 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.
persistent	String	persistent: 'user'	The value "user" sets the initial selected value of the ComboBox to the value of the previous form item of the current user and overwrites any defaultValue.
placeholder	String	placeholder: 'Please select ...'	Define a placeholder text for the ComboBox.
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: HFFormdefinition.Namespace.setStreetTemplate	Call a pre-defined JS-method for formatting the ComboBox values e.g. combining one or more columns of the datasource for single selection. Important: Have to return string inside a wrapping <span> element.
url	String	url: '/_api/web/lists/getbytitle('SP')/Items?$select=Title&$orderby=Title'	The URL must be a server relative SharePoint URL. For instance, the oData link to a SharePoint list.
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 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:

• Working with lists and list items with REST
• Use oData query operations in SharePoint REST requests
• oData - the best way to REST

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.ComboBox" 
    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.ComboBox" 
    data-win-options="{
        label: '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',
        required: true,
        mapping: true     
    }"></div>

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

First the information for the ComboBox itself

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

and second for the selected value:

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