Highlight current Tree Node

7. June 2007

Oracle APEX, Tips & Tricks

During the DOAG SIG workshop I was asked how to create a treeview in Oracle APEX where the current selected tree node is highlighted.

After a quick thought about the problem, it turned out that there is a quite simple solution for it if you combine the treeview query with some HTML code.

  1. Create a regular tree region
  2. Create a form region which gets synchronized with your tree
  3. Change the tree query to contain the following CASE statement 
    SELECT EMPLOYEE_ID AS ID
     , MANAGER_ID  AS PID
     , CASE
         WHEN EMPLOYEE_ID = :P 4_EMPLOYEE_ID THEN
             '<span style="color:white;background-color:blue;">'||
             LAST_NAME||
             '</span>'
         ELSE
             LAST_NAME
       END AS NAME
     , 'f?p=&APP_ID.:4:'||:SESSION||'::NO::P4_EMPLOYEE_ID:'||EMPLOYEE_ID AS LINK
     , NULL        AS A1
     , NULL        AS A2
  FROM #OWNER#.EMPLOYEES

What does it do?

When the tree is rendered the CASE compares the currently processed node (EMPLOYEE_ID) with the current active record (P4_EMPLOYEE_ID) which is displayed in the form.
If the IDs match, it wraps the LAST_NAME column with a SPAN which contains some styling information.

Quite simple, isn’t it? :-)

View a working demo of the example.

10 Responses to “Highlight current Tree Node”

  1. Anonymous Says:
    June 8th, 2007 at 05:32

    Hallo,

    danke für die Hilfe.
    Das Ding funktioniert super.

    Viele Grüsse

    Volker Strasser

  2. Patrick Wolf Says:
    June 8th, 2007 at 10:33

    Freut mich!

  3. BoeroBoy Says:
    November 23rd, 2007 at 08:44

    Hi Patrick
    I’m a big fan of your articles. Very helpful. I’m having strange problem with trees in a sidebar display point. Does anyone have experience where a tree is always blank in a sidebar (or any particular) region? Apex 3.0.1.00.08 – Sand theme.

    Thanks
    BoeroBoy

  4. BoeroBoy Says:
    November 23rd, 2007 at 10:59

    Followup: There is a forum on this topic:
    http://forums.oracle.com/forums/thread.jspa?messageID=2192202

  5. Patrick Wolf Says:
    November 23rd, 2007 at 11:52

    Hi,

    I will do the follow-up on the OTN forum.

    Patrick

  6. Tony Miller Says:
    January 23rd, 2008 at 08:35

    Quick question.. Can yo udo a tooltip on a dhtml tree?? I mean the items in the tree, to show a small description of the menu item?

    I could not find a spot to post the javascript call..

    Thanks!

    Tony Miller
    tomiller@utmb.edu

  7. Patrick Wolf Says:
    January 23rd, 2008 at 08:35

    Hi Tony,

    just add a SPAN around your tree label where you can attach the onmouseover event. For example like the following query:

    SELECT EMPLOYEE_ID AS ID
     , MANAGER_ID  AS PID
     , '<span onmouseover="toolTip_enable(event,this,''Primary key: '||EMPLOYEE_ID||''');">'||
       LAST_NAME||
       '</span>'   AS NAME
     , NULL        AS LINK
     , NULL        AS A1
     , NULL        AS A2
  FROM EMPLOYEES

    Patrick

  8. Pranav Says:
    February 4th, 2009 at 10:27

    Hi,

    I am new to APEX,I am trying to implement Menu as TREE into my Application,so as per your above instruction i successfully complete the my page.but now i want that tree menu is seen on all page of my appliaction on left side.but when i creating second page and give the source of other page item,it show tree only in one page.becuase on shared component tree item source is change.

    is there any way to assign the runtime tree into variable.

    Thanks

  9. nageeb Says:
    February 9th, 2009 at 14:33

    Change icon tree in dev. oracle 10g

  10. Patrick Wolf Says:
    February 9th, 2009 at 19:51

    Nageeb, is this a question?

Leave a Reply