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 or Delve.
-
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
-
Open your SharePoint page in Edit mode by clicking Edit in the upper-right corner.
-
In the desired location, select the + button to open the component catalog.
-
Search for or browse the catalog to select the Directory component under the Documents, Lists, and Libraries category.
-
The component will be added at the chosen location.
Webpart Configuration
There are three categories of settings available for the Directory component:
-
Layout
-
Search Settings
-
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.
Comments
0 comments
Please sign in to leave a comment.