Tree Widget


The eSpace in attach contains a web block designed for dynamically building a tree. As input, it receives a RecordList with all nodes and leafs, including the depth level.

You may check the sample here:

Feel free to improve and post back your changes!

Paulo Ramos

the widget works fine in a clean e-space but using with the newest styleguide template causes the widget to stay empty. Only expand all/collapse all is shown.
This info may be a bit limited so please tell me if you need me to do something
Hi Marnix,

Thanks for the feedback. There is an incompatibility issue between TreeWidget and an unidentified component in StyleGuide. I'll look upon this and post back a solution when available.

Paulo Ramos
Processing Upload...
Actually the cause was quite unexpected. As you may be aware, Style Guide uses one popular javascript framework - Prototype - that "aims to ease development of dynamic web applications".

As useful it may be, Prototype introduces a breaking change, due to the way it extends Object and Array, modifying javascript default behavior. You can access more information about this issue here and here.

Having said this, I still think the benefits of using Prototype outweighs the risks.

In attach you'll find a newer version of TreeWidget, compatible with Style Guide.

Samples for the TreeWidget are available here:
- [original sample]
- [consumer sample using StyleGuide/Prototype]

Paulo Ramos
Processing Upload...
Latest version is in attach.

Samples are available here:
- [original sample]
- [consumer sample using StyleGuide/Prototype]

I've found a problem with the tree widget and a specific StyleGuide component: Client-Side Tabs. Maybe that's the source of the incompatibility issue.
In detail, when a Tab has a TreeWidget (latest version), the other tabs' content doesn't show. I've solved this using an iframe to load a separate webscreen with the widget.

I followed this iframe tutorial/sample:
Note that in 4.0 the actual links must be changed to: GetOwnerURLPath() + "/EntryName.aspx"
Also note that you can add screen parameters to the link like: GetOwnerURLPath() + "/EntryName.aspx?ParameterOne=42&ParameterTwo=42"

I've also find that it is possible to adapt dynamic data of an hierarchical entity (an entity with a parent foreign key to itself) to generate (with recursive logic) a list for the widget to present this information.
I'm on a deadline but in a few days I'll post some samples.

Best Regards,
Diogo Rendeiro
Hi Diogo,

Thanks for the feedback. The original client-side script (jsTree) had compatibility issues with the Prototype framework ([1], [2]).
I didn't test it with Client-side tabs, it's possible it needs a bit tweaking in that scenario. Feel free to post your improvements!

Paulo Ramos

Instead of using GetOwnerURLPath() + "/EntryName.aspx" I suggest using the GetEntryURL action of the HTTPRequestHandler extension. This way, your eSpace will be better prepared if you decide to publish it in the Java version of the OutSystems Platform.

Best Regards,
Gustavo Guerra
I Diogo,
How can you do this? because I have the same problem but I couldn't use the example.
The javascript function didn't work.

can you help me?

How can i use tree widget in version 9 coz i need to use it Please is there any way i can use this tool.