Follow Us on Twitter

[Oracle APEX 4.0] Improved tree region

by Peter van der Neut on February 28, 2010 · 15 comments

Recently Application Express 4.0 – Early Adopter 2 has been released with some new features and enhancements. One of those enhancements is the improved tree region. The looks of the tree region in previous APEX versions was very basic as you can see in this screenshot.

With APEX 4.0 the tree has had a facelift and now has five templates available.

Five templates with five different layouts. The checkbox template also has extra functionality, it lets you select values from the tree.

The new APEX tree is based on jsTree, a jQuery plugin with a lot of tree functionality. APEX has used a little bit of that functionality, maybe they will add more functionality in future releases.

When creating the tree in APEX 4.0 not much has changed in the wizard. Of course there are the different templates and it is no longer necessary to define the starting value of the tree. We create an example tree on the table demo_page_hierarchy using the Default layout. One of the steps in the wizard is selecting the columns to define the tree.

We define the ID and the parent ID as well as the leaf node name. Here you can also specify if the leaf node should link to a certain page. When the tree creation is complete it will show the query it uses for the tree.

select "PAGE_ID" id, 
       "PARENT_PAGE_ID" pid, 
       "PAGE_NAME" name, 
       lead(LEVEL, 1, 0) over(ORDER BY rownum) lead, 
       null link, 
       null a1, 
       null a2 
start with "PARENT_PAGE_ID" is null
connect by prior "PAGE_ID" = "PARENT_PAGE_ID"

Running the page will show the tree.

A very nice tree that is definitely a step up from the tree in previous APEX versions. To show the checkbox tree, we change the tree template to Checkbox and run the page again.

A checkbox tree with logic to select on all levels on the tree, a very nice addition to the tree region.

[Oracle APEX 4.0] Improved tree region, 4.2 out of 5 based on 10 ratings
VN:F [1.9.22_1171]
Rating: 4.2/5 (10 votes cast)

{ 15 comments… read them below or add one }

Patrick Wolf February 28, 2010 at 11:58 pm

Hi Peter,

the version of the tree region which is included in EA2 will not be the final version. Especially the format of the SQL statement has already changed since the deadline for EA2. The new one is easier and allows more control, like if a node should be expanded or collapsed.



Peter van der Neut March 1, 2010 at 9:35 am

Hi Patrick,

I was hoping for that :). Can you also control the checked items in the checkbox tree?

Regards Peter


Raman August 21, 2010 at 10:56 am

Hi friends,

I have question about plugin, if you see i:\images\libraries\jquery-jstree.9.9a2\plugins you can find some plugins, I want to know how can i set these plugins on js tree?


Peter van der Neut August 23, 2010 at 8:49 am

Hi Raman,

How to use the plugins is described in the file “documentation_plugins.html” in the same directory.


Raman August 23, 2010 at 9:39 am

I found this description about plugins but I realy confused and I don’t understand it, for example where must include () or in document said: (to just activate the plugin without modifying any options (if available) use this code in the plugins section:

plugins : {
“plugin-name” : { }
where must use it, what file? where is plugins section in this (apex.jguery.tree.min) or this(apexjquery.tree.js)? if you tell me stage by stage, i mean start to end that how can i install plugins I will so appreciate.


Thorben August 23, 2010 at 11:50 am


it seems they removed the checkbox template from the final version.
I only found one other comment about this topic. Is no one else missing it? ๐Ÿ™‚

Do you have an idea on how to add the checkbox-functionality to the tree manually?

Thank you for your help!


Peter van der Neut August 23, 2010 at 12:23 pm

Noticed that too, they probably removed it because it added no real functionality. You probably need to include the jquery code manually. Haven’t tried that out yet.


Thorben August 23, 2010 at 12:56 pm

Thanks for the fast reply. I tried to use the APEX_ITEM.CHECKBOX as icon, but it didn’t work out. I’ll work on it ๐Ÿ™‚


matteo September 22, 2010 at 12:18 pm

Hi Thorben,
have you found a solution about checkbox tree? I have the same problem but i can’t work it out….

Thank you,


Youssef October 28, 2010 at 11:25 am

Hi there folks , First of all I would heap praise for the huge work you’re doing over there , Apex community , would it be Mr Peter or Mr Wolf for both of your websites.
Currently , I’m working onto an Apex application and I’ve stumbled upon trees that I have to manipulate In order to satisfy the customer needs.

I’d like to manipulate the labels which are displayed , unfortunately they’re not surrounded by html tags so I can’t make it bold or make it colored , Instead , I think it’s a part of the title attribute in a Javascript peace of code( due to Jquery)
Do you understand my need?
Thanx for reading


BillC November 15, 2010 at 10:33 pm

Hi, Did anyone figure out the checkboxes? We need to use them…

For formatting David Gale had an idea for a workaround:


krishna June 4, 2012 at 2:21 pm


i want drag jones,black,clark node and drop in other region .how will do that…..


BoeroBoy July 2, 2012 at 9:45 pm

Thanks, Peter! This is the first time I’ve had to use a tree in version 4.x. I notice you used the old a1, a2 values in your query. Unfortunately the new version doesn’t seem to make use of these. In 3.x, I often used these extra values to indicate next to select nodes the number of records that would be found under each node’s link. Is there still a built-in way to display this extra column right aligned in the tree? I think it’s a shame if there isn’t. I often wish new versions of things would offer old features as an option for backwards compatibility.


Patrick Sinke July 9, 2012 at 2:18 pm

Hi BoeroBoy,

I did a little research, but couldn’t find any standard solution for displaying the number of childnodes. What I did find was a ‘non-standard’ solution in the tree query itself, by making use of a subquery. You might try this in your own environment, but please be aware of possible performance hit before implementing.
Try the following query (based on the EMP table):
select case when connect_by_isleaf = 1 then 0
when level = 1 then 1
else -1
end as status,
ENAME ||’ (‘||(select count(*) from emp emp2 where emp2.mgr = emp.empno)||’)’ as title,
null as icon,
“EMPNO” as value,
null as tooltip,
null as link
from “#OWNER#”.”EMP”
start with “MGR” is null
connect by prior “EMPNO” = “MGR”
order siblings by “ENAME”;

In case you want to not display the leaves with zero values, use a CASE around the column.
So instead of
ENAME ||’ (‘||(select count(*) from emp emp2 where emp2.mgr = emp.empno)||’)’ as title,
use this:
ENAME ||case connect_by_isleaf when 0 then ‘ (‘||(select count(*) from emp emp2 where emp2.mgr = emp.empno)||’)’ else ” end as title,

Hope that helps!

Reply August 12, 2014 at 9:25 am

i need it ,please.


Leave a Comment


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS