Customizing an Oracle APEX tree

The following have been tested and used in Oracle 10g rev2 with APEX 3.1 installed.

One may find it difficult to work with the standard Oracle APEX tree, but with a few small tweaks you can surely do what you want.

Prerequisites:
Please check how a standard Oracle APEX tree is done here:
http://www.oracle.com/technology/products/database/application_express/howtos/howto_tree.html


So, here's the hypothesis of the problem:
- We want to have a tree next to or inside an APEX form.
- There is one tree node that is currently highlighted and the user can select/highligth other nodes as he/she wants WITHOUT interfering and/or loosing the form data typed.



Lets proceed to the demonstration:

The second idea included in the hypothesis is pretty much easy to solve, provided that one may find this other link:
http://www.inside-oracle-apex.com/2007/06/highlight-current-tree-node.html

Now that we solved half the problem, we may want to solve this "nasty" bug: keeping/persisting the form data as the tree is browsed.

To do that, we first need to be perfectly knowledgeable of the format that APEX uses for its links:
http://gitb.it.lt/i/doc/concept_url_link.htm

But how does that help ?

Well, from the above page about APEX links, we can find out that we could pass on variables through the link (basicly using HTTP GET vars), but how to do that from the tree ?

We can use Javascript and do the following:

instead of linking the tree directly to a submit link, we could use an intermediary call to a Javascript that reformats the link and then submits the page with the form variables data included in the link ! This will give us the data persistance that we need.

A small example:

select CURRENT_TREE_NODE_ID id,
NODE_PARENT_ID pid,
CASE when CURRENT_TREE_NODE_ID = :CURRENT_FORM_ITEM THEN
''LEAF_INFO''
ELSE LEAF_INFO END name,
'javascript:persistFormData('CURRENT_TREE_NODE_ID');' LINK,
null a1,
null a2
from TREE_DATA

and we can now put the persistFormData function inside the header or even a separate region:

function persistFormData(passVal1)
{
var link1,link2;

link1 ='f?p=&APP_ID.:1:&APP_SESSION.::NO::CURRENT_TREE_NODE_ID;
link2 = ':'+passVal1;

link1=link1+',FIRST_FORM_ITEM';
link2=link2+',%5C'+encodeURIComponent(document.getElementById('FIRST_FORM_ITEM').value)+'%5C';

link1=link1+',SECOND_FORM_ITEM'; link2=link2+',%5C'+encodeURIComponent(document.getElementById('SECOND_FORM_ITEM').value)+'%5C';

/*and so on for the entire form*/

window.location = link1+link2;
}

The tricky part in the function above ?
- The link format that is completely described in the refferenced tutorial (note that I used page number 1 for this example).
- The usage of enclosing '%5C' (or /) for the variable values to be able to pass on commas or any special characters !
- The link gets appended all the name and values for the entire form !
- In the end, the javascript code forces a refresh of the page using window.location (tested ONLY with IE7)...

Thats about all,

I hope this will really help ppl as other blog tutorials really helped me.

Gl.