O3DE UI Tree View Component

With the tree view component, users can navigate file system directories or a list of hierarchical data in O3DE. Each item, such as a node or a branch, can have sub-items. Items can be expanded to reveal sub-items.

The tree view component is often used in the following scenarios:

Show system or predefined contents, such as the settings in Inspector or system settings page.
Show user created contents, such as in File Directory or Outliner.

Example from O3DE Asset Browser:

component tree view example

Usage guidelines

Follow these guidelines as you design your UI with tree views:

When the tree hierarchy is anticipated to be deep, such as a tree view used in file directories, it is suggested to add a file path to help users know where they are in the path.

Basic tree view

component tree view basic

Create a simple tree view, with support for showing branch lines.

Example

#include <AzQtComponents/Components/Widgets/TreeView.h>
#include <QTreeView>

// Create the tree view.
auto treeView = new QTreeView(parent);

// Set the model on the tree.
treeView->setModel(new MyModel);

// Set a BranchDelegate to support branch lines in your tree view.
treeView->setItemDelegate(new AzQtComponents::BranchDelegate());

// Show the connecting branch lines.
AzQtComponents::TreeView::setBranchLinesEnabled(treeView, true);

C++ API reference

For details on the tree view API, see the following topic in the O3DE UI Extensions C++ API Reference:

AzQtComponents::TreeView

Relevant Qt documentation includes the following topics: