📁 Create Hierarchical Folder View Using Tree Component in APEX

🚩Introduction 

• In Oracle APEX, a Tree Region is used to show data in a structured hierarchy, similar to a file explorer. It is useful for displaying parent-child relationships in a clear and organized way.

• Instead of a simple list, users can expand or collapse nodes to view related information. This makes navigation easier, improves usability, and provides a more interactive experience in Oracle APEX applications.

📑 Why This Approach Is Needed

In Oracle APEX applications, data is often organized in multiple levels like folders, categories, or related records. Showing this data in a flat list can make it hard for users to understand and navigate. A Tree Region solves this by displaying the data in a clear parent-child structure, making it easier to view and explore.

This approach is useful when:

• You need to display hierarchical or nested data

• The application should provide easy navigation like a file explorer

• You want to improve data readability and structure

• Users need to quickly expand/collapse and explore records

• The application should offer a clean and intuitive UI experience

By using a Tree Region, applications become more organized, user-friendly, and interactive, while improving navigation efficiency and overall usability.

👉 Use Case: Tree Region with Folder Structure in Oracle APEX

In Oracle APEX, applications often need to manage and display data in a hierarchy such as folders, categories, menus, or nested records. Instead of using a flat list, a Tree Region helps to show this data in a clear parent-child structure, similar to a file explorer. This makes navigation more simple and organized.

In this blog, we will see how to create a folder-like structure using the Tree Region in Oracle APEX by defining hierarchical data and displaying it dynamically. This allows users to expand and collapse items easily, improves readability, and provides a cleaner and more interactive way to explore complex data.

Step 1: 

In the Page Designer, create a region and select the type as Tree and in the Source section, select the type as SQL Query and under the SQL Query, copy and paste the below SQL code.

---- SQL Query for Tree Structure (Folder Hierarchy) ----

WITH tree_data AS (
  SELECT 1 AS id, 'Documents' AS name, NULL parent_id, 'FOLDER' AS type FROM dual
  UNION ALL
  SELECT 2, 'Reports', 1, 'FOLDER' FROM dual
  UNION ALL
  SELECT 3, 'Sales Report.pdf', 2, 'PDF' FROM dual
  UNION ALL
  SELECT 4, 'Budget.xlsx', 2, 'EXCEL' FROM dual
  UNION ALL
  SELECT 5, 'HR.docx', 2, 'WORD' FROM dual
  UNION ALL
  SELECT 6, 'Images', 1, 'FOLDER' FROM dual
  UNION ALL
  SELECT 7, 'Logo.png', 6, 'IMAGE' FROM dual
  UNION ALL 
  SELECT 8, 'Notes.txt', 1, 'TEXT' FROM dual
) 
SELECT
  LEVEL,
  id,
  name,
  parent_id,
  type AS fileType,
  CASE type
    WHEN 'FOLDER' THEN 'fa fa-folder folder-icon'
    WHEN 'PDF' THEN 'fa fa-file-pdf-o pdf-icon'
    WHEN 'EXCEL' THEN 'fa fa-file-excel-o excel-icon'
    WHEN 'WORD' THEN 'fa fa-file-word-o doc-icon'
    WHEN 'IMAGE' THEN 'fa fa-image img-icon'
    WHEN 'TEXT' THEN 'fa fa-file-text file-icon'
    ELSE 'fa fa-file'
  END AS icon
FROM tree_data
START WITH parent_id IS NULL
CONNECT BY PRIOR id = parent_id
ORDER SIBLINGS BY name;

Step 2: 

Click on the page and in the properties, navigate to the Inline CSS Section and copy and paste the CSS code below.

---- CSS Styling for Oracle APEX Tree Region Icons ----

.a-TreeView-row.is-selected {
  background-color: dimgray;
} 

.a-TreeView-content.is-selected .a-Icon:not(.folder-icon) {
  color: #fff !important;
} 

.folder-icon {
  color: orange !important;
} 

.pdf-icon {
  color: red !important;
} 

.excel-icon {
  color: green !important;
} 

.doc-icon {
  color: blue !important;
} 

.img-icon {
  color: black !important;
} 

.file-icon {
  color: #6565d6 !important;
} 

Step 3: 

Now save and run the page, you will see the hierarchical folder structure tree region.

🔥 Conclusion

Thus, a Tree Region in Oracle APEX shows data in a structured, folder-like format, making navigation simple and easy to understand. Users can expand and collapse items to explore data more effectively. This helps make complex information more readable and well organized. Overall, it improves usability and provides a clean, interactive user experience.