Employee Directory. Solution Overview
Vitextra Employee Directory solution contains three web parts:
This article describes the main functionality of these web parts.
SharePoint Framework
Employee Directory app is based on SharePoint Framework (SPFx) and may be hosted on SharePoint Modern Page, Classic Page, and Microsoft Teams.
This approach means that you can use the same application on multiple platforms without restrictions.
SharePoint Framework app runs in a browser in the context of the current user.
📝 Note
The permissions of the SPFx web part cannot exceed the permissions of the current user.
Microsoft Graph
Employee Directory web parts consume Microsoft Graph API to get information about user details from Azure AD, presence status from Teams, and schedule from Outlook.
Interaction between Microsoft Graph and Web Part based on native client built into SharePoint Framework.
Consuming flow is the following:
- Web Part requests token from Azure AD to interact with Microsoft Graph
- Azure AD provides a token according to the permissions granted for the solution
- Web part requests data from Microsoft Graph
- Microsoft Graph provides data
❗ Important
You need to approve necessary API permissions in the SharePoint Admin Center for the solution.
The following permissions are required for the Employee Directory app so that the web parts work correctly:
- Directory.Read.All
- User.Read.All
- Presence.Read.All
- Calendars.Read
The first two permissions (Directory.Read.All and User.Read.All) are necessary to get information about users and manager/subordinates relationship. Presence.Read.All permission is required to get the current presence status of the user in Microsoft Teams. The last Calendars.Read one is required to read data from a user calendar.
📝 Note
Employee Directory performs only read operations in Microsoft Graph.
Web Parts
Employee Directory
The main web part for searching and displaying information about employees in your organization.
Data Source
Employee Directory web part supports both Azure AD and User Profiles as a data source.
In the case of using User Profiles, the web part retrieves data within from SharePoint Search Service.
Custom Columns
The web parts are able to display custom columns for both Azure AD and User Profiles.
Web parts support custom attributes for both Azure AD and user profiles. For the User Profiles data source, custom attributes must be defined in the SharePoint search schema. For the second data source, see Display Custom Attribute of an Azure AD User in Employee Directory article of the knowledge base for more information.
💡 Tip
Employee Directory supports custom attributes.
Layout
The web part supports two options for displaying search results: Contacts and Details.
In the Contact mode, information about the employee is displayed in the form of cards. You can specify the fields displayed on the card. The number of fields depends on the selected card size in the web part settings. The maximum number of fields on the employee card in the search results is four.
The list view mode allows you to select the fields displayed in the view and their order. All columns, except for the image, status, and the first text column, are collapsible. Such columns are hidden if the actual width of the web part is insufficient. This approach is implemented to prevent horizontal scrolling of the content of the web part and dynamic adaptation of the web part depending on the space it occupies.
💡 Tip
Employee Directory allows you to display custom attributes both in the Contact and Details view.
Details Pane
When selecting an employee from the search results, users can view detailed information about the employee, including a list of recent documents edited by the employee, and information about availability for the current 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 the web part in four color variations for two themes of the SharePoint site.
Also, Employee Directory web parts support Default and Dark themes in Microsoft Teams.
📝 Note
As of today, the High Contrast theme in Microsoft Teams is not supported.
This feature is scheduled for release in the fourth quarter of 2021.
Refinement Panel
The refinement panel in the Employee Directory allows you to filter the search results based on the selected fields. This functionality is based on the SharePoint Search Service and is only available in for the User Profiles data source.
The refinement panel provides a rich set of parameters:
- The order in which the fields are displayed
- Displaying the number of search results for clarification
- Sorting values by name/number of results
- Position of the filter panel: left, right, or top
💡 Tip
Employee Directory supports custom user profile attributes for the refinement panel.
Export to Excel
Export to Excel allows you to save the search results to an Excel file. See Export Employee List into Excel spreadsheet article for more details.
📝 Note
There are some limitations of exporting functionality:
- Width of the columns in the exported spreadsheet is fixed
- Style of the table is Blue, Table Style Medium 2and can not be changed
Employee Directory (Azure AD)
Special version of the Employee Directory web part that supports only Azure AD as a data source.
The main goal of this web part is a full-featured search for users in Azure AD. Setting up the appearance of the web part, the layout of the search results fully corresponds to the standard web part of the employee directory.
Behavior & Features
The Employee Directory (Azure AD) web part, when searching for employees, first gets the full list of users from Azure AD.
This approach makes it possible to provide the following features:
Hiding users without licenses. Excluding users who do not have assigned licenses from the results.
Selecting searchable fields. Selecting the attributes that will be used to search for employees. The searchable attributes can be hidden and not used when displaying search results.
Predefined filter. You can specify a set of filters in the parameters of the web part to specify the search scope for employees. These filters will always be applied and cannot be ignored by end-users.
💡 Tip
Employee Directory (Azure AD) supports all attributes, including custom ones, to specify the predefined filter.
Alphabetical Navigation. Alphabetical navigation is generated automatically based on user data in Azure AD. To form a list of letters, the first letter of the employee's last name is used.
Refinement Panel. Employee Directory (Azure AD) allows you to use any employee attributes to form the refinement panel.
❗ Important
If the number of active users in Azure AD is more than 2000, the initialization time of the web part on the page can be more than one second.
New Employees
The New Employees web part displays a list of recently created users in Azure AD.
In the parameters of the web part, you can specify the number of employees and the time period for which users created in Azure AD will be displayed.
📝 Note
Details pane is not available for the New Employees.