Skip to Main Content
Feature Request FR-2527
Product Area User Interface
Status ROADMAP

21 Voters

Expand/collapse the left navigation sub-menu on clicking the label

badr.belahrach Public
· May 18 2022

Idea Summary
The default behavior of the left navigation menu is not user-friendly.
1. The user has to click on “>” at the end of the list menu item to expand or collapse it.
2. when it's expanded, would be better to keep it expanded for that specific sub-menu, so we can see the list current entry selected

Use Case
Each time user want to expand/collapse the left navigation sub menu.
It will be easier and simpler to click on the item label to expand/collapse the sub menu

Preferred Solution (Optional)
Steps

  • Go to Global Page (Page 0).
  • Create a dynamic action on page load.
  • Action : JavaScript and paste below given code.
$("#t_TreeNav").on("treeviewactivatenode", function(e, ui) {
    var n$ = $(e.originalEvent.target).closest(".a-TreeView-content");
    if (ui.nodes.length > 0 && ui.nodes[0].link === "") {
        if (n$.parent().hasClass("is-expandable")) {
            $(this).treeView("expand", n$)
        } else if (n$.parent().hasClass("is-collapsible")) {
            $(this).treeView("collapse", n$)
        }
    }
});
This is currently on the roadmap for a future release of Oracle APEX.

Comments

Comments

  • john.snyders APEX Team OP 3.1 years ago

    It depends on how the nav tree list is defined. Usually I see people put a URL for every node so 

    ui.nodes[0].link === ""
    

    will never be true. However in cases where only the leaf nodes have URLs you are correct that click to expand/collapse would be helpful. So it could be an option.

    I think your code is good as is.

    For issue 2 you may want to try 

    $("#t_TreeNav").treeView("option", "autoCollapse", false)