In this tutorial, I am giving an example to create a dynamic menu 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.
I am using Oracle Apex version 19.1 to demonstrate this example.
Oracle Apex Tree Example
Follow these steps to create a menu using Tree region in Oracle Apex:
- Create a table
TREE_MENUto store menu data, as shown in the below example:
Create table tree_menu ( parent_node integer primary key, child_node integer, menu_desc varchar2(50), page_no integer );
You can add more fields to it depending on your requirement, but these fields are mandatory for a menu.
- Then I inserted some data into
TREE_MENUtable to produce the menu. The following is the data example:
Note: In the above screenshot, the hyphen (-) is a null value 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.
- Now in Oracle Apex, open the Home page in the page designer.
- Then create a Region and set the type of that region to Tree.
- In the Source section, change the type to SQL Query and add the following query to it:
select case when connect_by_isleaf = 1 then 0 when level = 1 then 1 else -1 end as status, level, menu_desc as title, decode(page_no, null, 'fa-bars', 'fa-file') as icon, child_node as value, menu_desc as tooltip, 'f?p=&APP_ID.:'||"PAGE_NO"||':&APP_SESSION.' as link from (select menu_desc, parent_node, child_node, page_no from TREE_MENU) start with child_node is null connect by prior parent_node = child_node order siblings by parent_node
The following is the screenshot for the above settings:
- Then click on the Attributes under the Tree and set the following properties as shown in the below screenshot:
Note: Do not miss any setting above and first change the Hierarchy property to Not Computed.
When the user will click on the node Employee Form 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 table. You have to specify page numbers according to your application page numbers.