Skip to Content (Press Enter)
UserImage.jpg
bharat koshti
1259Views
7Comments
how to add submenu in submenu in outsystem. two levels of submenu.
Question

hi i want to add two levels of sub menu. how to add submenu into submenu.

Plz refer the below attached file:



submenu two level.png
0
0
22 Mar 2018
Copy Link
2019-11-08 16-23-42
César Mateus Conceição

bharat koshti wrote:

hi i want to add two levels of sub menu. how to add submenu into submenu.

Plz refer the below attached file:


Bharat,


You can manage with SilkUI to do this look this thread in forum.

https://goo.gl/m6AMgh


0
0
22 Mar 2018
Copy Link
2019-10-27 01-32-56
Caio Santana Magalhães
 
MVP

Hello!


Bumping this old thread with a solution that might be useful in the future.


In order to have nested Sub-Menus (effectively having one or multiple DropDownMenu Web Block(s) inside another DropDownMenu Web Block), a small JavaScript tweak is needed.


If that is the case, please include the following script in the layout Web Block (or some other place that seems fit).


// Fix opening/closing nested menu items
document.body.addEventListener( "click", function( e ) {
    var currentMenuButton = e.target.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! currentMenuButton ) {
        return;
    }
    var parentMenuButton = currentMenuButton.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! parentMenuButton ) {
        return;
    }
    parentMenuButton.classList.remove( "open" );
    setTimeout( function() {
        parentMenuButton.classList.add( "open" );
    }, 0 );
}, true );

// Set custom menu animation
if ( window.RichWidgets ) {
    window.RichWidgets.DropDownMenus.customOpenFunction = function( e ) {
        if ( e.parentNode.classList.contains( "open" ) ) {
            $( e ).fadeIn( 200 );
        }
    };
    window.RichWidgets.DropDownMenus.customCloseFunction = function( e ) {
        $( e ).stop().fadeOut( 200 );
    };
}


This has been tested in a Traditional Web application (O10).

2
0
04 Jun 2020
Copy Link
2019-10-04 15-01-22
Dhiraj Manwani

Caio Santana Magalhães wrote:

Hello!


Bumping this old thread with a solution that might be useful in the future.


In order to have nested Sub-Menus (effectively having one or multiple DropDownMenu Web Block(s) inside another DropDownMenu Web Block), a small JavaScript tweak is needed.


If that is the case, please include the following script in the layout Web Block (or some other place that seems fit).


// Fix opening/closing nested menu items
document.body.addEventListener( "click", function( e ) {
    var currentMenuButton = e.target.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! currentMenuButton ) {
        return;
    }
    var parentMenuButton = currentMenuButton.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! parentMenuButton ) {
        return;
    }
    parentMenuButton.classList.remove( "open" );
    setTimeout( function() {
        parentMenuButton.classList.add( "open" );
    }, 0 );
}, true );

// Set custom menu animation
if ( window.RichWidgets ) {
    window.RichWidgets.DropDownMenus.customOpenFunction = function( e ) {
        if ( e.parentNode.classList.contains( "open" ) ) {
            $( e ).fadeIn( 200 );
        }
    };
    window.RichWidgets.DropDownMenus.customCloseFunction = function( e ) {
        $( e ).stop().fadeOut( 200 );
    };
}


This has been tested in a Traditional Web application (O10).

 

Hi caio, can you please elaborate this, in which exact web block we need to place this Java script code.

More detail to achieve this 3 level menu.

Thanks,
DM

 

0
0
23 Jul 2020
Copy Link
2019-10-27 01-32-56
Caio Santana Magalhães
 
MVP

Hi! You can place it in your layout webblock.


I've tested it for two-level sub-menus, but not for three-level sub-menus, though.


Thanks.

1
0
24 Jul 2020
Copy Link
UserImage.jpg
Antonio Santos

Thanks, it is working but I had to put 

document.addEventListener( "click", function( e ) {

instead of 

document.body.addEventListener( "click", function( e ) {

in header javascript section.


Another issue, all my submenus inside the menu (inside submenu) are shown when I click the parent menu, and I have to click twice to hide them.

Also the V thingie appears on the left side. You can see it with my printscreen.

MenuSubMenu.png
0
0
23 Dec 2020
Copy Link
UserImage.jpg
Michel Veerman

I've added the following just before 'var parentMenuItem = ...' to fix the problem with all submenu's being (incorrectly) shown as opened.


        //   Fix error in original script, which caused all sub-sub-menu items to be visible initially after opening the parent,
        //   even though the state of the panel was closed (a 'display: none' was missing on the Menu_DropDownPanel)
        var childNodes = currentMenuButton.querySelector(".Menu_DropDownPanel")?.querySelector(".Menu_SubItemsPlaceholder")?.childNodes;
        if (childNodes)
        {
            var childItems = Array.prototype.slice.call(childNodes);
            childItems.forEach(function(e) {
                setTimeout( function() {
                    // Look for submenu's
                    if (e.classList.contains("Menu_DropDownButton")) {
                        var dropDownPanel = e.querySelector(".Menu_DropDownPanel");
                        if (dropDownPanel)
                            dropDownPanel.style.display = "none";
                    }
                }, 0);
            });
        }
0
0
15 Mar 2021
Copy Link
UserImage.jpg
Saransh

Can someone tell the exact solution for it? What needs to be done?

1
0
08 Jun 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.