Oracle APEX: Tree Region Expand Selected Node Only

Recently I was working with Tree region and some requests that are not declaratively available in APEX. So I discovered some useful APIs that I think is worth sharing. :)

Expand Selected Node

In APEX, we have Dynamic Actions to expand all and collapse all nodes. However, if we want to expand only a selected node, we need help from JavaScript APIs.

var tree$ = $( "#projTrackTree" );
tree$.treeView( "expand", tree$.treeView( "getSelection" ) );

If you want to collapse all nodes and expand only the selected one, use the following code:

var tree$ = $( "#projTrackTree" );
tree$.treeView("collapseAll");
tree$.treeView( "expand", tree$.treeView( "getSelection" ) );

Expand Selected Node on Page Reload

If you reload or submit the page when a node is clicked, the selected node will not remain active by default.

To achieve this, we can use the Selected Node Page Item attribute.

Selected Node Page Item

This option is declaratively available in Oracle APEX. When the page is reloaded, the item's value is used to select the active node. You can find this option under Tree Region > Attributes > Selected Node Page Item, as shown in the screenshot below.

The page item should be set either via the node link or a page process.

If you want to expand the selected node after a page reload, you can use the previous JavaScript snippet on page load.

Result:

With these techniques, you can easily control node expansion and improve the user experience in your APEX application.