Advanced Web Part configuration

How to run configuration wizard

Note: You can run the configuration wizard any number of times. It will not force reconfiguration, all data will be stored, just go through the wizard and correct any settings you need.

If the web part is not configured yet you need to start the configuration as it is described in the quick web part configuration guide.

If you need to change settings of an already configured Web Part, you need to perform actions below.

Org Chart for Office 365 or for SharePoint 2019 and modern SharePoint pages

  1. Open your page in edit mode
  2. Click ‘pencil’ icon at the left side of your web part. It will open property pane.

    IMG pencil icon

  3. Click ‘Open Config Wizard’ in the property pane.

Org Chart for Office 365 or for SharePoint 2019 and classic SharePoint pages

  1. Open your page in edit mode
  2. Open web part properties
    IMG Edit Classic Web Part
  3. Click ‘Configure’
  4. Click ‘Open Config Wizard’
  5. Don’t forget to click ‘Ok’ to apply changes after completing configuration.

SharePoint 2010/2013/2016 On-Premises

Just click on the icon on the top right corner of the Web Part:

IMG Open Config Wizard OnPremises

Data source configuration

This is the first step of the wizard.

You can choose between two data sources:

  1. SharePoint list
  2. User profiles

If you choose ‘User profiles’ as a data source, no additional configuration of data source is needed, just go through the wizard until the end. Unless you want to configure dotted-line managers or configure assistants.

To understand how Org Chart communicates with User profiles service, read blog article.

If you choose ‘SharePoint list’ as a data source, it will be configured to create a new list with demo data by default. You only need to fill ‘List name’.

Data Source

If you want to use an existing SharePoint list, you can choose it from combo box. Then you will have to specify mapping for list fields required for building correct hierarchy. The interface for mapping looks like this.

Mapping Fields

Mapping defines the connection between Organization Chart field and List field. Data from the corresponding list field will be used by the Organization Chart, for example you can specify mapping between ‘Item ID’ and list item ID.

‘Item ID’, ‘Manager ID’ and ‘Display text’ mappings are required, you can leave other mappings empty. Once you configured it, you can go through the wizard and click the finish button.

‘Item ID’ and ‘Manager ID’ are used to build hierarchy. ‘Display text’ is used as display text for entities in the org chart. For example you will see ‘Display text’ in the breadcrumb.

Description of mappings

Name Description
Employee ID This is unique ID of an employee. It can be list item ID, user login or any other unique identifier of the person.
Manager ID This is unique ID of an employee manager. For example it could be ID of manager or login of manager. We need it to build a well-structured tree.
Display text Display text is displayed in the breadcrumbs of the Org Chart.
Assistant ID

This mapping defines where information about assistant is stored for current item. This is optional mapping. Please read this instruction to learn how to configure assistants.

Dotted manager ID

This is unique ID of dotted-line manager. For example, it could be ID of manager or login of manager. Type of this field should be the same as type of “Manager ID”. Please read this instruction to learn how to configure dotted-line managers.

Support of search in a list with more than 5000 items

SharePoint has a standard restriction on SharePoint list item queries in 5000 items. To be able to use search in such list you need to index the columns on the list level and also enable option ‘Search only in indexed list columns’ in OrgChart settings. You can find more information about it in this article


You can use filters to exclude people from the chart or show just specific departments or employees. You may filter by department, name, or by any other field.

For example, using this filter you can show employees from Marketing department only:
return itemData["Department"].contains("Marketing");
And with this filter, you can exclude all employees whose name contains Smith:
return !itemData["PreferredName"].contains("Smith");

You may check this article for more information.


Starting employee

By default you can start the hierarchy from a specific employee. Just start typing the employee name and OrgChart will suggest some matching names.

You can leave starting employee field empty. In this case the following logic will be used:

  • If User profiles were chosen as a data source, starting employee will be located based on current user relations. The current person will be found, then the Org Chart will traverse up by manager relation until a person without a manager is found. The person without manager will be displayed as a starting employee.
  • If SharePoint list were chosen as a data source, the first employee found without manager item will be taken as a starting employee.

Org Chart filtration

You can include or exclude items from the Org Chart using the filtration rule. For example this rule will only include employees from the Marketing department:


  //You can get field values like this: itemData["Department"]
  return itemData["Department"] == "Marketing";


You can find complete description of filtration syntax in the separate article.


Default Layout

Setting the Layout

At this step you can choose a default layout that will be displayed for all the users when they open the page with the Org Chart web part for the first time.

Default Layout

Your users can choose a different layout to get a better visualization for their needs. To do this, one need to click on the icon and choose the layout:

Change Layout

This choice will be remembered for the current user only and will not affect other users

Layout Descriptions

Top to bottom compact

This layout is perfect if you want to keep “top to bottom” layout and fit wide structures in a smaller area. You can set the maximum number of columns you want your Org Chart to fit. If the number of boxes on the second level exceeds the maximum, the boxes will be stacked. The boxes on the third and subsequent levels are always stacked under the corresponding boxes on the second level to keep the fixed width of the structure.

In this example, the maximum number of columns is set to three. If the number of boxes on the second level is equal to or less than three, the level lines up horizontally:

IMG Top to bottom compact

If the number of boxes on the second level is greater than three, the boxes are stacked in three columns:

IMG Top to bottom compact

You can change the layout behavior to combine both horizontal and stacked orientations to better reflect your organization structure:

  1. Open your page in edit mode
  2. If the Top-to-bottom compact layout is chosen, you will see a gear icon in the top-left corner of each box on the second level. Click on it to select the orientation.
Top-to-bottom orientation

You can drill down to any box by clicking on the down-arrow icon that appears on top of each box when you hover with a cursor. Then you can change the orientation for any box that is now on the second level too. This orientation will be saved for the current box.

Note: changing the settings for the Top to bottom compact layout will affect all the users who use the layout.

Top to bottom with grouping of leaf boxes

This is a modification of a classic “top to bottom” layout. The only difference is that all leaf boxes (employees without subordinates) are joined into a two column group on the right-hand side.

IMG Top to bottom with grouping of leaf boxes

Top to bottom classic
Top to bottom is a classic tree org chart layout.

IMG Top to bottom classic

Bottom to top
The inverted version of the Top to bottom layout. The root item is displayed on the bottom of the Chart.

Left to right layout
Left to right layout is good when you want to display all boxes stacked as a file system tree.

IMG Left to right layout


General settings

This is the third step of the configuration wizard. You can use it to:

  • Choose predefined skin;
  • Set number of visible levels;
  • Enable\disable caching;
  • Enable\disable zoom;
  • Enable\disable box collapsing;
  • Display\hide level number;
  • Display\hide numbers of solid reports;
  • Enable\disable search only in indexed list columns
  • Enable\disable displaying vacancies – read Vacancies section below for more information
  • Vacancies list URL – read Vacancies section below for more information
General Settings

To change the skin of the Organization Chart choose it from combo box. There are two skins adopted for mobile devices BlackMetroTouch and MetroTouch, they have large expand buttons to simplify touch navigation, all skins support dragging of the visible area with touch.

List of available skins:

  • Modern
  • Black
  • BlackMetroTouch
  • Light Gray
  • Silver
  • Silk
  • Forest
  • Glow
  • Hay
  • Metro
  • MetroTouch
  • Office
  • Office Black
  • Office Blue
  • Outlook
  • Simple
  • Sunset
  • Vista
  • Web 2.0
  • Web Blue
  • Windows 7
Number of visible tree levels

You can also control a number of levels visible by default. Use input ‘Number of visible tree levels’ to change it. You may expand all hierarchy tree by default, just set a value large enough in the input, for example 1000.

Note: this can affect performance of Org Chart on large structures.

Enable zoom

You can use mouse wheel to zoom in and zoom out in the Org Chart web part. To disable/enable this functionality use ‘Enable zoom’ checkbook.

Display level number

Also, you can display the level number in your hierarchy tree for each user by checking ‘Display level number’.

Display number of solid line reports

You can enable the feature for displaying the number of solid line reports for all users in your structure by checking ‘Display number of solid line reports’.

Search only in indexed list columns

If it is enabled Org Chart searches only in indexed list columns. It is required if there are more than 5000 items in a list and list view threshold breaks items search.


Currently, vacancies are not supported in SharePoint 2010 version.

Note: If vacancies don’t appear in your web part try to clear cache.

Vacancies are stored in a separate SharePoint list. A list will be created automatically at specified ‘Vacancies list URL’. Once you enabled vacancies ‘Manage vacancies’ menu item will appear:

IMG Manage Vacancies Menu

This menu item redirects user to vacancies list. To create new vacancies, create new list item and specify ‘Manager’. It can be account name for ‘User Profiles’ data source and list item ID for ‘SharePoint list’ data source:

IMG Create Vacancy

Box template

Box Template

You can customize the template of the box inside the Org Chart web part. There are two options:

  1. To use visual editor (Design mode)
  2. To use HTML editor (HTML mode)

Design mode

In the visual editor you need to specify photo URL field. This property defines the field which will be used to get photo URLs for boxes. These photos will be displayed in the left side of the boxes. You can leave this property empty if you don’t have photos.

Under photo URL field property you can see area with list of fields. You can choose field from the combo box and click ‘Add field’ button. Added field will be included in the box template.

Once you added a new field you can drag it up and down to change order of fields in the box. See the picture below:

Switch Fields in Box Template

Each field has ‘Display as’ property. You can use it to change behavior of the field. There are four display types:

  • Tooltip link – if you apply this type to the field, it will be displayed as a link. This link will show the details tooltip for the current box on click.
  • Text – if you apply this type to the field, it will be displayed as a plain text.
  • E-mail – if you apply this type to the field, it will be displayed as a ‘mailto’ link.
  • Link – if you apply this type to the field it will be displayed as a link.

Once you choose the ‘Link’ as a display type you can see the tooltip. This tooltip allows to choose other field, which will be used as a URL for the link. You also can specify the URL manually:

Set URL in Boxes

Once you click to the ‘HTML mode’ button, all modifications from visual editor will be converted to HTML template.

Note: If you switch to HTML mode and finish the wizard you will not be able to go back to visual editor without resetting template to default.


HTML mode


Once you switched to HTML mode you see HTML template editor. To get more information about the HTML templating syntax read HTML templating syntax description.

Tooltip template

This step allows to specify the template for the details tooltip. This tooltip appears when you click on the link inside specific box.

The logic for this step is the same as for the the box template step.

Search result template

This step allows to specify template for single result of quick search. You can see the search box in the left top corner of the web part.

The logic for this step is the same as for the box template step.

Custom JavaScript

This step allows to specify custom JavaScript code. You can use functions from JavaScript framework to subscribe for box, tooltip, search results rendering events. Each event receives rendered element and object with field values from the data source. The object contains all fields specified in the templates of box, tooltip and search result.

You can use jQuery to customize rendered element. Read description of JavaScript framework for more information.

On the picture below you can see example of JavaScript which changes the background of boxes to red for all employees from the ‘Marketing’ Department.


Custom CSS

The Org Chart allows to specify custom CSS styles. If you are familiar with CSS, you can adjust visualization of company structure to your brand book.

For example you can change the background of the person’s box to black using such CSS:

.poch-web-part .pl-item .pl-item-template{
  background-color: black;
  border-color: black;

And this is another example which resizes Org Chart boxes to smaller size. Thus, more boxes can be displayed in the single screen.

/*Width of the box*/
.poch-web-part .poch-control .pl-item {
  width: 170px;

/*Font size for the fields in the box*/
.pl-item-card .field-container {
 font-size: 12px;

/*Font size for the header field in the box (the first in the box)*/
.pl-item-card .field-container.header-field {
 font-size: 12px;

/*Width of the photo in the box*/
.pl-item-photo img {
  max-width: 42px;

On the picture below you can see example of CSS style which changes the background of boxes to black:


Printing custom CSS

With Org Chart you can also create custom CSS styles that will be applied to the chart only when you print it. That way, you can apply custom styles that will help reading the chart after printing it, but without affecting the chart on your SharePoint site.

You can change font-size for printing purposes only:

IMG font-size

Similarly, you can also change background color of boxes:


Org Chart will add the class “pl-print-mode” to elements before printing out the chart. This way, you can handle styles in the “Custom CSS” tab that will be applied only when printing the chart.

To enlarge font-size for printing, the code used was:

.pl-print-mode .pl-item-card .field-container {
   font-size: 16px;

And to modify the background color of boxes the following code was added:

.pl-print-mode .pl-item .pl-item-template {
   background-color: #e6f4ff !important;


Resetting configuration

You can reset the configuration to initial state. All changes will be erased and the initial settings will be restored. Then you will have to run the configuration wizard from scratch.

To reset the configuration use the button in the bottom left corner of the wizard.

Finish Configuration