D3TreeView

Content Type: Widget
Categories: User Interface

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

  1. drag and drop support
  2. zooming
  3. on click microflow
  4. collapse/expand of full Tree
  5. 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.

 

 

Releases

Version: 2.3.0
Framework Version: 9.6.6
Release Notes: Fixed node name position in rectangular scenario to be always inside the node
Version: 2.2.0
Framework Version: 8.12.5
Release Notes: - Removed deprecated usage of mx.ui - Added generic log node - Bugfix added missing on click support on parent node - Added possibility to add a css class to a node so it can be styled - Added nodeShapeRect attribute to being able to show nodes as rectangles in normal Tree View scenario
Version: 2.1.0
Framework Version: 7.13.1
Release Notes: Added on click microflow suppport for indented Tree View scenario
Version: 2.0.0
Framework Version: 7.13.1
Release Notes: Added support for Indented Horizontal TreeView. Added managing colors for expanded / collapsed parents and nodes without children Added showTopParent setting to cater for multiple topparents.