TreeView

The TreeView control enables you to display complex dataSources/catalogs in a hierarchical view and offers the possibility to select and store multiple values as well as the hierarchical path of the values.

Info

The catalogs must be valid and compatible JSON represenations.

Note

If you develop locally in the FormDev environment it´s best to paste the full catalog URL including the "hierarchy" part (eg. https://exampleserver.hybridforms.net/api/catalog/TreeviewCatalog/hierarchy) in your browser and add the resulting JSON response as local file to your formDefinition folder.

Minimum configuration:

<div id="treeview_minimum"
    data-win-control="HFWinJSCtrl.TreeView"
    data-win-options="{ 
        label: 'TreeView',   
        url: '/api/catalog/Hierarchietest/hierarchy',
        treeviewCtrlOptions: {
            dataTextField: 'Text',
            dataValueField: 'ID',
        },
        selectCtrlOptions:{
            placeholder: 'Open tree',
        }
    }"></div>

Complex configuration:

<div id="treeview_complex"
    data-win-control="HFWinJSCtrl.TreeView"
    data-win-options="{ 
        label: 'TreeView',
        multiselect: true,      
        url: '/api/catalog/Hierarchietest/hierarchy?start=0001&maxlevel=3&sort=Text&select=Text,ID',
        treeviewCtrlOptions: {
            checkboxes: {
                checkChildren: true
            },
            dataTextField: 'Text',
            dataValueField: 'ID',
            selectOnlyLeaves: true,
        },
        textValueCallback: HFFormdefinition.QAFormHelpers.getTreeViewTextTemplate,
        selectCtrlOptions:{
            placeholder: 'Open tree',
        },
            onChanged: HFFormdefinition.QAFormHelpers.onTreeViewChange
    }"></div>

Info

The TreeView control currently supports only a via URL provided datasource.

Property	Type	How to use	Description
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
label	String	label: 'TreeView'	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.
multiselect	Boolean	multiselect: true	Set "true" whenever the user can select more than one value. Default setting is false.
selectCtrlOptions: {placeholder: '...'}	JSON Array	selectCtrlOptions: {placeholder: 'Open tree'}	Define a placeholder value - this option is obligatory.
url	String	url: '/api/catalog/Hierarchietest/hierarchy'	The URL must be a HFSql server relative URL. For instance, the oData link to a HFSql server list. Note: The url has to contain '/hierarchy' to obtain the hierarchical catalog.
?start=0001	String	url: '/api/catalog/Hierarchietest­/hierarchy?start=0001'	Define the start node inside the catalog to reduce the provided items.
?maxlevel=3	String	url: '/api/catalog/Hierarchietest/hierarchy?maxlevel=3'	Define the nodes depth (levels) of the presented catalog to reduce the provided items for example show only items of the first three levels.
?sort=ID	String	url: '/api/catalog/Hierarchietest/hierarchy?sort=ID'	Define a sort criterion according to which the items are sorted in ascending order. These sort values are used to build up the "sortpath".
?select=Text,ID	String	url: '/api/catalog/Hierarchietest/hierarchy?select=Text,ID'	Define the columns to be included in the query. Not defined the complete catalogs is queried.
textValueCallback	Function(nodeVal: string, node: any)	textValueCallback: NameSpace.getTreeViewTextTemplate	Provide a method to configure the text value, for example show the complete path of the selected item (node).
treeviewCtrlOptions	JSON Array	treeviewCtrlOptions: { ... }	This array contains the options to configure the selection behaviuor of the node and its children. Default setting is no simultaneous selection of children.
treeviewCtrlOptions: {checkboxes: {..}}	JSON Array	checkboxes: { checkChildren: true } }	Set the option checkChildren to true, if you want to select all the children of a node simultaneously.
treeviewCtrlOptions: {dataTextField: 'Text'}	JSON Array	dataTextField: 'Text'	Provide the catalog column name of the text value of the items.
treeviewCtrlOptions: {dataValueField: 'ID'}	JSON Array	dataValueField: 'ID'	Provide the catalog column name of the unique identifier (i.e.: ID or Title) of the items.
treeviewCtrlOptions: {selectOnlyLeaves: true}	JSON Array	selectOnlyLeaves: true	Set the option to true to restrict the selection to the "leaves" (i.e. the end nodes of the tree). Default setting is false.
onChanged	Function(value: { id: string, text: string }[])	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes (optional)

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.

Stored data

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

First the information for the TreeView itself

{
    "id": "treeview",
    "value": "0009"
}

and second for the selected value:

{
    "id": "treeview_HFText",
    "value": "Punkt 3"
}