Skip Ribbon Commands
Skip to main content
Sign In

Org. Chart web part configuration

The Org. Chart web part configuration includes configuration steps similar to other Data View Toolset web parts, detailed information is available in the Web Part configuration page.

This article describes the data source and display configuration details which are unique to the Org. chart web part.


Org. Chart data source configuration

After you add the web part to the page and click "Configure data source" you will see the data source settings page:
Click "Add a data source" to add your 1st data source, you will see the following settings page:
Give your data source a name and then select the data source type.
The available data source types are:
  • SharePoint List
    connect the Org. Chart to a single SharePoint list.
  • Excel File
    connect the Org. Chart to MS Excel file (stored in a SharePoint library).
  • Graph API
    connect the Org. Chart to M365 datasource such as Azure AD.
  • SharePoint User Profiles
    connect the Org. Chart to SharePoint Profile Services.
Select one of the data sources and then configure it according to linked guidelines above.

Color coding

Use the Color coding tab to configure back/fore colors for your data source. This is most usefull when you have multiple data sources and you want each to appear in a different color.

Column mapping

After you select a data source and configure it, click "Next" to get to the "Org. Chart column mapping" settings page:
In this settings page you configure which datasource column should be displayed for each of the Org. Chart's displayed properties.
The Org. Chart displayed properties are:
  • Name - This is the employee name.
  • Position - The employee's job title.
  • Manager - The employee's manager, the chart displays the hierarchy structure according to the relation of employees to their managers.
  • Reports to - This property is needed for cases where employee reports to somone in addition to his manager, see example below.
  • Picture - Employee's picture.
  • Phone columns - one or more columns that hold phone numbers.
  • Email columns - one or more columns that hold email addresses.


In the following org. chart, the employee "Dewey Northrup":

- Her manager is Bryant Abundis
- She reports to Elidia Madril

That's it, once data source is configured and its relevant columns mapped to the Org. Chart's properties, you should see the datasource data on your Org. Chart view.

Org. Chart display configuration

As described in the Configuring web part display page, the display configuration is all about chosing which controls you want to have and then configuring each of these controls.
By default, when you add the Org. Chart web part to the page, you see the following controls:
By default the following controls appear:
3. Conditional Formating - use this control to implement Org. Chart color coding.
4. Org Chart by Org. ChartJs
The 1st three controls are generic controls (available in all Data View Toolset web parts), click their links above to learn how to configure them.
As for the control that displays the actual Org. chart:
Here you have several controls you can use, by default the "Org Chart by orgChartJs" control is displayed. The other available Org. Chart controls provide different templates, as well some of their properties are different.
The next sections provide more details about the Org. Chart control configuration.

Org. Chart control configuration

Clicking the Org. Chart control's gear icon on the right, you'll see the following settings toolpane:
By default the web part is in "Simple mode" which means it displays only the most basic and commonly used properties:
Property Description
Number of levels to open by default This is the num,ber of tree levels expanded by default.
Select the org. chart displayed tree orientation: top-down,left-right etc.
The Layout property defines the way the presented hierarchy will be rendered: 
- Normal:  renders each nodes' child nodes horizontally.
- Mixed, optimized for space: the chart will use both vertical and horizontal layouts to optimize the space taken by the chart.
- Tree: this layout renders child nodes in clusters:

- Tree, left/right offset: Same as Tree layout, only that child nodes will be rendered in cluster where all employyees appear on the left/right side.


By default every employee "box" displays his/her name and position:
The 1st line is the "Name" property. In this property you can configure the employee box to display and other column/s from the data source.
Click the "edit formula..." link to open the formula editor where you can choose any other column or combination of clolumns to display in the Name field..
Position   This field stores the value that will be displayed in the employee box in the 2nd line. Click the "edit formula..." link to open the formula editor where you can choose any other column or combination of clolumns to display in the Position field.

Clicking the "Switch to advanced mode" button at the top of this settings page will reveal additional properties:

Property Description
Maximum content height   Chart's max height in pixels. 
Template The Org. Chart control includes several pre-defined templates, each includes different shapes, styles and colors..
Assistant Template You can configure a different display template for Assistant nodes. Assistant nodes are usually displayed in a different layout than other employees.
To mark the required employees as assistants you need to use the Conditional Formatting control to setup the rule that defines Assistant nodes. Once you have this working, those Assistant nodes will appear according to the selected Assistant template property.
Show zoom controls 
Switch to "On" to have "zoom-in/out" menus appear under the control's menu:
Zoom on mouse scroll  Switch to "On" to enable end-users to zoom-in/out by using the mouse scroll. 
Show search
Switch to "On" to show a "Search" textbox in the chart:
This "Search" textbox behaves differently than the Filter control:
The Filter control filters the displayed contents, and shows only the items that comply with the applied filters.
The Org. chart "Search" box keeps all chart items displayed and only highlights the searched person using a quick flush effect.
Show export
Switch to "On" to show all export options when user clicks the Hamburger menu:
Background color Select color or type required bchart background color name. 
Show employee count  Switch to "On" to display the number of employees under each employee.
Additional information This property is displayed in templates where the employee box includes 3 lines of text.
Card actions
When clicking employee's box user sees that employee's card:
Clicking the "Card actions" option shows the actions available by default:
You can change/add/remove actions by using the script editor. 



Org. Chart conditional formatting

A common requirement is to have different employee box colors according to various conditions such as their position, department etc.
By using the Conditional Formatting control you can:

  • Apply colors to employee boxes according to various conditions
  • Render selected employee boxes as "Assistant" nodes.
  • Hide selected employee boxes according to a condition


Apply colors to employee boxes according to various conditions

To apply colors to employee boxes according to some conditions:
1. Edit the page
2. Add the Conditional Formatting control above the Org. Chart control
3. Add rules that include the required back/fore colors, applied to the entire item.
In the Chart below, we configured several conditional formatting rules that apply colors to employees boxes according to their department:
Each of the rules above applies a selected color to a selected department, for example looking at the "Sales" conditional formatting rule:
You can see it applies to all items where "Department" equals "Sales" department.

Render selected employee boxes as "Assistant" nodes

In the following chart, the employee "Sonja Prather" is configured as assistant. that is why she is displayed in a different layout than all other employees:
To have selected nodes displayed as "Assistant" you need to configure the following:
1. In your datasource (no matter what type), you need to have a column/property that identifies the selected employees as assistants.
2. In the Org. Chart control configure the "Assistant Template" property and select the template you wish to display for assistants.
3. Add the Conditional Formatting control above the Org. Chart control and configure it with a condition that finds Assistant items, and marks them as Assistant-type nodes.
Referring to the screenshot above, this chart is connected to a list that has a column called "IsAssistant" of type Yes/No, so we have configured the following conditional formatting rule:

and with the following condition:
This way all assistants are marked as Assistant type employees in the chart.

Hide selected employee boxes according to a condition

Sometimes you might need to hide several/many employees from the Org. chart.
Although you can hide selected employees by making them hidden in edit mode, when you need to hide many employees, it's easier to do it using the Conditional Formatting control using a condition.
Example: A chart that displays only internal employees, not including contractors.
To hide employee boxes according to some condition, add the Conditional Formatting control above the Org. Chart control and configure it with the required condition and marks them as hidden:
So in this case, we've set up a conditional formatting rule that hides employees that are assistants.
Such hidden employee boxes will appear in edit mode with "(hidden)" prefix, however in view mode, end-users will not see the hidden employees and their child nodes.
When you hide an employee node from the chart, its child nodes will become also hidden.

Specific employee node settings

In addition to the option to customize employee boxes layout and colors according to conditions (using the conditional formatting control), you can also edit the settings of specific employee boxes. This is required when you don't have a logic condition, you just need to display a few employee boxes in a different way.
In Edit mode, click the employee box' 3 dots and then click the "edit" icon:
This will open the following popup where you can configure a display theme for the specific employee, or hide the employee from the chart:
Last modified at: 6/13/2022 3:43 AM
Last modified by: Nimrod Geva
Type: User-guide
Article has been viewed 1627 times.

Also in this category

Powered by KWizCom WikiPlus