Tree element type: Table

In addition to the default view, the tree component also offers a tabular display type (Properties rubric 'Common'/'Display type'/'Table').

►NOTE◄ Data for the sample content shown here corresponds to the sample data of the Tree element article.

images/download/attachments/30670921/image2019-2-11_7-32-54-version-1-modificationdate-1549866773000-api-v2.png

In the table form, the tree component offers the possibility to display more information per item by defining additional columns.
This is done with the help of the columns list in the property editor in the 'Tree' section.

images/download/attachments/30670921/TreeColumns-version-1-modificationdate-1549871131000-api-v2.png

The created columns can be reordered in the list via drag & drop and configured by double-clicking on the column entry or by selecting it in the element tree.
The first column is always the 'tree column', which also represents the selection boxes, the icon and the fold-out buttons.
However, the displayed icon is not defined via the column, but analogous to the standard display via the tree settings.
Labels, on the other hand, are defined individually per column via their label expression (see also the following note).

►NOTE◄ Analogous to the grid column, tree columns also read their content primarily from their specified data field. If no label expression is specified, an attempt is made to convert the data hidden behind the data field into text.

Column settings

images/download/attachments/30670921/image2019-2-11_11-29-55-version-1-modificationdate-1549880995000-api-v2.png

The values of the column are obtained from the specified data field (heading: 'Common').

images/download/attachments/30670921/image2019-2-11_11-30-57-version-1-modificationdate-1549881057000-api-v2.png

The optional label expression allows the values of several data fields to be concatenated into a new text.

Example: Icon of "{key}" is "{icon}":

►NOTE◄ key and icon are references to the data field of the table and to the key in the data structure of the items, respectively.

images/download/attachments/30670921/image2019-2-11_11-31-58-version-1-modificationdate-1549881118000-api-v2.png

Further support features for text output and manipulation can be found in the following article: PARSE.

images/download/attachments/30670921/image2018-5-8_15_54_48-version-1-modificationdate-1549880449000-api-v2.png

Defines the text alignment of the cells in a column. The possible options are:

  • Left-sligned (default)

  • Centered

  • Right-aligned

images/download/attachments/30670921/image2018-5-8_16_6_26-version-1-modificationdate-1549880449000-api-v2.png

Defines whether the content of a cell should be evaluated as HTML markup. Security-related parts, such as scripts, are removed.

Application example:
A link is displayed with the help of the label expression, which directs the user to an external page and passes the ID of the entry as a parameter.


images/download/attachments/30670921/image2019-2-11_11-34-49-version-1-modificationdate-1549881289000-api-v2.png
images/download/attachments/30670921/image2018-5-8_16_6_26-version-1-modificationdate-1549880449000-api-v2.png


Result:

images/download/attachments/30670921/tree_link-version-1-modificationdate-1549881501000-api-v2.png