Context I have an administration Web-UI (implemented with vue and vuetify) where one should also be able to manage organization structures. Meaning something like Daimler AG -> Mercedes Benz AG -> Mercedes Benz Cars -> Mercedes Benz Factory Sindelfingen -> Production 9 -> ...
This is just an example I came up with right now, but I hope it gives you an idea. In theory, the tree can be as deep as the user wants it to be, so basically "endless" although it probably won't be deeper than 10 most of the time.
Now the tree should support CRUD and moving the nodes in the structure. This means a User should be able to create new organizational units, delete them and edit their data. Also, it should be possible to move a subtree to a different location. e.g.
A -> B -> C
-> D -> E
=> Move D to C
A -> B -> C -> D -> E
=> Move D to B
A -> B -> C
-> D -> E
=> Move E to A
A -> B -> C
-> D
-> E
Also moving nodes/subtrees should be also possible with drag & drop.
Looking at similar questions:
- How to best display this tree structure? The Solution presented here might look a bit chaotic with more Data. It works for navigations but I doubt it's good enough for Organizational structures. Also, the affordance for the drag & drop feature might not be apparent.
- https://ux.stackexchange.com/a/8074/130463 Most of the proposals in the answer here show a complicated graph that is difficult to implement, has a need for zooming in/out, has not enough space for information like name, brand emblems etc. The Miller Columns seem to only work with limited levels of trees (like 3-4 levels) before they run out of screen width
- What's the best way to view a deep hierarchy? The Windows Explorer or File Explorer is probably the thing that comes close to being a good solution for an organizational tree. However, here I wonder if the user then first associates the feature with a file explorer instead of an organizational management feature.
- https://ux.stackexchange.com/a/8075/130463 I can't envision how the first and the last one fit in and can support CRUD. Also I don't think zooming in is a good idea for an administration application. The second option looks the most promising for moving nodes one level. But it gets hairy if the user needs to move the node multiple levels.
In Summary, I think that the File Explorer and Treeview (the boxes) are the 2 most promising solutions with their own issues.
Abstraction & Question
How can I display a hierarchical tree-like structure that requires:
- Support for CRUD options
- Moving nodes and subtrees
- Moving nodes subtrees multiple levels
- Support a Minimum of 10 levels and a minimum of 10 children for each node.
- Support drag & drop
- Easy to understand and use
