Highlight current Tree Node

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 = :P4_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.