{"id":4006,"date":"2019-07-27T03:33:06","date_gmt":"2019-07-27T03:33:06","guid":{"rendered":"https:\/\/vinish.dev\/?p=4006"},"modified":"2025-04-16T19:49:11","modified_gmt":"2025-04-16T14:19:11","slug":"oracle-apex-tree-example","status":"publish","type":"post","link":"https:\/\/vinish.dev\/oracle-apex-tree-example","title":{"rendered":"Oracle Apex Tree Example"},"content":{"rendered":"

In this tutorial, I am giving an example to create a dynamic menu<\/a> using Oracle Apex Tree. I will use the home page of Oracle Apex application to add a tree menu so that whenever a user logged in, he can see the menu first.<\/p>\n

I am using Oracle Apex version 19.1 to demonstrate this example.<\/p>\n

Oracle Apex Tree Example<\/h2>\n

Follow these steps to create a menu using Tree region in Oracle Apex:<\/strong><\/p>\n

    \n
  1. Create a table TREE_MENU<\/code> to store menu data, as shown in the below example:<\/li>\n<\/ol>\n
    Create table tree_menu (\r\n   parent_node integer primary key,\r\n   child_node integer,\r\n   menu_desc varchar2(50),\r\n   page_no integer\r\n);<\/pre>\n
    You can add more fields to it depending on your requirement, but these fields are mandatory for a menu.<\/p>\n
      \n
    1. Then I inserted some data into TREE_MENU<\/code> table to produce the menu. The following is the data example:<\/li>\n<\/ol>\n
      \"Data<\/a><\/p>\n
      Note:<\/strong> In the above screenshot, the hyphen (-) is a null value<\/strong> so do not insert a hyphen in it just leave null that column. By looking at this data and the tree menu produced with this data, you will have the idea of tree data structure. Then you will be able to modify and create new data easily for your tree menu.<\/p>\n
        \n
      1. Now in Oracle Apex, open the Home page<\/strong> in the page designer.<\/li>\n
      2. Then create a Region<\/strong> and set the type of that region to Tree<\/strong>.<\/li>\n
      3. In the Source<\/strong> section, change the type to SQL Query<\/strong> and add the following query to it:<\/li>\n<\/ol>\n
        select case when connect_by_isleaf = 1 then 0 when level = 1 then 1 else -1 end as status,\r\n        level,\r\n        menu_desc as title,\r\n        decode(page_no, null, 'fa-bars', 'fa-file') as icon,\r\n        child_node as value,\r\n        menu_desc as tooltip,\r\n        'f?p=&APP_ID.:'||\"PAGE_NO\"||':&APP_SESSION.' as link \r\n   from (select menu_desc, \r\nparent_node, \r\nchild_node, \r\npage_no\r\nfrom TREE_MENU)\r\n  start with child_node is null\r\nconnect by prior parent_node = child_node\r\norder siblings by parent_node<\/pre>\n
        The following is the screenshot for the above settings:<\/strong><\/p>\n
        \"Data<\/a>
        Tree - Data Source Setting<\/figcaption><\/figure>\n
          \n
        1. Then click on the Attributes<\/strong> under the Tree and set the following properties as shown in the below screenshot:<\/li>\n<\/ol>\n
          \"Oracle<\/a><\/p>\n
          Note:<\/strong> Do not miss any setting<\/strong> above and first change the Hierarchy property to Not Computed<\/strong>.<\/p>\n
          Now your Tree menu is ready, and it will have the following output:\"Oracle<\/a><\/p>\n
          When the user will click on the node Employee Form<\/strong> it will open the employee form, because in this application page number 2 is the employee form and I configured that page number into the TREE_MENU<\/code> table. You have to specify page numbers according to your application page numbers.<\/p>\n
          See also:<\/h3>\n