> For the complete documentation index, see [llms.txt](https://academy.any2info.com/any2info-academy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/application-design/forms/supporting-footer-tools/tree.md).

# Tree

**Category:** Footer

**Version:** 1.0

**Last updated:** May 21, 2026

**Author**: Any2Info

***

### Description

The Tree footer is a mini designer available in the Forms Designer and Dashboard Designer. It is used to create, edit and delete tree definitions.

A tree definition is very similar to a list definition as described in the List footer documentation. The main difference is that tree items can contain sub items, allowing the creation of hierarchical structures instead of a single flat list.

Tree definitions are only usable by controls or fields that support tree structures.

The Tree footer supports two different modes:

* Manual
* Dataclip

AI mode is not supported.

***

### Manual Mode

Manual mode behaves similarly to the manual mode of the List footer.

In this mode a tree structure is manually created by defining tree items. Each tree item consists of:

* A name
* A translated display name using a display text
* An optional color

Unlike normal lists, tree items can contain child items. This allows the creation of multiple nested hierarchy levels.

This mode is commonly used for static hierarchical structures that are not data driven or dependant on external sources.

Example:

```
Products
├── Electronics
│   ├── Phones
│   └── Laptops
└── Furniture
    ├── Tables
    └── Chairs
```

***

### Dataclip Mode

Dataclip mode behaves similarly to the dataclip mode of the List footer.

In this mode a dataclip is chosen. From this dataclip a single header can be selected which will be used as the display value for each tree item.

Optionally a color header can be chosen which will hold the color for each tree item.

An additional parent header must also be selected. This value is used to determine the parent-child hierarchy for each tree item and is what allows the creation of the tree structure.

This mode is commonly used for dynamic hierarchical structures that are data driven or dependant on external sources.

***

#### Barcode Support

Barcode values are only available in **Dataclip mode**.\
This functionality is commonly used together with scanning-related features.

An optional barcode header can be used to assign barcode values for each tree item.

***

#### Dataclip Filtering

Filtering is only available in **Dataclip mode** because the tree contents are data-driven.

Filtering can be performed using:

* Linked fields
* Variable-based filters

**Variable-Based Filters**

Variable-based filters allow filtering based on runtime variables and comparison operators.

Example:

* A user has an authorization level stored in a variable.
* The dataclip contains a minimum authorization level per item.
* A filter can be configured to only show items where the user's authorization level is greater than or equal to the item's required level.

This allows dynamic and context-sensitive tree generation.

***

### Configuration Options

| Setting        | Required            | Description                                               |
| -------------- | ------------------- | --------------------------------------------------------- |
| Mode           | Yes                 | Determines whether the tree uses Manual or Dataclip mode. |
| Name           | Yes                 | Internal name of the tree definition.                     |
| Display text   | No                  | Translated display value shown to users.                  |
| Color          | No                  | Optional color assigned to a tree item.                   |
| Dataclip       | Yes (Dataclip mode) | Datasource used for generating the tree structure.        |
| Display header | Yes (Dataclip mode) | Header used as the display value for tree items.          |
| Parent header  | Yes (Dataclip mode) | Header used to determine the parent-child hierarchy.      |
| Color header   | No (Dataclip mode)  | Optional header containing colors for tree items.         |
| Barcode header | No (Dataclip mode)  | Optional header containing barcode values for tree items. |

***

### Usage

The Tree footer is used whenever hierarchical data structures are required inside forms or dashboards.

Typical use cases include:

* Product category structures
* Department hierarchies
* Navigation trees
* Folder structures
* Hierarchical filtering
* Asset grouping

***

### Tips & Best Practices

* Keep hierarchy structures logically organized.
* Avoid excessively deep nesting levels.
* Use consistent naming conventions.
* Use colors consistently to improve readability.
* Use dataclip mode whenever the hierarchy depends on external data.

***

### Common Issues

| Issue                                    | Cause                                 | Solution                                           |
| ---------------------------------------- | ------------------------------------- | -------------------------------------------------- |
| Tree items appear in the wrong hierarchy | Incorrect parent header configuration | Verify the configured parent header values.        |
| Missing child items                      | Broken datasource hierarchy           | Verify the parent-child relations in the dataclip. |
| Incorrect display values                 | Wrong display header selected         | Verify the configured display header.              |
| Structure becomes difficult to navigate  | Excessive nesting                     | Simplify the hierarchy structure.                  |

***

### Changelog

| Version | Date         | Change                               |
| ------- | ------------ | ------------------------------------ |
| 1.0     | May 21, 2026 | Initial documentation version added. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/application-design/forms/supporting-footer-tools/tree.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.