TreeView | X4Documentation

Mit <TreeView>-Controls können Sie Daten in Detail Components auf beliebig vielen Ebenen strukturieren und in einer Baumstruktur übersichtlich darstellen.

Hinweise zur Verwendung

Ein <TreeView>-Control wird mit dem Element <TreeView> erzeugt.

<TreeView>
...
</TreeView>

<TreeView>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <TreeView>-Controls definieren.

Hinweis:

Das Element <TreeView> kann folgende Aktionen enthalten:

<SelectAction/> (siehe Action "Select")
<DoubleClickAction/> (siehe Action "DoubleClick")

Attribut	Beschreibung
`icon`	Icon für das `<TreeView>`-Control Data Binding mit Base64-Werten möglich Mögliche Werte: Base64-kodierte Grafikdatei Pfad zu einer Grafikdatei als Zeichenkette (URI), z. B. `clock.png` Angabe eines Material Icons nach dem Muster `icon:<MaterialIconName>`, z. B. `icon:extension` Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon` angegeben werden, z. B. `icon:<MaterialIconName>`. Dieses Attribut kann nicht gleichzeitig mit `iconUrl` verwendet werden.
`iconColor`	Farbe des Icons Dieses Attribut wird nur für Material Icons verwendet. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200` Weitere Informationen finden Sie unter Theming.
`id`	Gibt einen eindeutigen Bezeichner des Elements an. Mögliche Werte: Ausdruck für Data Binding (`String`, `Integer`)
`objectList`	Erforderlich Quelle der Daten. Die Anzahl der Einträge definiert die Anzahl der angezeigten Elemente. Mögliche Werte: Ausdruck für Data Binding (`List`)
`parentId`	Gibt einen eindeutigen Bezeichner des übergeordneten Elements an. Mögliche Werte: Ausdruck für Data Binding (`String`, `Integer`)
`title`	Titel des Controls Mögliche Werte: Ausdruck für Data Binding (`String`, `Date`, `DateTime`, `Integer`, `Decimal`)

Beispiel

TreeView-Control in der Detail Component

XML

<DetailComponent xmlns="http://softproject.de/webapp/1.0" process="loadTreeView.wrf">
	<Properties>
		<Property name="TV_List" type="List">
			<Property name="id" type="String"></Property>
			<Property name="pid" type="String"></Property>
			<Property name="entryName" type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<Header value="TreeView in FlowLayout" />
		<FlowLayout>
			<TreeView objectList="#TV_List" id="#id" parentId="#pid" title="#entryName">
				<SelectAction componentName="Dashboard_Copy" />
			</TreeView>
		</FlowLayout>
	</FlowLayout>
</DetailComponent>

Output-Format des Prozesses

Der im Beispiel genannte Technical Process loadTreeView.wrf generiert folgenden Output:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<TV_List>
		<id>0-1</id>
		<pid>0</pid>
		<entryName>Root</entryName>
	</TV_List>
	<TV_List>
		<id>1-1</id>
		<pid>0-1</pid>
		<entryName>Entry 1 on first sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>1-2</id>
		<pid>0-1</pid>
		<entryName>Entry 2 on first sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>1-3</id>
		<pid>0-1</pid>
		<entryName>Sub-root</entryName>
	</TV_List>
	<TV_List>
		<id>2-1</id>
		<pid>1-3</pid>
		<entryName>Entry 1 on second sub-level</entryName>
	</TV_List>
	<TV_List>
		<id>0-2</id>
		<pid>0</pid>
		<entryName>Second root</entryName>
	</TV_List>
</Ok>