Tree View for Mendix

Mendix Tree View widget using Ant Design Table (MIT License).

Show a Tree structure in your Mendix project

See test-project https://treeview-react-sandbox.mxapps.io/ for a live demo! The test-project itself can be downloaded here

Missing features? See TODO at the bottom to see which items are still on the TODO list. If you find other bugs, please report this as an issue here

Features

• Display a tree structure in a tree view
• Data Sources: XPath, Microflow, Nanoflow
• Load a complete tree structure
• Two patterns: Node-Parent or Node-Children
• Load children over reference, xpath or nanoflow
• On Click events
• Drag & Drop (Node-Parent)
• State management (keep treestructure expansion in browser storage)
• Experimental Client side search (Only on loading a complete tree)

This widget is about 300Kb uncompressed, so in your cloud deployment this widget should take about 83 Kb of network resources

Tested:

• IE11 & Edge
• Chrome
• Firefox
• Safari

Basic Configuration

1. Data Source

2. Data

• You can choose to load a complete tree, or partial
• The rest of the settings are self-explanatory

3. Relation

4. UI

• Note: You can now also set the class name of a node with an attribute

5. Drag & Drop

• Drag & Drop is only enabled for objects with a parent relation
• The widget will do the changes on the object by itself

6. Search (experimental)

• This feature is highly experimental and might be subject to change in future releases
• It requires another helper entity, which will be used in calling a Nanoflow
• The helper entity has a reference set of all the objects that are loaded, and the search query. It is up to you to create a Nanoflow that returns a list of objects to be shown (act as a filter)

7. Misc

• This deals with state management and exposing an external method to select an item

8. Events

Demo project

https://treeview-react-sandbox.mxapps.io/

Domain model

• This is an example of the domain model used in our test-project
• Note: Only use one type of relation! Either Node-Parent or Node-Children! This domain model features both, as cwe reate two types of sets of nodes to show all capabilities

Issues, suggestions and feature requests

Please report your issues here

TODO

These are action items on the list for future releases

• WebModeler preview
• Draggable NodeChildren
• On DragChange mf/nf
• Automated unit tests & CI/CD pipeline

License

Apache 2