Employee Directory. Solution Overview
The Vitextra Employee Directory solution includes three web parts:
These web parts are designed to enhance the functionality of SharePoint and Microsoft Teams by providing comprehensive employee information and search capabilities.
This article will describe the main features of these web parts.
SharePoint Framework
The Employee Directory app is built using the SharePoint Framework (SPFx) and can be hosted on both SharePoint Modern Pages and Classic Pages, as well as Microsoft Teams. This means that the app can be used on different platforms without restrictions. The SPFx app runs in the browser in the context of the current user's account.
📝 Note
The permissions of the SPFx web parts cannot exceed the permissions granted to the current user in Entra ID.
For more information, please see the Data Protection when using the Vitextra Application blog post.
Microsoft Graph
Employee Directory web parts use the Microsoft Graph API to retrieve information about users, their presence status in Teams, and their schedules from Outlook. The interaction between the Microsoft Graph API and the web part is done through a native client built into the SharePoint Framework.
Consuming flow is the following:
- Web parts request a token from Entra ID to interact with the Microsoft Graph
- Entra ID provides a token based on the permissions granted to the solution
- The web parts then request data from the Microsoft Graph
- Microsoft Graph provides the data
❗ Important
To consume the Microsoft Graph API, you need to approve necessary API permissions in the SharePoint Admin Center for your solution.
The following permissions are required for the Employee Directory app:
- Directory.Read.All
- User.Read.All
- Presence.Read.All
- Calendars.Read
These permissions allow the web parts to access user information, manager/subordinate relationships, and calendar data.
📝 Note
These permissions must be approved in the SharePoint Admin Center.
The first two permissions, Directory.Read.All and User.Read.ALL, are required to get information about the users and their manager/subordinate relationships. Presence.ReadAll is required to obtain the current status of a user's presence in Microsoft Teams, while the last permission, Calendars.Read, is needed to access data from a user's calendar.
📝 Note
The Employee Directory only performs read operations on Microsoft Graph.
Web Parts
Employee Directory
The main web page provides a search and information hub for employees within your organization.
Data Source
Employee Directory web part supports both Entra ID and User Profiles as a data source.
When using User Profiles, the web part retrieves information from the SharePoint Search Service.
Custom Columns
These web parts support custom attributes for both Entra ID and the User Profile data source. For the user profile data source, you must define custom attributes in the SharePoint search schema. For more information on how to do this, see the Display Custom Attribute of an Azure AD User in Employee Directory article in the knowledge base.
💡 Tip
The Employee Directory also supports custom attributes, so you can use these attributes to create custom columns in your web part.
Layout
The web part has two options for displaying search results: Contact and Details.
In Contact mode, information about the employee is displayed as cards. You can specify which fields are displayed on each card. The number of fields depends on the size of the card in the web part settings, with a maximum of four fields per employee card in search results.
The list view mode allows you to choose which fields are displayed in the list and their order. All columns, except for the image and status columns, are collapsible. These columns are hidden if the available space in the web part is not enough. This approach helps prevent horizontal scrolling and allows the web part to adapt dynamically based on the available space.
💡 Tip
The Employee Directory allows you to customize the display of attributes in both the Contact and Details views.
Details Pane
When selecting an employee from the search results, users can view detailed information about the employee. This includes a list of recently edited documents by the employee and information about their availability for that day.
Theme Variants
All web parts in the Employee Directory solution automatically inherit the theme of the site on which they are located. Web parts also support color variations, which you can specify for a section on a modern page. The figure below shows a web part in four different color variations for two different themes of a SharePoint site.
Additionally, the Employee Directory web part supports Default and Dark themes in Microsoft Teams.
Refinement Panel
The refinement panel in the Employee Directory allows you to filter search results based on selected fields. This functionality is powered by the SharePoint Search Service and is available only for User Profiles data sources.
The refinement panel offers a wide range of options:
- The order in which fields are displayed
- Showing the number of search results for clarity
- Sorting by name or number of results
- Position of the filter panel (left, right, top)
💡 Tip
The Employee Directory supports custom user profile attributes for the Refinement Panel.
Export to Excel
Exporting to Excel allows you to save your search results as an Excel file. See Export Employee List into Excel spreadsheet article for more details.
📝 Note
There are some limitations of exporting functionality:
- The width of the columns in the exported spreadsheet is fixed.
- The style of the table cannot be changed and is set to Blue, Table Style Medium 2.
Employee Directory (Entra ID)
A special version of the Employee Directory web part that only supports Entra ID as a data source. The main goal of this web part is to provide a full-featured search function for users in Entra ID. The appearance of the web part and the layout of search results are fully customizable and correspond to the standard employee directory web part.
Behavior & Features
The Employee Directory (Entra ID) web part searches for employees by first retrieving a full list of users from Microsoft Entra ID. This approach allows for the following features:
- Hiding users without licenses: Excluding users who don't have assigned licenses from search results.
- Selecting searchable fields: Choosing which attributes will be used for searching employees. These attributes can be hidden when displaying search results.
- Predefined filters: Specifying a set of filters through the web part's parameters to limit the search scope of employees. These filters are always applied and can't be ignored by users.
The Query Builder is a robust tool designed to help you create complex queries for retrieving detailed user information from Entra ID. Its intuitive interface allows both administrators and developers to construct precise queries without needing extensive knowledge of query languages.
💡 Tip
The Employee Directory (Entra ID) allows users to specify a filter using all available attributes, including custom attributes.
Alphabetical Navigation: Alphabetical navigation is automatically generated based on user data in Entra ID. The first letter of an employee's last name is used to create a list of letters.
Refinement Panel: The Employee Directory (Entra ID) allows you to use various employee attributes to create a refinement panel.
❗ Important
If the number of active users in Entra ID exceeds 2000, it may take more than one second to initialize the web part on the page.
New Employees
The "New Employees" web part displays a list of users who have recently been created in Entra ID.
In the settings of the web page, you can specify the number of employees and the time period that users created in Microsoft Entra ID will be visible.
📝 Note
The details pane is not currently available for new employees.
Conclusion
The Vitextra Employee Directory solution offers a robust and versatile tool for managing and accessing employee information within SharePoint and Microsoft Teams. By leveraging the power of the SharePoint Framework and Microsoft Graph API, it ensures seamless integration and comprehensive data retrieval from Microsoft Entra ID.
The solution’s flexibility, with features like customizable views, theme variants, and export capabilities, makes it an invaluable asset for organizations looking to enhance their internal communication and collaboration. As Vitextra continues to innovate, users can look forward to even more enhancements and support for additional features, ensuring the Employee Directory remains a cutting-edge solution for modern workplaces.