Ability to hide 3rd level categories from Mega Menu?

Kelli Tomasino · ‎03-13-2023

Hi!

Wondering if anyone has been able to (or if it is even possible) to hide some 3rd level categories from the mega menu. We are transitioning to EC from a custom portal and have a robust taxonomy that we will be cutting down, but would prefer to only show the 3rd level categories for our main 2nd level categories (Pay, Benefits, Career). If we add too many more 2nd/3rd level lists the page will just get too long and cluttered. Our other option is to just leave some of them without the 3rd level category but would like to filter them one more level if possible, without it showing on the mega menu.

I pulled a general screenshot from SN and added labels to show what I mean when I say 1st, 2nd, 3rd level.

Thank you!

mak1A4 · ‎05-01-2023

@Kelli Tomasino There is a way to achieve this without cloning the OOTB Widget. You have to create a UI-Script in the global scope with the following code:

(function() {

    function waitForElement(selector, timeout, interval) {
        return new Promise(function(resolve, reject) {
            var elapsedTime = 0;
            var checkForElement = function() {
                var element = document.querySelector(selector);
                if (element) {
                    resolve(element);
                } else if (elapsedTime >= timeout) {
                    reject(new Error("waitForElement: Timeout exceeded while waiting for element with selector >> " + selector));
                } else {
                    elapsedTime += interval;
                    setTimeout(checkForElement, interval);
                }
            };
            checkForElement();
        });
    }

    waitForElement(".v045301ddeb503010ed7966d647522844", 30000, 100).then(function(element) {
        var ecnavScope = angular.element(element).scope();
        if (!ecnavScope) return;

        var menuItemIds = new Set(ecnavScope.data.menuItems.map(function(item) {
            return item.sys_id;
        }));
        for (var key in ecnavScope.data.menuItemToChildrenMap) {
            if (!menuItemIds.has(key)) { //key == sys_id of a topic, you can exclude some topics from being removed here
                delete ecnavScope.data.menuItemToChildrenMap[key];
            }
        }
    });
})();

This will hide all 3rd Level Topics from the Menu if you create a JS Include Dependency for that UI-Script and add that to your EC Portal Theme. If don't want to hide all 3rd Level Topics you can modify the script exclude certain sys_ids (check the comment in the code). You could go even further and create a custom field on the topic table and make a rest call in this script to only hide the topics that have the custom field set to true.

View solution in original post

Kelli Tomasino · ‎03-16-2023

So in your example we would want level 3 to show under Hardware, Software and Network but to not have them show for the other 3 (while still having the 3rd level once you click into the 2nd level topic). Hopefully that makes sense!

Community Alums · ‎03-16-2023

Hello @Kelli Tomasino / @Johan van den H ,

U can hide the 3rd level child topics from mega menu using CSS as @Mark Roethof mentioned. And u r able to see the sub topic (as ur requirement).

Thank you.

Mark Roethof · ‎03-16-2023

You could achieve such still with CSS only, though that would be a UX mess.

So if you really want to go that direction, then you need to clone/edit the widget according to your logic. Up to you if you want to go that road, if it's really worth it, and that you accept the consequences of this..

Kind regards,
Mark

Kind regards,

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Community Alums · ‎03-16-2023

Hello @Kelli Tomasino / @Johan van den H ,

No my solution will not allow this to happen, only it helps to hide from mega menu.

If you want it will visible inside sub topic, u need to write ur code in OOTB widget "Sub-Topics" . As it pick data dynamically from mega menu, pls refer the ss of the widget:

Thank you.

Ankit Kumar3 · ‎03-17-2023

Hi @Kelli Tomasino ,

We do not have any OOTB configuration to achieve this, However you can navigate to the "Employee center Navigation widget" and In server script you would be having a code "

megaMenuTopics = portalTaxonomy.getTopics(true, 2, false);"

change the middle parameter from 2 to 1. Log out and log in again. You would be able to see the topics at 2 level.

"