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:
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.
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
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?
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.
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;
}