Webpart overview

The Employee Directory webpart provides a clean and user-friendly visual interface to search for and view your colleagues’ profiles. It simplifies collaboration within your organization by enabling intuitive and efficient searches for the right contacts.

 

By using this component, users of your Digital Workplace can collaborate more effectively. In addition, it promotes social connections by allowing users to access their colleagues’ profile information — much like on a social network.

Component Prerequisites

The Directory component requires extended delegated permissions to function properly. It uses the following permissions:

• User.Read.All

To approve these permission requests, please refer to the following article: Permission approval.

Use Cases

The Directory can be implemented in various scenarios, such as:

• Company Directory: search across all employees in the organization.

• Contextual Search: find someone within a specific group — a department, country, project, or site.

To configure this webpart , please refer to the following articles: Empoyee Directory - Advanced Settings

User Features

This powerful search tool allows users to search and filter by name, department, skill, project, or any other relevant profile attribute.

The Directory offers a customizable search experience to best match your users’ needs:

• Search within Entra ID (formerly Azure Active Directory) or the User Profile Application (UPA), corresponding to profiles accessible through SharePoint.

• Contextualize the search scope to limit results to a specific group of people.

• Customize user profiles using information from both Entra ID and the UPA.

Add the webpart

1. Open your SharePoint page in Edit mode by clicking Edit in the upper-right corner.

2. In the desired location, select the + button to open the component catalog.

3. Search for or browse the catalog to select the Directory component under the Documents, Lists, and Libraries category.

4. The component will be added at the chosen location.

Webpart Configuration

There are three categories of settings available for the Directory component:

1. Layout

2. Search Settings

3. Display Options

1. Layout

In the Layout section, you can choose:

• Number of results to display: increasing this number enlarges the component to fit all results.

• Whether to show all profiles by default before any search is performed, or display no profiles until a query is entered.

2. Search Settings

To configure person search via Entra ID or SharePoint (UPA), please refer to this detailed guide: Employee Directory - Advanced settings.

3. Display Options

Profile Settings

The Display Options section lets you personalize the visual experience of the component and the way profile details are shown.

Customizing Visible User Profile Properties

You can personalize all profile fields displayed in the detailed user view by clicking the Customize displayed profile button under the Profile Configuration subsection.

The detailed profile is divided into four sections:

• Profile

• About

• Profile Information

• Organization Chart (not customizable; displays the user’s reporting hierarchy)

The “Profile”, “About”, and “Profile Information” sections can each contain three types of subsections:

• Full-width element: displays a single, large field such as “About Me”

• Short element: displays concise, simple information.

• Tag element: ideal for multi-value properties (e.g., skills, languages).

To add or edit an element, click Add or the Edit (pencil) icon. You will then need to specify:

• Property Name: the title displayed in the detailed profile.

• Data Source: choose between Entra ID and SharePoint.

• Entra ID Property or SharePoint Property: the user field to display from the selected source. (An autocomplete helper is available for SharePoint properties. For Entra ID properties, refer to Microsoft documentation.)

• Category: defines the display type for the element.

Identity Card

The user’s identity card cannot be edited directly from the Directory component.
The information displayed on this card always comes from the data source used for the person search (Entra ID or SharePoint Directory).

Allow Profile Sharing

You can choose whether users are allowed to share profiles directly from the Directory.

When this option is enabled, a Share button appears in the detailed profile view. This button redirects users to the same SharePoint page, automatically opening the Directory component with the selected profile displayed.

Hide on Mobile

When enabled, the component will not be visible to users accessing the SharePoint page from mobile devices.

Titles and Subtitles

You can enable or disable the title and description display for the component.

Appearance Customization

Border Radius

You can define the shape of borders for all elements within the component using the Border Radius option.
This affects the search bar, user cards, and the sections displayed in the detailed profile.

Shadows

You can also set the shadow intensity around component elements using the Shadow option.
This affects both the search result cards and the detailed profile sections.

Example Layouts

Example view of the Directory WebPart, showing the search bar and retrieved user cards.

After selecting a profile, the user detail page appears, including the profile card, organization chart, and available interactions with that person.