Overview

Demo for the React Complex Tree module. It also contains utility flows which make it much easier to support advanced cases like lazy load and drag/drop support

Documentation

Description

Demo app for the React Complex Tree module

Typical usage scenario

This demo app helps you get started creating tree views without reinventing the wheel.

Especially the advanced cases like lazy loading and drag/drop support can be challenging.

You can use the ReactComplexTreeUtils module in the app as starting point for your development.

The main use case for the widget is a tree where the number of levels is not fixed beforehand. The demo has several utility flows to get the parent part or all children in a sub branch of the tree.

Features and limitations

The demo app implements all features of the widget. (It actually is the test app used for developing it.)

• Show data in a tree
• Lazy loading
• Drag items to move or reorder them
• Allow users to rename an item in the tree
• React to click and selection events
• Signal the widget to expand a node into view
• Contains an example of the REST service to get data
• Contains utility microflows that help traversing the tree and keep track of the parent and child relations.

There are demo's for all features of the tree widget so it is best to first start playing with the demo's to get familiar with the widget.

Especially handling drag/drop with all the features like dropping between nodes is a challenge to get right. This demo has a working example.

You can take the ReactComplexTreeUtils module from the demo and use the reusable content in your own modules. That provides a running start.

Configuration

The demo shows all configuration options in the various demo pages.

Loading data

Everytime the data changed date is updated, the widget will call the REST service. The details of the service call are documented in the module documentation in the Marketplace. This demo has implementations for a full reload, update or only expanding or focusing a node.

Note that the widget can request a full reload using URL parameter fullreload=true

The microflow handling the service call needs to implement this parameter to prevent refresh issues where the tree is no longer visible

Demo Entities

Context entity

The widget needs a context entity. Entity UserContext in the demo is used as context for the widget.

DataChangedDate: Everytime the date changes the widget will call the REST service.

SelectionChangedEventNodeIDs: When the user selects one or more nodes, widget sets the IDs on this attribute as comma separated value. It then calls the selection changed action.

MissingNodesEventNodeIDs: Used for lazy loading. When the user expands a node for which the child nodes have not been loaded yet, the widget sets the IDs on this attribute as comma separated value. It then calls the missing nodes action.

RenamedNodeID and NewName: When the user renames a node by typing a new name in the tree, the widget sets the ID of the node and the new name in the attributes and calls the node renamed action.

TreeContainer entity

This entity owns all the nodes for a tree structure. It also has an association to the root node. When retrieving nodes to get data or process events, node IDs must always be retrieved relative to the TreeContainer object.

Node entity

A node represents one item in the tree. It has a relation to its parent through the self-reference. It also has flags whether the node may be dragged or renamed.

When drag/drop is enabled, the DragType states which type a node really is and the AcceptDragTypes attribute can hold one or more DragType values to filter the node types that may be dragged on the node.

There currently is no way in the widget to prevent the rename for a node for which this is not allowed. The microflow that handles the rename simply reverts the change by updating the tree with the database value.

Dependencies

• Mendix 9.24.10 or higher

Installation

Start a new app using this demo.