Search Dropdown by Department

Org Chart
11

Update for Org Chart 4.

Upload an attached HTML file to SiteAssets > OrgChart on the site with the Org Chart page. It contains HTML content for the filter menu.
filterButton.html (1.7 KB)

Also use this code on the custom JavaScript step. Check the variables of the filter object and adjust them to your case if required (especially the URL of the HTML file).

//Create a global object with custom data
window.filter = {};

//Listing variables for the GET request in the URL
filter.getParam = {};
filter.getParam.key = "dep";
filter.getParam.any = "any";
filter.getParam.mkt = "mkt";
filter.getParam.fin = "fin";
if (GetUrlKeyValue(filter.getParam.key)) {
    filter.getParam.value = GetUrlKeyValue(filter.getParam.key);
} else {
    filter.getParam.value = "any";
}

//Listing department names
filter.depName = {};
filter.depName.mkt = "Marketing Department";
filter.depName.fin = "Financial Department";

//Listing root employees for the departments
filter.rootId = {};
filter.rootId.any = "1"; //David
filter.rootId.fin = "2"; //Xue
filter.rootId.mkt = "3"; //Derek

//Listing custom HTML classes
filter.cssClass = {};
filter.cssClass.act = "dep-active";
filter.cssClass.mkt = "dep-mkt";
filter.cssClass.fin = "dep-fin";
filter.cssClass.any = "dep-any";

//jQuery selectors for further usage
filter.selector = {};
filter.selector.button = ".poch-expanding-departments-item > .poch-dropdown";
filter.selector.item = ".poch-dropdown-action-item";
filter.selector.label = ".poch-expanding-departments-item__label";
filter.selector.current = ".dep-" + filter.getParam.value;

//Listing URL variables
let pageUrl = new URL(location.href);
let htmlUrl = "https://tenant.sharepoint.com/sites/OrgChart/SiteAssets/OrgChart/filterButton.html";

//Set the root employee according to the current option
if (filter.getParam.value == filter.getParam.mkt) {
    api.config.rootNodeId = filter.rootId.mkt;
} else if (filter.getParam.value == filter.getParam.fin) {
    api.config.rootNodeId = filter.rootId.fin;
} else {
    api.config.rootNodeId = filter.rootId.any;
}


api.onInitialLoadingFinished(() => {
    //Show the loading wheel
    api.showLoadingPanel();

    //Get the HTML content of the filter button
    $.get(htmlUrl, function (data) {
        //Add the HTML content to the right-zone menu    
        $(".poch-control-menu").prepend(data);

        //Hide the loading wheel
        api.hideLoadingPanel();

        //Mark the active department with a class
        $(filter.selector.current).addClass(filter.cssClass.act);

        const outsideClickListener = (event) => {
            const $target = $(event.target);
            if (!$target.closest(filter.selector.button).length) {
                $(filter.selector.button).removeClass("is-active");
                removeClickListener();
            }
        }
        
        const removeClickListener = () => {
            document.body.removeEventListener('mousedown', outsideClickListener);
        }
        
        //Show or hide the menu on click
        $(filter.selector.button).click(function () {
            if ($(this).hasClass("is-active")) {
                $(this).removeClass("is-active");
                removeClickListener();
            } else {
                $(this).addClass("is-active");
                document.body.addEventListener('mousedown', outsideClickListener);
            }
        });

        //Function to switch between departments
        $(filter.selector.item).has(filter.selector.label).click(function () {
            if (!$(this).hasClass(filter.cssClass.act)) {
                if ($(this).hasClass(filter.cssClass.mkt)) {
                    pageUrl.searchParams.set(filter.getParam.key, filter.getParam.mkt);
                    window.location.href = pageUrl;
                } else if ($(this).hasClass(filter.cssClass.fin)) {
                    pageUrl.searchParams.set(filter.getParam.key, filter.getParam.fin);
                    window.location.href = pageUrl;
                } else {
                    pageUrl.searchParams.set(filter.getParam.key, filter.getParam.any);
                    window.location.href = pageUrl;
                }
            }
        });
    });
});

Here is a rule for the filtration step.

(itemData) => {
    if (filter.getParam.value == filter.getParam.mkt) {
        return itemData["Department"] == filter.depName.mkt;
    } else if (filter.getParam.value == filter.getParam.fin) {
        return itemData["Department"] == filter.depName.fin;
    } else {
        return true;
    }
}

And the styles for the custom CSS step.

.poch-application-container .poch-expanding-departments-item__label {
    margin-left: 18px;
}

.poch-application-container .poch-expanding-departments-item__icon {
    position: absolute;
    color: #038387;
}

.poch-application-container .poch-expanding-departments-item__default-label {
    margin-left: 3px;
    font-size: 12px;
    color: #616161;
}

.poch-dropdown-action-item > .poch-expanding-departments-item__icon {
    display: none;
}

.dep-active > .poch-expanding-departments-item__icon {
    display: inline-block;
}