Tree View

Category: Widgets
Subcategory: Display widgets

Overview

Do you need to show a Tree in your application, hierarchical data? This can be achieved by using the Tree View widget. It gives you the ability to use a hierarchies that use either sets of child nodes, or nodes with a parent. The widget itself will sort out how to render the structure. Please read the documentation, look at the demo and check the screenshots for further explanation

Documentation

Demo urlhttps://treeview-react-sandbox.mxapps.io/

Apache License Support WM Studio GitHub release GitHub issues Available

Tree View for Mendix

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

logo

Show a Tree structure in your Mendix project

screenshot

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

settings

2. Data

settings

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

3. Relation

settings

4. UI

settings

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

5. Drag & Drop

settings

  • 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)

settings

  • 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

settings

Demo project

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

Domain model

domain

  • 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

Releases

Version: 1.4.0
Framework Version: 8.0.0
Release Notes: - Make widget MX9 compatible (remove deprecated methods, update widget-utils) - Add state management (keep tree state in browser storage, either session or localstorage) - Add external method to select a node
Version: 1.3.0
Framework Version: 8.0.0
Release Notes: - Add class name to node (see: https://treeview-react-sandbox.mxapps.io/p/ui-class)
Version: 1.2.0
Framework Version: 8.0.0
Release Notes: - Rewrote parts to make the perform better when loading large trees - Implemented Ant.Design V4, major improvements compared to V3 - Added ability to show tree lines
Version: 1.1.1
Framework Version: 8.0.0
Release Notes: - Update TemplateComponent to `react-mustache-template-component@1.0.0`
Version: 1.1.0
Framework Version: 8.0.0
Release Notes: - Add onClick selection class