TreeView | X4Documentation

TreeView controls are used in detail components to structure data on any number of levels and to display it clearly in a tree structure.

TreeView controls can be used in all available layout types:

BoxLayout
FlowLayout
GridLayout
ResponsiveLayout
TabLayout

Note:

The <TreeView> element can include the following actions:

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

The following attributes can be defined for a TreeView control:

Attribute	Description
`background`	Defines a color for the background of the control. This setting overwrites the default color of the color scheme! This attribute doesn't work with the `Maps` and `HtmlDocument` controls! Possible values: hexadecimal color value, e.g., `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! color code from the color palette of the Web App (see Theming), e.g., `A200`
`disabled`	Defines if the user can interact with the control. Data binding (boolean) possible Possible values: `true`/`false` or data binding expression
`enabled`	Defines if the user can interact with the control. Data binding (boolean) possible Possible values: `true`/`false` or data binding expression
`fontFamily`	Defines the font family. This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font font code from the font palette, e.g., `Font04`
`fontSize`	Defines the font size. This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: any integer or decimal number with a dot as decimal separator, e.g., `20`; `20.8`; `.9` font size in pixels, e.g., `20px` font size in points, e.g., `18pt` font size compared to the font size of the parent element, e.g., `.8em` or `120` keywords: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Sets the width of the single characters. This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed`(default) `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute doesn't work with the `Image`, `Maps`, `Charts`, and `HtmlDocument` controls.
`fontStyle`	Defines the font style. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. This attribute overrides the default font weight of the Web App for this control. Possible values: `Black` (default) `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines a color for the foreground (texts, etc.) of the control. This setting overwrites the default color of the color scheme! This attribute does not work with the `Map` and `HtmlDocument` controls! Possible values: hexadecimal color value, e.g., `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! color code from the color palette of the Web App (see Theming), e.g., `A200`
`horizontalAlign`	Direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`icon`	Icon for the `TreeView` control Data binding with Base64 values possible Possible values: Base64-encoded graphic file path to a graphic file as a string (URI), e.g., `clock.png` specification of a material icon, e.g., `icon:extension` Use `CTRL`+`SPACE` to display an overview of the available icons. The selection may deviate from the actual Material Icons available. The graphic file must be included in the `Resources` folder of the Web App Project. The path is relative to the `Resources` folder. The material icon must be specified using the `icon` prefix, e.g., `icon:<MaterialIconName>`. This attribute cannot be used at the same time as `iconUrl`.
`iconColor`	Defines the icon color. Possible values: hexadecimal color value, e.g., `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! color code from the color palette of the Web App (see Theming), e.g.,`A200`
`id`	Specifies a unique identifier of the element. Possible values: expression for data binding (`String`, `Integer`)
`objectList`	Required. Source of the data. The number of entries defines the number of displayed elements. Possible values: expression for data binding (`List`)
`parentId`	Specifies a unique identifier of the parent element. Possible values: expression for data binding (`String`, `Integer`)
`textOverflow`	Defines what happens if the page is full. Possible values: `ellipsis`: show with … that the text is not finished (default) `hidden`: break off text, paying attention to whole words `wordBreak`: break off within the word `allow`: break off text between words
`title`	Title of the control Possible values: expression for data binding (`String`, `Date`, `DateTime`, `Integer`, `Decimal`)
`visible`	Defines whether the control is visible. Data binding (boolean) possible Possible values: `true`/`false` or data binding expression

Example

<?xml version="1.0" encoding="UTF-8"?>
<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 of the Process

The Technical Process loadTreeView.wrf mentioned in the above example generates the following 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>

The above code generates the following output in the Web App: