How to build Parent and Child Collection Elements / Tree View in Directus?

Question

Do you know a way to build parent-child-relations in Directus, ideally with some kind of tree display? Like, for example, to define category trees or page trees, with parent pages and child pages. It is a very common functionality in most of the famous CMS, and I wonder how to build that in Directus.

I've found the "Tree View" field, but I don't really understand how it works, there is no documentation on it and I get error messages like

{
  "errors": [
    {
      "message": "alter table `Unterkategorien` add constraint `unterkategorien_name_foreign` foreign key (`name`) references `Kategorien` (`id`) on delete SET NULL - ER_CANNOT_ADD_FOREIGN: Cannot add foreign key constraint",
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR"
      }
    }
  ]
}

Any hint is appreciated! Thanks!

Directus: 9.13.1 (self hosted on Ubuntu/Coolify) DB: MySQL 5.7

Answer 1

I've found a short video showing how to properly use the "Tree View" field: https://github.com/directus/directus/issues/14378#issuecomment-1181416141

In short, with tree view you need to choose the same collection and type in (not select!) a new field name for the foreign key (like, for example "parent").

You then should be able to select entries of the same collection within the edit form of one entry, thus in effect creating "children" of that entry. This is neatly represented also in the API and very helpful for building nested content.

I understand that it's still limited on the display end of things. A real tree view display is apparently on the Directus roadmap: https://directus.io/road-map/