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

Community Alums · ‎03-14-2023

Hello @Kelli Tomasino ,

Yes u can hide hide the topics on the 3rd level of the Employee Center mega menu.

Before removing connected content for Hardware subtopic 'computers' was there:

For this u need to remove connected content of that child topic.

After removing connected content logout & then login back to the instance. (Pls note sometime it will take few hours to reflect the changes in portal).

After removing subtopic result is:

Similarly, u can do it for ur Pay and Time.

If there will be one connected content then it will be visible to you. So if you don't want to show it in mega menu then please remove its connected contents.

@Kelli Tomasino , please mark my answer as accepted solution and helpful. If it is works for you.

Thank you.

Johan van den H · ‎03-14-2023

Interesting question @Kelli Tomasino !

We are struggling to design easy access to our services through the EC mega menu right now.
I think we hope to achieve the same as you Kelli, that is too not show all "third level" topics on the mega menu to make it less cluttered for our audience.

But at the same time we want to provide our audience with all the services we have available.

In the example the "third level" topic Computers is no longer shown in the mega menu, but we (and I think also Kelli) would like to show the Computers topic in the all items display when you click on Hardware.

I tried to illustrate our wish in the screenshots below.

Would this be possible (without too much customisation)?

Kelli Tomasino · ‎03-16-2023

Yes - this is exactly what we are looking for! We want our employees to be able to get to the 3rd level categories once they are within the 2nd level topic page but don't need them all to be shown on the mega menu. @Community Alums does your solution allow this to happen or is it something we need to customize?

Mark Roethof · ‎03-16-2023

Hi there,

Interesting question. Haven't seen an out-of-the-box configuration option for this. Avoiding cloning/editing widgets, you could hide the 3rd level using CSS, though this doesn't look really good from UX perspective. Though maybe it does suite your case.

Kind regards,
Mark

Kind regards,

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

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