How do I Add Navigation to the Tree Nodes

Introduction
Tree components in Oracle APEX provide a user-friendly way to represent hierarchical data such as file directories, organizational structures, or nested categories. Adding navigation to these tree nodes enhances user interaction by allowing users to click a node and open a related page, form, or report. In this blog post, we’ll explain how to add navigation to your tree nodes, enabling dynamic interaction and improving the usability of your application.

How to Add Navigation to Tree Nodes in Oracle APEX

To add navigation to a tree region, you need to ensure that the SQL query used in your tree includes a column with the target URL or page reference. Oracle APEX expects this value to be passed into the LINK pseudo column when defining the tree data source.

Step-by-Step Instructions:

1. Open Your Tree Region
   Go to the Page Designer and select the Tree region you’ve created.

2. Modify the Tree SQL Query
   Add a column in your query to define the navigation link. For example:

   SELECT 
     ID,
     PARENT_ID,
     NAME AS LABEL,
     'f?p=&APP_ID.:10:&SESSION.::NO::P10_ID:' || ID AS LINK
   FROM TREE_STRUCTURE
   

   In this example:

   • Page 10 is the target page.

   • P10_ID is the item on Page 10 that will receive the ID from the clicked node.

   • The LINK value constructs a URL using APEX's f?p= format.

3. Update Tree Attributes
   In the Tree region settings:

   • Set "Link Column" to LINK

   • Set "Label Column" to LABEL

   • Set "ID Column" and "Parent Column" appropriately

4. Test Navigation
   Run the page and click a node to confirm it redirects to the correct page with data passed through the link.

Best Practices

• Always use f?p=&APP_ID. with proper session and security contexts.

• Pass only needed parameters to keep URLs clean and maintainable.

• Use friendly and readable labels in the tree for better UX.

• Consider adding JavaScript or a dynamic action to intercept or enhance navigation if needed.

Oracle APEX Documentation
Official documentation for Tree Regions:
https://docs.oracle.com/en/database/oracle/apex/

 You can configure node clicks to open a details page for the selected department.

1. In the Tree Attributes section, locate Node Link Target.

2. Select Redirect to Page in this Application.

3. Choose a Detail Form Page (e.g., a department details page).

4. In Set Items, map the ID column to a page item (e.g., PXX_DEPT_ID).

5. Save and run the page to test the navigation.

Conclusion
Adding navigation to tree nodes in Oracle APEX turns a static component into a powerful interactive tool. With a few adjustments to your SQL query and region settings, you can create intuitive, clickable trees that improve application flow and user experience. This small enhancement allows your users to explore data more naturally and makes your app more engaging and functional.