Organizational Chart
The intelligent organizational chart integrated with our People Directory to navigate the company's structure.
Last updated
Was this helpful?
The intelligent organizational chart integrated with our People Directory to navigate the company's structure.
Last updated
Was this helpful?
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 , 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.
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 IAI Organizational Chart to quickly find and select the IAI Organizational Chart web part.
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.
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)
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)
Choose the field which will be displayed under the contact's name: you can choose from the fields available in the dropdown menu. (4)
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)
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:
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.
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.
The IAI - 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.
This is the quickest solution because it does not require the use of Azure.
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.
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.
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.
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".
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.
This is a technical solution that involves modifying an ExtensionAttribute.
Step 2: please log in with your proper account.
Step 4: click on Run and type the following text inside the text box.
Text:
{
"extensionAttribute1": "Assistant"
}
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.
If you have a local Azure AD, you can simply edit an ExtensionAttribute, without using Graph.
Select the person to whom you want to assign this attribute, and fill the field with "Assistant”.
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.
Click the Edit button on the left of the web part to open the property pane, which has four sections: Filters and properties setup, General settings, Detail settings and Assistant color settings. See below for more information on each of these options.
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 down below on this guide.
In this section, we can add the link to the so that when individual profile cards are clicked, the details of that contact can be viewed.
Detail page url: insert the link to the page.
Explore the advantages of Intranet.ai People Directory by to learn more.
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the Edit button on the top right the page.
Select the webpart and click the pencil button on the left of the web part to open the property pane.
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the Edit button on the top right the page.
Select the webpart and click the pencil button on the left of the web part to open the property pane.
Step 1: go to .
Step 3: Select POST > beta > . Instead of {userPrincipalName}, please insert the name of the referring manager.
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the Edit button on the top right the page.
Select the webpart and click the pencil button on the left of the web part to open the property pane.
Once you’re done with this backend procedure, please go to the Organization Chart page, then click the Edit button on the top right of the page.
Select the webpart and click the pencil button on the left of the web part to open the property pane.
