- Whitehorses - http://blog.whitehorses.nl -

[Oracle APEX 4.0] Improved tree region

Tweet [1]

Recently Application Express 4.0 – Early Adopter 2 has been released [2] 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.
[3]

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

[4]

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 [5], 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.

[6]

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, 
       level, 
       lead(LEVEL, 1, 0) over(ORDER BY rownum) lead, 
       null link, 
       null a1, 
       null a2 
from "#OWNER#"."DEMO_PAGE_HIERARCHY"
start with "PARENT_PAGE_ID" is null
connect by prior "PAGE_ID" = "PARENT_PAGE_ID"

Running the page will show the tree.

[7]

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.

[8]

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