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.
example:
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:
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. |
Orientation
| Select the org. chart displayed tree orientation: top-down,left-right etc. |
| Layout | 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. |
| Name | 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: COMMENT: 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.
Example:
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.
IMPORTANT:
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: