Tree, Organogram, Pert diagram - TreeGraphWidgets collection

Content Type: Module
Categories: Visualization

Overview

The TreeGraphWidgets module contains three easy-to-use pluggable Mendix widgets for displaying data organized as a tree or chart.

This includes:

  • TreeList (tree data)
  • OrgCharg (organograms)
  • PertChart (Pert diagrams)

Documentation

https://youtu.be/Y3ueVhdmgaE
Demo urlhttps://breakdownstructure-sandbox.mxapps.io/

treeGraphWidgets

The TreeGraphWidgets module contains three pluggable Mendix widgets for displaying data organized as a tree or chart. This includes: OrgCharg (organograms), TreeList (tree data) and PertChart (Pert diagrams).

Features

General

The widgets take care of visualizing data for trees and graphs. This will give the developer full freedom to implement the business logic using the toolbox Mendix provides to build UI elements and logic.

OrgChart

Displays an organizational chart. Positions the nodes relative to their parent nodes. In case multiple root nodes are available in the dataset, the organizational chart of the first node in the data will be presented.

The widget supports panning, scrolling and zooming using the mouse.

TreeList

Displays hierarchical data in a tree list. Supports indentation of child nodes relative to their parent nodes.

PertChart

Displays a graph. Positions the nodes relative to their parent nodes.

The widget supports panning, scrolling and zooming using the mouse.

Usage

General

Tip: make use of the sample implementation included in the project

OrgChart

  • Create a domain model with an entity for the node
  • Add a self-association for the node entity to associate the node to its parent node
  • Add a unique identifier as a String attribute
  • Add a Boolean attribute to indicate if the node has focus
  • Add a Boolean attribute to indicate if the node's children should be displayed
  • Add the OrgChart Widget to a page
  • Configure the wizard
    • Set the height of the widget
    • Add a datasource for the nodes
    • Select the unique identifier as the Descriptor
    • Select the unique identifier of the parent node as the Parent association
    • Set the Boolean attribute to indicate if the node has focus
    • Set the Boolean attribute to indicate if the node's children should be displayed
    • Set the spacial attributes to define the size and spacing in the chart
    • Set the line type
    • Set a line style

TreeList

  • Create a domain model with an entity for the node
  • Add a self-association for the node entity to associate the node to its parent node
  • Add a unique identifier as a String attribute
  • Add a Boolean attribute to indicate if the node has focus
  • Add a Boolean attribute to indicate if the node's children should be displayed
  • Add the TreeList Widget to a page
  • Configure the wizard
    • Set the height of the widget
    • Add a datasource for the nodes
    • Select the unique identifier as the Descriptor
    • Select the unique identifier of the parent node as the Parent association
    • Set the Boolean attribute to indicate if the node has focus
    • Set the Boolean attribute to indicate if the node's children should be displayed
    • Set the indentation to use for child nodes

PertChart

  • Create a domain model with an entity for the node and an entity for the edges
  • Add two 1-* associations between node and edge (one to indicate the parent and one to indicate the child)
  • Add a unique identifier as a String attribute
  • Add a Boolean attribute to indicate if the node has focus
  • Add an Integer attribute to designate a column for the node (from left to right)
  • Add the PertChart Widget to a page
  • Configure the wizard
    • Set the height of the widget
    • Add a datasource for the nodes
    • Select the unique identifier as the Descriptor
    • Set the Boolean attribute to indicate if the node has focus
    • Set the Boolean attribute to indicate if the node's children should be displayed
    • Set the indentation to use for child nodes
    • Set the spacial attributes to define the size and spacing in the chart
    • Set the line type
    • Set a line style
    • Add a datasource for the edges
    • Select the unique identifier of the child node as the Child association
    • Select the unique identifier of the parent node as the Parent association

Demo project

https://breakdownstructure-sandbox.mxapps.io/ (demo_administrator, XhbOCrXTnkl2)

Issues, suggestions and feature requests

https://github.com/mwbouwkamp-mendix/treeGraphWidgets/

Development and contribution

Contact autor

Author

marco.bouwkamp@mendixlabs.com

Releases

Version: 1.2.1
Framework Version: 9.18.4
Release Notes: We fixed a language issue with the widget
Version: 1.2.0
Framework Version: 9.18.4
Release Notes: Improved zoom behavior for OrgChart and PertChart Improved performance and maintainability
Version: 1.1.2
Framework Version: 9.18.4
Release Notes: We added icons to the widgets We fixed the behavior when there is only one node to be displayed in OrgChart and PertChart We improved the behavior when setting focus to nodes in OrgChart and PertChart
Version: 1.1.1
Framework Version: 9.18.4
Release Notes: Fixed mpk file
Version: 1.1.0
Framework Version: 9.18.4
Release Notes: Release notes: * Fixed a bug in the placement of nodes in a Pert diagram, where nodes were superimposed on each other * Simplified domain model for the sample implementation (note: if you were building on top of the example implementation, this is a breaking change)
Version: 1.0.0
Framework Version: 9.18.4
Release Notes: Initial version for Mendix Marketplace containing OrgChart, TreeList and PertChart.