# Select form with tree structure in custom node

**URL:** <https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348>\
**Category:** Developing Nodes\
**Created:** [25 February 2019 03:53 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348 "2019-02-25T03:53:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![germancmartinez](https://avatars.discourse-cdn.com/v4/letter/g/2bfe46/32.png) [@germancmartinez](https://discourse.nodered.org/u/germancmartinez)\
**Post date:** [25 February 2019 03:53 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/1 "2019-02-25T03:53:31Z")

</div>

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](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!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 February 2019 21:12 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/2 "2019-02-25T21:12:13Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 February 2019 21:21 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/3 "2019-02-25T21:21:56Z")

</div>

Hey Dave (@dceejay),  
Could the new [TreeList](https://nodered.org/docs/api/ui/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 ...

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [25 February 2019 23:41 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/4 "2019-02-25T23:41:57Z")

</div>

> [@BartButenaers](#):
>
> Could the new [TreeList](https://nodered.org/docs/api/ui/treeList/) widget (from version 0.20.0) be of any use here??? I

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.

---

<div class="post-metadata">

**Author:** ![germancmartinez](https://avatars.discourse-cdn.com/v4/letter/g/2bfe46/32.png) [@germancmartinez](https://discourse.nodered.org/u/germancmartinez)\
**Post date:** [26 February 2019 02:38 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/5 "2019-02-26T02:38:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [26 February 2019 05:36 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/6 "2019-02-26T05:36:03Z")

</div>

See [https://github.com/node-red/node-red/blob/dev/packages/node\_modules/@node-red/nodes/core/core/60-link.html#L30](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

---

<div class="post-metadata">

**Author:** ![germancmartinez](https://avatars.discourse-cdn.com/v4/letter/g/2bfe46/32.png) [@germancmartinez](https://discourse.nodered.org/u/germancmartinez)\
**Post date:** [26 February 2019 13:09 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/7 "2019-02-26T13:09:02Z")

</div>

Thanks!!!

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 February 2019 13:13 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/8 "2019-02-26T13:13:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 February 2019 13:29 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/9 "2019-02-26T13:29:13Z")

</div>

> [@knolleary](#):
>
> just enough for what we use it for in 0.20

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)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 February 2019 13:53 UTC](https://discourse.nodered.org/t/select-form-with-tree-structure-in-custom-node/8348/10 "2019-02-26T13:53:35Z")

</div>

> [@Steve-Mcl](#):
>
> Is it a UI Node for use by end users in Thier flows?

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