# Organizational Chart
## What is Organizational Chart
The **organizational chart** is a feature that allows you to **navigate through the company's structure** and get to **know your colleagues** with real-time profile cards based on the [People Directory](https://intranet.ai/features/people-directory/), all within your SharePoint intranet. This way, employees will be able to understand everyone's role in the company through a hierarchical structure.
The company's organizational chart in intranet.ai is **synchronized daily with Azure AD**: all you need to do is add a new entry to Azure AD and assign the responsible manager. Subsequently, the new employee will appear in the company's organizational chart.
{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Organizational Chart** by [**clicking here**](https://intranet.ai/features/oganizational-chart/) to learn more.
{% endhint %}
***
## Add the Organizational Chart web part to a SharePoint page
* If your page is not already in edit mode, click **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
* Click on it and, in the web part search box, enter **Organizational Chart** to quickly find and select the Organizational Chart web part, which is named "IAI - Organization Chart".
* Click the **Edit** properties button on the left of the web part to open the property pane and set options such as Filters and properties setup, General settings, Detail settings and Assistant color settings. See below for more information on each of these options.
***
## Configuration
1. [Filters and properties setup](#filters-and-properties-setup)
2. [General settings](#general-settings)
3. [Detail settings](#detail-settings)
4. [Assistant color settings](#assistant-color-settings)
### Filters and properties setup
In this section, you need to **indicate the sources** from which the web part will **retrieve data**.
* **Enter the contacts list site url:** insert the **url of the site where the People directory list is located**. Usually, it is the hub site of your intranet.
* **Select the contacts list**: select the **People directory** list from the drop-down menu.
### **General settings**
In this section, all the **necessary fields for displaying** both the **organizational structure** and the **preview of personal profiles** will be configured.
* **User root position**: insert the name of the person at the top of the Organization Chart. **(1)**
* **Data source**: select the data source option, whether they are retrieved from SharePoint or Graph. By default, it's set to SharePoint. **(2)**
{% hint style="info" %}
Leave it set to SharePoint because we usually use the People Directory list, which can contain a maximum of 5,000 items, while enable Graph in case the company has more than 5,000 employees.
{% endhint %}
* **Enter number of layers which have to be shown**: here you can enter the number of levels you want to display when opening the org chart page. **(3)**
{% hint style="info" %}
Our suggestion is to set it to 2.
{% endhint %}
* **Choose the field which will be displayed under the contact's name**: you can choose from the fields available in the dropdown menu. **(4)**
{% hint style="info" %}
Here we suggest putting Job Title.
{% endhint %}
* **Select the field from the list where the active/is-visible value is stored**: we suggest choosing **Active** so you can filter only the active contacts of your People Directory list. **(5)**
* **Choose field where the staff value is stored**: you can select **Assistant** from the list to find contacts who have this field filled out. **(6)**
{% hint style="info" %}
**Please note:** Assistant Function must be set before proceeding with this configuration. If you didn't and you don't know how to set up it, please find further information on how to set up the [Assistant Function](#assistant-function) down below on this guide.
{% endhint %}
* **Insert the staff value which identify assistants**: here you have to put the name you have used to identify staff people. **(7)**
> For example: Assistant
* **Chart structure**: here you can choose the layout of the org chart. You have the following options: Normal, Mixed, Tree, Left tree offset or Right tree offset. **(8)**
* **Choose the scroll type**: thanks to this flag, you can decide how the organigram behaves when you use the mouse wheel. There are **two scroll types**: if you select **Zoom**, when using the mouse wheel you will zoom in and out, making the organigram bigger or smaller. If you select **Scroll**, you will enable a vertical scrolling: if the expanded nodes take up more space than the height of the web part, you will be able to scroll up and down with the mouse wheel.
* **Select the orientation type**: here you can choose the orientation of the organizational chart by selecting the **position of the root node**. The following options are available:
### **Detail settings**
In this section, we can **add the link** to the [People Directory](https://intranet.ai/features/people-directory/) so that when individual profile cards are clicked, **the details of that contact** can be viewed.
* **Detail page url**: insert the link to the [People Directory](https://intranet.ai/features/people-directory/) page.
{% hint style="info" %}
Explore the **advantages** of Intranet.ai **People Directory** by [**clicking here**](https://intranet.ai/features/people-directory/) to learn more.
{% endhint %}
* **Do you want to open contact detail in a new tab?** You can select the option you prefer.
> By clicking on **Yes**, you’ll allow people to stay in the Organization Chart page and see a new tab opening with the contact detail.\
> \
> By clicking on **No**, once people will click the contact, it’ll be redirected to the contact detail, without opening a new tab.
### **Assistant color settings**
In this section, you can choose the color of the Assistant’s card (if the assistant field is provided).
* The first field is **Choose the background color for the assistant**, where you can either type the hex color code or choose directly from the panel.
* The second field is **Choose the color for the border of the assistant card**, where you can either type the hex color code or choose directly from the panel.
* And the last field is **Choose the color for the assistant card test**, where you can either type the hex color code or choose directly from the panel.
{% hint style="info" %}
**Please note:** once you’re done with the amends, always remember to click on Republish. Otherwise, the amends you made will be discarded.
{% endhint %}
***
## Assistant function
The Organizational chart web part enables you to include assistants within the organizational chart accurately, without causing any confusion regarding levels and hierarchy. This web part operates on a hierarchical structure, where assistants are directly linked to their respective managers.
{% hint style="info" %}
**Please note:** it's important to note that assistants should not be regarded as colleagues of the subordinates, and they cannot have individuals reporting to them as subordinates.
{% endhint %}
### Options for Configuring the Assistant Function
1. [**OPTION 1:** Creating a dedicated column via the People Directory list (without using Azure AD)](#option-1-creating-a-dedicated-column-via-the-people-directory-list)
2. [**OPTION 2**: Editing an already existing tab on Azure AD](#option-2-editing-an-already-existing-tab-on-azure-a-d)
3. [**OPTION 3:** Inserting a script via Graph (IT colleagues support is required) to edit an ExtensionAttribute on Azure AD](#option-3-inserting-a-script-via-graph-it-colleagues-support-is-required-to-edit-an-extensionattribut)
4. [**OPTION 4:** In case you have a local Azure AD, it’s possible to edit an ExtensionAttribute without using Graph.](#option-4-in-case-you-have-a-local-azure-a-d-its-possible-to-edit-an-extensionattribute-without-using)
### OPTION 1: Creating a dedicated column via the People Directory list
This is the quickest solution because it does not require the use of Azure.
{% hint style="info" %}
**Please note:** since we’re not going to use Azure AD, this column won’t be synchronized with AD.
{% endhint %}
#### **Procedure**
* Click on the **Settings** icon on the top right of the page, then click on **Site contents**.
* Please scroll down until the **People Directory list** and click it.
* Once the People Directory is open, please scroll right until the last column, and click on **+ Add Column**. Select the **Text** button and click on **Next**.
* A **pop up will appear** on the right side of the page, with the following fields:
* In the **Name** field, please write **"Assistant"** (or the name you’d like to use to identify staff position), then click on **Save**.
* Thereafter, please **select the person to whom you want to assign this attribute**, and click on **Edit**.
* A sidebar will appear: simply look for **Assistant**, which is generally located toward the end of the list. Underneath it, please write "Assistant", or the name you’d like to use to identify staff position, and click on **Save**.
{% hint style="info" %}
Please remember to always use the same word to identify people in staff.
{% endhint %}
### Organizational chart page configuration
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the **Edit** properties button on the top right the page.
* Select the webpart and click the edit properties button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Assistant** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).
* Please always remember to click on **Republish**.
### OPTION 2: Editing an already existing tab on Azure AD
This option is directly linked to Azure AD. However, it’s not considered as a best practice as the procedure involves editing a label initially assigned to another value.
#### **Procedure**
* The first step is to **select an Azure AD field** that will never be filled in (i.e., About me or Birthday). Once this field is defined, please **rename** it as **"Assistant"**.
* Select **the person to whom you want to assign this attribute**, and fill in the field with "Assistant".
{% hint style="info" %}
Anytime you make a change on Azure AD, the People Directory is automatically updated during the night.
{% endhint %}
#### Organizational chart page configuration
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the **Edit properties** button on the top right the page.
* Select the webpart and click the edit properties button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Assistant** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).
* Please always remember to click on **Republish**.
### OPTION 3: Inserting a script via Graph (IT colleagues support is required) to edit an ExtensionAttribute on Azure AD
This is a technical solution that involves modifying an ExtensionAttribute.
{% hint style="info" %}
**Please note:** to fill an ExtensionAttribute IT support is needed.
{% endhint %}
#### Procedure
* **Step 1:** go to .
* **Step 2:** please log in with your proper account.
* **Step 3:** Select **POST > beta >** [https://graph.microsoft.com/beta/users/{userPrincipalName}/onPremisesExtensionAttributes](https://graph.microsoft.com/beta/users/%7BuserPrincipalName%7D/onPremisesExtensionAttributes).\
Instead of {userPrincipalName}, please insert the name of the referring manager.
* **Step 4:** click on **Run** and type the following text inside the text box.
**Text:**
> {
>
> "extensionAttribute1": "Assistant"
>
> }
#### Organizational chart page configuration
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the **Edit** properties button on the top right the page.
* Select the webpart and click the edit properties button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Extension Attribute 01** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write “**Assistant**” (or the word you have chosen).
* Please always remember to click on **Republish**.
### OPTION 4: **In case you have a local Azure AD, it’s possible to edit an ExtensionAttribute without using Graph.**
If you have a local Azure AD, you can simply edit an ExtensionAttribute, without using Graph.
#### Procedure
**Select the person to whom you want to** **assign this attribute**, and fill the field with "**Assistant**”.
{% hint style="info" %}
Anytime you make a change on Azure AD, the People Directory is automatically updated during the night.
{% endhint %}
#### Organizational chart page configuration
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the **Edit** properties button on the top right of the page.
* Select the webpart and click the edit properties button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Extension Attribute 01** (or the one you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).
* Please always remember to click on **Republish**.
{% hint style="info" %}
Remember that every time you make a change in Azure AD, it will only be visible the following day. This is because our feature is automatically updated every night.
{% endhint %}
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.intranet.ai/sharepoint-intranet/components/organizational-chart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
* Click on it and, in the web part search box, enter **Organizational Chart** to quickly find and select the Organizational Chart web part, which is named "IAI - Organization Chart".
button on the left of the web part to open the property pane and set options such as Filters and properties setup, General settings, Detail settings and Assistant color settings. See below for more information on each of these options.
***
## Configuration
1. [Filters and properties setup](#filters-and-properties-setup)
2. [General settings](#general-settings)
3. [Detail settings](#detail-settings)
4. [Assistant color settings](#assistant-color-settings)
### Filters and properties setup
In this section, you need to **indicate the sources** from which the web part will **retrieve data**.
button on the top right the page.
button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Assistant** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).
button on the top right the page.
button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Assistant** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).
button on the top right the page.
button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Extension Attribute 01** (or the word you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write “**Assistant**” (or the word you have chosen).
button on the top right of the page.
button on the left of the web part to open the property pane.
* Select the **General Settings** window.
* Under the **Choose field where the staff value is stored** field, please select **Extension Attribute 01** (or the one you have chosen).
* Under the **Insert the staff value which identify assistants** field, please write **"Assistant"** (or the word you have chosen).