Filter SharePoint Org Chart by Department

This article will show you how to filter SharePoint Org Chart by department using filtration rules and root ID. This applies to SharePoint 2010, SharePoint 2013/2016 and SharePoint Online. 

At the end of this tutorial, you’ll be able to filter Org Chart to show only subordinates under someone, like this:

01-financial-director

Or even filter your Org Chart to show only employees in a specific department, like this:

02-marketing-department

First, let’s filter items so the structure will be shown starting from the head of department. You should use the “Root ID” field, inside the “Filtration” tab in Org Chart settings. After installing and setting up Org Chart properly, go to the page where Org Chart is. Open Org Chart settings by clicking on the gear icon and then “Settings”.

03-settings-button

To be able to use this feature, you need to know the item ID of the specific item you want the root of the tree to be. This item is going to be the root of your chart, and Org Chart will show only those who are under this.

root id field

Note that the Root ID field needs to be filled with the Item ID of the corresponding item.You can learn more about what is Item ID here

In this case, “Xue Li” will be the root user of this tree so his account name (e-mail address) will be in the Root ID field. Here’s the result:

01-financial-director

Similarly, you can set up Org Chart to show only employees in the “Marketing Department” of our company.  

Inside of Org Chart settings, go to the “Filtration” tab. There you’ll find a couple fields you’ll have to fill if you want to filter your chart to specific results.

filtration tab

Org Chart uses a simple JavaScript function that will return whether or not an item should be shown. This function is inside of the “Filtration rule” field as seen above. It will use the object “itemData” to access and deal with data stored in each item. In fact, each item will have a property that you can find inside of “field names” popup, just like below.

05-field-names

So, you can use all these properties to filter items accordingly. In this article items will be filtered using the “Department” property of “itemData” object to filter and show only employees in the “Marketing Department”. 

Then, it is needed to write a code that will make the function return only items that have “Marketing Department” inside of their “Department” property. The relational operator “==” will be used to compare the property with the value written after it. So the code will look like this:

06-code-marketing-department

Then if you click finish and refresh your page, your Org Chart should like something like this:

02-marketing-department

As stated before, you can use other properties and values to filter the items to be shown according to your needs and requirements.

You can also combine conditions using || and && operators. For example:
function(itemData){
return !(itemData["AccountName"].contains("gmail") || itemData["Department"].contains("Marketing"));
}

That’s it. You’re now able to filter Org Chart according to your needs. This is really useful to maintain a clean chart to everyone which will be easier to visualize the structure and find employees quickly in the tree.