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 on “[Oracle APEX 4.0] Improved tree region

  1. 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.


    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    • Peter van der Neut on said:

      Hi Patrick,

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

      Regards Peter

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  2. 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?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Peter van der Neut on said:

      Hi Raman,

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

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      • 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.

        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
  3. Thorben on said:


    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!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Peter van der Neut on said:

      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.

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  4. Thorben on said:

    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 :-)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Hi Thorben,
      have you found a solution about checkbox tree? I have the same problem but i can’t work it out….

      Thank you,

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  5. Youssef on said:

    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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. Hi, Did anyone figure out the checkboxes? We need to use them…

    For formatting David Gale had an idea for a workaround:

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. krishna on said:


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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. 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.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Patrick Sinke on said:

      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!

      VA:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
  9. on said:

    i need it ,please.

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)

Leave a Reply

Your email address will not be published. Required fields are marked *


* Copy This Password *

* Type Or Paste Password Here *

59,529 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS