Here's an example of how you can create an advanced tree in Oracle APEX with checkboxes, context menus, and drag-and-drop functionality using a SQL query as the tree source:
Log in to your Oracle APEX application.
Navigate to the desired page where you want to add the tree component.
Click on the "Page Designer" button to open the page in the designer mode.
In the "Component Browser" pane on the right, search for the "Tree" component and drag it onto your page.
In the "Tree Attributes" section of the "Property Editor" pane, configure the following properties:Region Title: Enter a title for your tree region (e.g., "Advanced Tree").Tree Source: Select "SQL Query" as the source type.SQL Query: Enter the SQL query that retrieves the hierarchical data for your tree. Here's an example query:
Region Title: Enter a title for your tree region (e.g., "Advanced Tree").
Tree Source: Select "SQL Query" as the source type.
SQL Query: Enter the SQL query that retrieves the hierarchical data for your tree. Here's an example query:
Replace "your_table" with the actual table name and adjust the column names as per your data structure. The additional columns, such as "checkbox," "menu_icon," and "delete_icon," are used for demonstrating advanced features.Parent ID Column: Specify the column name that represents the parent ID in your SQL query (e.g., "parent_id").Node Text Column: Specify the column name that represents the node name or label (e.g., "node_name").
Replace "your_table" with the actual table name and adjust the column names as per your data structure. The additional columns, such as "checkbox," "menu_icon," and "delete_icon," are used for demonstrating advanced features.
Parent ID Column: Specify the column name that represents the parent ID in your SQL query (e.g., "parent_id").
Node Text Column: Specify the column name that represents the node name or label (e.g., "node_name").
Customize the appearance of the tree by modifying its attributes in the "Appearance" section.
Enable the checkboxes by setting the following properties in the "Tree Checkbox" section:Checkbox Column: Specify the column name that represents the checkbox value in your SQL query (e.g., "checkbox").Checkbox Label Column: Specify the column name that represents the checkbox label in your SQL query (e.g., "node_name").
Checkbox Column: Specify the column name that represents the checkbox value in your SQL query (e.g., "checkbox").
Checkbox Label Column: Specify the column name that represents the checkbox label in your SQL query (e.g., "node_name").
Configure context menus for the tree nodes:In the "Tree Node Context Menu" section, click on the "Create" button to define a context menu.Add menu items by specifying the label, icon, and actions for each menu item. For example, you can create a menu item with the label "Delete" and set its icon to "fa fa-trash." Define an action such as executing a PL/SQL code to perform the delete operation.
In the "Tree Node Context Menu" section, click on the "Create" button to define a context menu.
Add menu items by specifying the label, icon, and actions for each menu item. For example, you can create a menu item with the label "Delete" and set its icon to "fa fa-trash." Define an action such as executing a PL/SQL code to perform the delete operation.
Enable drag-and-drop functionality for the tree nodes:In the "Drag and Drop" section, set the "Drag Enabled" property to "Yes."Specify the column name that represents the node ID in your SQL query for the "Drag ID Column" property (e.g., "id").Set the "Drop Enabled" property to "Yes" if you want to allow dropping nodes onto other nodes.
In the "Drag and Drop" section, set the "Drag Enabled" property to "Yes."
Specify the column name that represents the node ID in your SQL query for the "Drag ID Column" property (e.g., "id").
Set the "Drop Enabled" property to "Yes" if you want to allow dropping nodes onto other nodes.
Save your changes and run the page to see the advanced tree in action.
This example assumes that you have a table with hierarchical data, where each row represents a node and contains an ID, a parent ID (except for the root node), a node name, a checkbox value, and icons for the context menu. The SQL query uses the START WITH and CONNECT BY PRIOR clauses to establish the hierarchical relationship.
Please note that this is a basic example, and you can further enhance the tree's functionality by adding more context menu items, defining custom actions, and applying additional customization based on your specific requirements.