Tree View

Content Type: Widget
Categories: User Interface

Overview

Use this widget to show a Tree in your application. Use hierarchies based on sets of child nodes or nodes with a parent, and the widget will sort out how to render the structure.

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