Version:

Icon of a magnifying glass.
  Edit on GitHub

IN THIS ARTICLE

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:

  1. 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:

Relevant Qt documentation includes the following topics: