How to Add and Configure the Organizational Chart Web Part

Introduction

This article explains how to place the Vitextra Organizational Chart web part on a SharePoint Online page and configure it through its property pane: from approving the required API permissions to choosing the chart mode, the layout, the attributes on employee cards, the filters and the export formats. It assumes the Organizational Chart package has already been deployed to your tenant App Catalog.

Prerequisites

Organizational Chart reads employee data from Microsoft Entra ID through the Microsoft Graph API, so the web part can only build the chart once the following permissions have been approved for your tenant:

The permission requests are registered automatically when the package is deployed. To approve them, a Global or SharePoint Administrator opens the SharePoint admin center, goes to Advanced → API access, selects each pending request for Microsoft Graph and clicks Approve.

To add the web part to a page you need edit permissions on that page — typically the Site owner or Site member role.

Adding the web part to a page

1. Open the page where the chart should appear and switch it to edit mode with Edit in the top-right corner.
2. Hover over the area where the web part should go and click the round + (Add a new web part) button.
3. In the toolbox, start typing Org Chart and select the web part from the list.

The web part is added to the page and immediately builds the chart of the entire company with the default settings.

Configuring the web part

Select the web part and click the pencil (Edit web part) icon to open the property pane. The settings are organized into the groups described below.

Behavior

• Chart Mode — what the chart starts from:
  • Entire Company — the roots of the chart are the employees who have no manager assigned in Microsoft Entra ID (typically the CEO), and the full hierarchy is shown beneath them.
  • Employees reporting to specific user — the chart starts from one person and shows everyone who reports to them at any level. When this option is selected, a Person picker appears: start typing a name and select the employee. The chart is rebuilt as soon as a person is chosen.
• Alignment — the layout of the chart: Horizontal (a top-down tree that can be panned and zoomed) or Vertical (a compact indented list suited to narrow columns and mobile screens).
• Levels to Display — how many levels of the hierarchy are expanded when the page opens, from 1 to 10 (default 3). Deeper levels stay collapsed until a visitor expands them.
• Display Search Box — shows or hides the search box above the chart.

Filter

This group controls which employees are included in the chart.

• Advanced filtering — click Edit Filter to open the query builder. Add conditions on any card attribute (department, job title, city, country, user name and so on), choose an operator for each — is equal to, is not equal to, contains, does not contain, begins with, ends with, contains data, does not contain data and others — and combine conditions and groups with And/Or logic. By default a single condition is present: Account Status is equal to Enabled, which keeps disabled accounts out of the chart. Until you change it, the property pane shows No filter applied.
• Exclude Unlicensed Employees — hides accounts without any Microsoft 365 license assigned, such as shared mailboxes and service accounts (on by default).
• Exclude Employees with blank Department — hides accounts whose Department field is empty (off by default).
• Exclude Employees with blank Job Title — hides accounts whose Job Title field is empty (on by default).

Appearance

• Size — the size of employee cards, from 1 (compact, name only) to 4 (large, with a photo and three lines of text). The default is 4.
• Header, Secondary and Tertiary — the attributes shown on each card. The Header field is always available; Secondary appears for sizes 2 and above and Tertiary for size 4 only. Each field can be set to one of the following attributes: Full Name, ID, Department, Job Title, Cell phone, First Name, Last Name, User Name, Email, State/Province, ZIP/Postal Code, Address, City, Country/Region or Office Location. The defaults are Full Name, Job Title and Department.
• Show number of direct reports — adds a badge to each card with the number of the person's direct reports (off by default).

Export Formats

Two toggles, PDF and Jpeg, control which formats are offered by the Export button above the chart. Both are on by default; turn both off to remove the button entirely.

Microsoft Teams

This group appears only when the web part runs inside Microsoft Teams — as a personal app or a channel tab. The Save current settings as Microsoft Teams default button stores the current configuration as the tenant-wide default, so that every user who opens the personal app sees the chart configured the same way. A confirmation message appears once the settings are saved.

About

Shows the license status (trial, active or expired), the product version, the tenant ID and the start date, and offers the trial and activation actions.

Summary of settings

Publishing the page

When the chart looks right, click Republish (or Publish) to make the page available to your visitors. The settings are saved with the page, so every visitor sees the same mode, layout and filters; what they can change is the zoom, the expanded branches and the search query — see KB10234. Organizational Chart: A Quick Guide for End Users.

Learn more about the product: https://vitextra.com/en/products/org-chart