Employee Directory. Solution Overview

8/25/2021

The Vitextra Employee Directory solution includes three web parts:

Together, these web parts extend SharePoint and Microsoft Teams with rich employee information and powerful search.

This article walks through the main features of each web part.

SharePoint Framework

The Employee Directory app is built on the SharePoint Framework (SPFx), so you can host it on SharePoint modern and classic pages as well as in Microsoft Teams. The same app works across all of these platforms without restrictions.

Like any SPFx solution, the app runs in the browser under the current user's account.

📝 Note
SPFx web parts can never exceed the permissions already granted to the current user in Entra ID.

For more details, see the Data Protection when using the Vitextra Application blog post.

Microsoft Graph

The Employee Directory web parts use the Microsoft Graph API to retrieve user details, presence status in Teams, and schedules from Outlook. Communication with Microsoft Graph goes through the native client built into the SharePoint Framework.

Data is retrieved in the following sequence:

A web part requests a token from Entra ID to access Microsoft Graph.
Entra ID issues a token based on the permissions granted to the solution.
The web part requests data from Microsoft Graph.
Microsoft Graph returns the requested data.

❗ Important
Before the web parts can call Microsoft Graph, you must approve the required API permissions for your solution in the SharePoint Admin Center.

The Employee Directory app requires the following permissions:

Directory.Read.All
User.Read.All
Presence.Read.All
Calendars.Read

Together, they let the web parts access user information, manager and subordinate relationships, and calendar data:

Directory.Read.All and User.Read.All retrieve user details along with manager and subordinate relationships.
Presence.Read.All reads a user's current presence status in Microsoft Teams.
Calendars.Read provides access to a user's calendar data.

📝 Note
These permissions must be approved in the SharePoint Admin Center.

📝 Note
The Employee Directory only reads data from Microsoft Graph; it never modifies it.

Web Parts

Employee Directory

The Employee Directory web part is the central hub for searching and browsing employee information across your organization.

Data Source

The Employee Directory web part can use either Entra ID or User Profiles as its data source. With User Profiles, the web part retrieves information through the SharePoint Search Service.

Custom Columns

Both data sources support custom attributes. For User Profiles, you first need to define those attributes in the SharePoint search schema. For step-by-step instructions, see the Display Custom Attribute of an Azure AD User in Employee Directory article in the knowledge base.

💡 Tip
You can surface any custom attribute as a column in the web part.

Layout

The web part offers two ways to display search results: Contact and Details.

In Contact mode, each employee is shown as a card. You choose which fields appear on the card; the number of fields depends on the card size set in the web part settings, up to a maximum of four per card.

In Details mode, you can choose which fields appear as columns and in what order. Every column except the image and status columns is collapsible: when the web part runs low on space, these columns are hidden automatically. This prevents horizontal scrolling and lets the web part adapt dynamically to the space available.

💡 Tip
The Employee Directory lets you customize which attributes are displayed in both the Contact and Details views.

Details Pane

Selecting an employee in the search results opens a detailed profile. It includes the documents the employee has recently edited and their availability for the current day.

Theme Variants

Every web part in the Employee Directory solution automatically inherits the theme of the site it lives on. Web parts also support the color variants you can assign to a section on a modern page. The figure below shows the web part in four color variants across two different SharePoint site themes.

In Microsoft Teams, the Employee Directory web part additionally supports the Default and Dark themes.

The refinement panel lets you filter search results by selected fields. It is powered by the SharePoint Search Service and is therefore available only when User Profiles is the data source.

The panel offers a range of configuration options:

The order in which fields are displayed
The number of matches shown for each value
Sorting by name or by number of results
The position of the panel (left, right, or top)

💡 Tip
The Employee Directory supports custom User Profile attributes in the refinement panel.

Export to Excel

You can export the current search results to an Excel file. See the Export Employee List into Excel spreadsheet article for details.

📝 Note
The export has a few limitations:

The column widths in the exported spreadsheet are fixed.
The table style cannot be changed and is always set to Blue, Table Style Medium 2.

Employee Directory (Entra ID)

This is a dedicated version of the Employee Directory web part that uses Entra ID as its only data source. It is designed to provide full-featured search across users in Entra ID. Its appearance and result layout are fully customizable and match those of the standard Employee Directory web part.

Behavior & Features

The Employee Directory (Entra ID) web part builds its search by first retrieving the full list of users from Microsoft Entra ID. This approach enables the following features:

Hiding unlicensed users: Exclude users without an assigned license from the search results.
Selecting searchable fields: Choose which attributes are used to search for employees. These attributes can be hidden when displaying the results.
Predefined filters: Define a set of filters in the web part's parameters to limit the search scope. These filters are always applied and cannot be overridden by users.

The Query Builder helps you create complex queries for retrieving detailed user information from Entra ID. Its visual interface lets both administrators and developers build precise queries without extensive knowledge of query languages.

💡 Tip
The Employee Directory (Entra ID) lets you build filters from any available attribute, including custom attributes.

Alphabetical Navigation: Alphabetical navigation is generated automatically from user data in Entra ID. The first letter of each employee's last name is used to build the list of letters.

Refinement Panel: The Employee Directory (Entra ID) lets you build a refinement panel from a variety of employee attributes.

❗ Important
If your Entra ID has more than 2,000 active users, the web part may take longer than a second to initialize on the page.

New Employees

The New Employees web part displays a list of users who were recently created in Entra ID.

In the web part settings, you can specify how many employees to show and the time period during which newly created Microsoft Entra ID users remain visible.

📝 Note
The details pane is not currently available for the New Employees web part.

Conclusion

The Vitextra Employee Directory brings employee search and profile information directly into SharePoint and Microsoft Teams. Built on the SharePoint Framework and the Microsoft Graph API, it integrates natively with your environment and reads data securely from Microsoft Entra ID under each user's own permissions.

With customizable views, theme variants, refinement panels, and Excel export, the solution adapts to the way your organization works and helps people find colleagues and connect faster.