Search Dropdown by Department

Hello
I was trying to understand the filtering page of the documentation but I could not find a way how to add another search field to show a dropdown menu of the departments at my company and filter them by that, is this possible?
Thank you!

Hello! I am sorry for the delay in replying you. Could you please clarify whether the root employee will be different for each filtration rule?

1 Like

hello! thanks for answering,
yes, by department, but in case of a dropdown menu.
Something like this:

2022-03-22 13_22_33-dropdown menu by department - Google Search

Thank you for the clarification. I am working on the code for for this task and will get back with it soon.

1 Like

Hi,

We are also looking for this solution. We are reading from a SP list. Is this possible?
Thanks

It seems possible. I have already found out how to apply a dynamic filtration rule but stumbled over specifying a root employee for each case. I requested help from developers and will let you know about the results.

Please use this solution. It is developed for the default demo list. If required, modify it according to your case.
Filtration

function (itemData) {
    var dep = GetUrlKeyValue("dep");
    if (dep == "mkt") {
        return itemData["Department"] == "Marketing Department";
    } else if (dep == "fin") {
        return itemData["Department"] == "Financial Department";
    } else {
        return true;
    }
}

Custom JS

var pageUrl = new URL(location.href);

function filterDep() {
    //Set a URL parameter
    pageUrl.searchParams.append("dep", "any");
    //Add a filtration button and selection menu
    var filter = $('<div class="poch-expanding-dep-item dep-menu"><a href="#" class="poch-control-panel-link"><i class="ms-Icon ms-Icon--Filter poch-fabric-icon"></i></a></div>');
    $("#RightControlZone").prepend(filter);
    var filterSubMenu = '<div class="poch-sub-menu dep-sub-menu" style="display: none;"></div>';
    $(".dep-menu").append(filterSubMenu);
    var mkt = '<a class="dep-item dep-mkt" title="Marketing">Marketing Department</a>';
    var fin = '<a class="dep-item dep-fin" title="Financial">Financial Department</a>';
    var any = '<a class="dep-item dep-any" title="Any">Any</a>';
    $(".dep-sub-menu").prepend(mkt + fin + any);
    //Get the current selected department
    var currentDep = ".dep-" + GetUrlKeyValue("dep");
    $(currentDep).addClass("dep-active");
    
    //A function to display/hide the department selection menu
    $(".dep-menu > a").click(
        function () {
            if ($(".dep-menu").hasClass("active")) {
                $(".dep-menu").removeClass("active");
                $(".dep-sub-menu").attr("style", "display: none");
            } else {
                $(".dep-menu").addClass("active");
                $(".dep-sub-menu").attr("style", "display: block");
            }
        }
    );
    //Functions for navigating to the same page with a new department parameter
    $(".dep-mkt").click(
        function () {
            if (!$(".dep-mkt").hasClass("dep-active")) {
                renderer.dataProvider.clearCache();
                pageUrl.searchParams.set("dep", "mkt");
                window.location.href = pageUrl;
            }
        }
    );
    $(".dep-fin").click(
        function () {
            if (!$(".dep-fin").hasClass("dep-active")) {
                renderer.dataProvider.clearCache();
                pageUrl.searchParams.set("dep", "fin");
                window.location.href = pageUrl;
            }
        }
    );
    $(".dep-any").click(
        function () {
            if (!$(".dep-any").hasClass("dep-active")) {
                renderer.dataProvider.clearCache();
                pageUrl.searchParams.set("dep", "any");
                window.location.href = pageUrl;
            }
        }
    );
}

filterDep();

var dep = GetUrlKeyValue("dep");

//Set the root employee according to the current option
if(dep) {
  if (dep == "mkt") {
        renderer.config.RootNodeId = "3"; // Xue
    } else if(dep == "fin") {
      	renderer.config.RootNodeId = "2"; // Derek
    } else {
        renderer.config.RootNodeId = "1"; // David
    }
}

Styles

.right-control-zone {
  min-width: 140px;
}

.dep-active {
  font-weight: bold;
}

.dep-item {
  cursor: pointer;
}
1 Like

Thank you very much!!! this helps a lot!

Hi Evegny,

It worked really well.

A quick question, is is possible to increase the length of the dropdown menu as shown in the image?
Depts display  length

Hello Moses! Yes, you can inspect the block of the sub-menu in the browser developer tools and find the classes you need. Use them in custom styles to set the required width.