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).
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.
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.
Displays hierarchical data in a tree list. Supports indentation of child nodes relative to their parent nodes.
Displays a graph. Positions the nodes relative to their parent nodes.
The widget supports panning, scrolling and zooming using the mouse.
Tip: make use of the sample implementation included in the project
- 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
- 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
- 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
https://breakdownstructure-sandbox.mxapps.io/ (demo_administrator, XhbOCrXTnkl2)
https://github.com/mwbouwkamp-mendix/treeGraphWidgets/
Contact autor