D3TreeView
Overview
Add a fancy fully interactive TreeView based on the powerfull D3 library to your Mendix page.
Documentation
Description
Add a fancy fully interactive TreeView based on the powerfull D3 library to your Mendix page.
Typical usage scenario
When a visual representation of some hierarchy of objects is needed, i.e a family tree.
Features and limitations
- drag and drop support
- zooming
- on click microflow
- collapse/expand of full Tree
- heaps of styling options.
Dependencies [optional]
- Mendix 6
Installation
The easiest way of implementing is by having a look at the D3TreeView_DemoProject. In this project a fully working demo of a family tree is provided, with all the necessary microflows configured already.
Configuration
If going without the DemoProject, then here are the steps for implementation
Step 1: Create a non-persistent TreeViewWidgetObject entity and associated to it with a 1 - many relation the NodeObject entity. The NodeObject entity should have at least three attributes: Name (String), Updated (boolean) and _ID (integer)
Step 2: Add a dataview to your page, populated by a datasource microflow that creates this TreeViewWidgetObject entity.
Step 3: Configure the widget
Data Source:
Node Entity: The entity returned by the get TreeView nodes microflow. This is the entity that will be used to construct the nodes in the TreeView. In the proposed domain model it is the non-persisten Node Object entity;
Name Attribute: The attribute used for the name of the nodes displayed in the tree.
Update Attribute: The attribute used for marking node objects as updated when drag and drop is enabled. This makes it easier to filter the objects that are changed in the widget, hence need a change and commit in the save microflow.
Parent Reference: The parent reference, often a self reference on the data entity.
Save TreeView Nodes MF: The microflow to pass the changed node objects to. Updated nodes from the GUI are marked with updated=true. See D3TreeView_DemoProject for more info. Inputparameter: TreeViewWidgetObject, output: boolean
Get TreeView Nodes MF: The microflow which creates all (non-persistent) node objects to be displayed in the tree, based on the actual database object (TreeEntity in demo project). Inputparameter: TreeViewWidgetObject, output: List of NodeObjects
Interaction:
Zoom Enabled: Whether an end-user is able to zoom in and out.
Drag Drop Enabled:Whether an end-user is able to drag and drop nodes in the tree.
CollapseExpandAll Enabled: Whether an end-user is able to collape and expand the full tree.
On Click MF: The microflow to execute on click. If a microflow is chosen here, drag and drop will not work. Inputparameter: NodeObject, output: boolean
Appearance:
Height: The minimum height of the widget on the screen
Width: The minimum width of the widget on the screen
H Node Distance: The horiontal distance between nodes on next level, so same vertical position.
V Node Distance: The horiontal distance between nodes on next level, so same vertical position.Duration: The duration of the animation in ms. So, 1000 is 1 second.
Buttons Below TreeView: Whether the buttons for save, collapse/expand will be positioned above (Yes) or below (No) the TreeView.
Formatting:
Many options, should be clear from Modeler already. The ghost nodes are the nodes that will be shown in drag and drop modus whilst dragging. All other nodes where the dragged node can be put on, will get a ghostly glowing area around them.