mendixlabs / mendix-tree-view Goto Github PK

View Code? Open in Web Editor NEW

4.0 2.0 3.0 2.73 MB

Show a Tree structure in a Tree View in Mendix

Home Page: https://appstore.home.mendix.com/link/app/112707/

License: Other

JavaScript 4.96% TypeScript 89.37% SCSS 5.67%

mendix-widget mendix react treeview ant-design

mendix-tree-view's Introduction

Tree View for Mendix

Mendix Tree View widget using Ant Design Table (MIT License).

Show a Tree structure in your Mendix project

See test-project https://treeview-react-sandbox.mxapps.io/ for a live demo! The test-project itself can be downloaded here

Missing features? See TODO at the bottom to see which items are still on the TODO list. If you find other bugs, please report this as an issue here

Features

Display a tree structure in a tree view
Data Sources: XPath, Microflow, Nanoflow
Load a complete tree structure
Two patterns: Node-Parent or Node-Children
Load children over reference, xpath or nanoflow
On Click events
Drag & Drop (Node-Parent)
State management (keep treestructure expansion in browser storage)
Experimental Client side search (Only on loading a complete tree)

This widget is about 300Kb uncompressed, so in your cloud deployment this widget should take about 83 Kb of network resources

Tested:

IE11 & Edge
Chrome
Firefox
Safari

Basic Configuration

1. Data Source

2. Data

You can choose to load a complete tree, or partial
The rest of the settings are self-explanatory

3. Relation

4. UI

Note: You can now also set the class name of a node with an attribute

5. Drag & Drop

Drag & Drop is only enabled for objects with a parent relation
The widget will do the changes on the object by itself

6. Search (experimental)

This feature is highly experimental and might be subject to change in future releases
It requires another helper entity, which will be used in calling a Nanoflow
The helper entity has a reference set of all the objects that are loaded, and the search query. It is up to you to create a Nanoflow that returns a list of objects to be shown (act as a filter)

7. Misc

This deals with state management and exposing an external method to select an item

8. Events

Demo project

https://treeview-react-sandbox.mxapps.io/

Domain model

This is an example of the domain model used in our test-project
Note: Only use one type of relation! Either Node-Parent or Node-Children! This domain model features both, as cwe reate two types of sets of nodes to show all capabilities

Issues, suggestions and feature requests

Please report your issues here

TODO

These are action items on the list for future releases

WebModeler preview
Draggable NodeChildren
On DragChange mf/nf
Automated unit tests & CI/CD pipeline

License

Apache 2

mendix-tree-view's People

Contributors

Stargazers

Watchers

Forkers

lilyyapinglang fossabot irina-ramazova

mendix-tree-view's Issues

Feature request

@JelteMX Is there a possibility to select a node by guid or something like this? It would be a very nice feature.
Something like this is implemented in the treetable but not in the treeview.
Thanks in advance

Node titel not always visible when using Node title type 'Nanoflow'

Hi,

we implemented the Tree View for a customer. One of the requirements was a color coded indicator in front of the node title to indicate the status of that tree item.

To achieve this, I used the node type nanoflow feature to change the title into a HTML string, and then style it with css:

'<div class="tree-node-indicator ' + $TreeNode/Status+ '"></div><div class="tree-node-name">' + $TreeNode/Name + '</div>'

This works, but on a regular basis, the node title is not visible. When you open an other node, the title appears.

Step 1:

Step 2:

I did debug (added log messages into the nanoflow) and see that in case this happens, for that particular tree node both attributes are available in the Nanoflow and the html output is created.

Any tips on how to address this issue?

Thanks in advance.

Greatings,

Bart

Search on Enter Key press

Hello,

We have been utilizing the tree view widget, finding it incredibly helpful. However, with a substantial amount of data, we've noticed a significant delay in loading, attributed to searching on every character input.

To enhance performance, Can we get a feature to search only on enter key press?

Thanks,
Pranav

Feature request

Hi Jelte,

first of all, great job!

In all modesty and understanding some suggestions that would make my world, and that of my client a little bit better...

What would be great is if it is possible to show more attributes of a node, which will also make it possible to create a boolean attribute for the node and with that to 'select' a node and save that selection. Usecase: subscribing to a service concerning that node, like notifications.

Also, while I'm at it, is it maybe possible to define where to put the Icon (first or last) and make it clickable? The reason I ask is that a client want to create an action to go to an edit popup concerning that node, when clicking on a 'three dots' icon, mobile style (or even a dropdown menu with update and delete possibilities).

And a nice to have would be to be able to choose between the 'arrow' or the 'plus/minus' (from tree table widget) icons as the 'tree-fold-icon' (no idea how to call them).

I know you probably have tons of other stuff to do, but just wanted to let you know!

Oh and the search functionality is also really helpful!

Thanks again!

Gr,