SharePoint Org Chart Web Part

In this article, I would like to demonstrate the Plumsail Org Chart web part for SharePoint Online and SharePoint On-Premises (2019/SE). It will help you to keep employees data up to date and easily find information about an employee using the advanced search feature. In addition to visualization, Plumsail Org Chart offers navigation optimized for large org structures, which works on mobile devices as well. You can quickly configure, customize and print your organizational structure.

Installation and configuration take a few minutes. Here is the link to installation instructions for SharePoint Online and the quick web part configuration guide. The Org Chart is displayed as a web part and can use SharePoint List, Azure AD (Entra ID), SharePoint User Profiles and Excel/CSV as data sources. It is quite easy to set up synchronization for Active Directory users with the SharePoint Org Chart and view your organization inside the web part:

In this article:

1. Navigation in SharePoint Org Chart web part
   1. Smart zoom with mouse wheel
   2. Navigation with dragging
   3. Full-screen mode in SharePoint Org Chart
   4. Drill down functionality
2. Configuration and customization in SharePoint Org Chart web part
3. Print organizational structure
4. Get started

Navigation in SharePoint Org Chart web part

We know from our experience that organizational structures can become quite large. It could get difficult to navigate and manage such Org Charts. To simplify navigation for SharePoint Org Chart web part, we implemented a few advanced features.

Smart zoom with mouse wheel

Use the mouse wheel to zoom in and zoom out. This feature allows you to view more employees on the screen. Our zoom function is smart enough to recognize when the text in boxes becomes unreadable due to zooming out too much. In these cases, it hides all the information inside of the boxes except for employee names and enlarges them.

Navigation with dragging

To navigate with dragging just press the mouse button and drag to move along the org chart.

Full-screen mode in SharePoint Org Chart

It is important to have enough space to explore organizational structure, especially for large organizations. You can place the Org Chart web part to a small section of the page and use “Open full screen” button to get more space for navigation.

Drill down functionality

With this feature, you can see only the information you need. If you hover the mouse over an employee box, you will see a small drill down icon.

Click on this icon and you will drill down to smaller org chart sub-tree. You can go back, go to the root node or drill down deeper.

Configuration and customization in SharePoint Org Chart web part

Org Chart is configured with the help of the configuration wizard. By default, you can just click Next a few times and then Finish to configure the web part. But there are much more options available, including:

• Filtration of the structure
• Multiple predefined skins
• Left to right or top to bottom layouts
• Assistants, dotted line managers, and vacancies
• Visual or HTML based templates for boxes, tooltips and search results
• JavaScript framework allows you to add custom logic and handle boxes dynamically
• Custom CSS allows you to adjust the org chart to your brand book

This is just an example of what you can do with custom JavaScript, CSS and HTML templates. There are employees conditionally highlighted in the boxes and search results. Note, there are different awards displayed, such as gold medal and silver medal:

Print organizational structure

Printing organizational structure from SharePoint Org Chart web part is straight forward and it supports two formats, PDF and PNG. You can pick paper size and orientation too.

This is an example of a printed SharePoint Org Chart web part:

Get started

Start a 30-day free trial to explore all the features and test it with your data. In case you have any questions, feel free to schedule a demo call with our team to discuss your requirements and determine whether it is a good fit for you.