Build an Organizational Chart in SharePoint

Build an Organizational Chart in SharePoint

There are plenty of organizational charts for SharePoint available over the internet. But you can also do it yourself without installing any additional solution to your farm, by using only basic SharePoint features.

I will describe briefly here ​the steps to follow to build an organizational chart.

1. Define your list properly

​​A basic list is enough, you can add these columns:

  • Name​
  • Title
  • Picture
  • Thumbnail
  • Manager

This is for the visible part.

To define the organisational structure and draw the chart on screen, you can add the following columns:

  • Level
  • Position

Organizational Chart default view
View before customization

2. Customize your view

By using custom xsl or js link (I recommend JS Link that is way more powerful), define the display by using div tags and the Level / Position / Manager defined in the list structure.

You can also add a javascript to open the item in a nice modal window.

3. Customize the display form

Feel free to customize the display form and get rid of the typical SharePoint form, in order to a have a nice result.

Organizational Chart custom display form

Customized display form

4. Last but not least: styling

You can obtain a nice result by applying a css stylesheet, or directly define the styles in the xsl or the js link
SharePoint Organizational Chart
Final result

Next Post Previous Post