Search Dropdown by Department

Org Chart
7

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

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");

    const outsideClickListener = (event) => {
        const $target = $(event.target);
        if (!$target.closest(".dep-menu").length) {
            $(".dep-menu").removeClass("active");
            $(".dep-sub-menu").attr("style", "display: none");
            removeClickListener();
        }
    }

    const removeClickListener = () => {
        document.body.removeEventListener('mousedown', outsideClickListener);
    }

    //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");
                removeClickListener();
            } else {
                $(".dep-menu").addClass("active");
                $(".dep-sub-menu").attr("style", "display: block");
                document.body.addEventListener('mousedown', outsideClickListener);
            }
        }
    );

    //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