Select form with tree structure in custom node

Developing Nodes
1

Hi! I need to create a select form with tree structure for my custom node edit display. I'm wondering if it's possible to use this: https://mbraak.github.io/jqTree/#demo
Can I use jqTree in the html file? or do I have to create a script in the js file and then use $.getScript() in the html?
Sorry if my cuestion is to basic, but I don't have much experience with HTML.
Thanks in advance!

1 Like
2

You can use extra libraries - but it is non-trival - you can see an example of how it is done in the node-red-node-geofence - https://github.com/hardillb/node-red-node-geofence/blob/master/geofence.html#L192

An alternative if you know the depth of your tree would be a set of dropdowns - where a selection in the top level one populates the next etc... via a series of fetches from the server.

1 Like
3

Hey Dave (@dceejay),
Could the new TreeList widget (from version 0.20.0) be of any use here??? I haven't seen it in action yet, so I might have misunderstood what it could be used for ...

1 Like
4

Probably. As the page you link to says, it has pretty minimal functionality currently, so without more details of the actual requirements, I couldn't say if it's a complete fit.

And of course that would mean the node would only work on 0.20 or later.

2 Likes
5

I think it's exactly what a need! Is there any complete example?
Thank you very much!

6

See https://github.com/node-red/node-red/blob/dev/packages/node_modules/@node-red/nodes/core/core/60-link.html#L30

But as already noted, this is only available in version 0.20 onwards

1 Like
7

Thanks!!!

8

And just to repeat - it has very minimal functionality - just enough for what we use it for in 0.20. It may not do everything you want it to.

9

Does that include 20 beta4? Is it a UI Node for use by end users in Thier flows?

Sorry if this is a stupid question (I did have a quick look at the links)

10

No. It is a common element for use by nodes in their edit dialogs. It has nothing to do with Node-RED Dashboard.