---
title: "How To Add and Configure the Vitextra Employee Directory Web Part"
description: "Add the Vitextra Employee Directory web part to a SharePoint Online page and configure its columns, layout and filters step by step."
url: https://vitextra.com/en/support/how-to/add-and-configure-the-employee-directory-web-part
language: en
published: 2025-01-13
modified: 2026-10-22
products:
  - "Employee Directory"
---

# How To Add and Configure the Vitextra Employee Directory Web Part

**Tools:** SharePoint Online, Vitextra Employee Directory

[Watch video](https://www.youtube.com/watch?v=XQhhxW30Nio) (https://vitextra.com/en/video/40000)

## 1. Add the Employee Directory Web Part

![Add the Employee Directory Web Part](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step1-en.png)

Navigate to the SharePoint page where you want to add Employee Directory. Click **Edit** in the top-right corner of the page, then click the **+** icon to add a new web part. In the search box, type "Employee Directory" and select the **Employee Directory** web part from the list.

📝 **Note**  
The Employee Directory web part can use either SharePoint User Profiles or Entra ID as its data source. The other option, **Employee Directory (Entra ID)**, only supports Entra ID, but offers more features for filtering and displaying data — pick whichever web part matches the data source you plan to use before you invest time in configuration.

## 2. Configure the Web Part

![Configure the Web Part](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step2-en.png)

Click the edit properties icon to open the configuration panel and customize the settings to fit your needs.

## 3. Configure Columns

![Configure Columns](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step3-en.png)

Add, remove, or reorder columns to display the information that matters most to your organization — typically name, job title, department, and contact information, but any indexed profile property can be added. Mark columns as searchable, and change the caption of each column to something your users will recognize.

💡 **Tip**  
Need a column that does not exist as a profile property yet? See the companion guide, *How To Create a Custom Searchable User Profile Property*, to add one before configuring columns here.

## 4. Customize the Layout

![Customize the Layout](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step4-en.png)

Choose between two layout options: **Details** and **Cards**. The Details layout presents search results in a tabular format, letting users reorder columns from the app settings — ideal for a detailed, organized view of employee records. The Cards layout presents results using the native SharePoint control, in an aesthetically pleasing card format — a good fit for users who prefer a more graphical, simplified interface.

## 5. Configure Filters

![Configure Filters](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step5-en.png)

Use the Query Builder to create complex filters and define specific criteria that narrow down the search results — for example, by department, job title, or location, or by combining several conditions together.

## 6. Set Up the Refinement Panel

![Set Up the Refinement Panel](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step6-en.png)

Configure the refinement panel to include the refiners you want — department, job title, location, and others. The panel lets end users dynamically filter search results themselves, by selecting the criteria they care about, without needing to know how the Query Builder works.

## 7. Add the Web Part to a Full-Width Section

![Add the Web Part to a Full-Width Section](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step7-en.png)

Move the web part from a general section to a full-width section. Drag and drop the Employee Directory web part into the full-width section to give it more room and improve the visual appeal and usability of the directory, especially on wide screens.

## 8. Explore Additional Features

![Explore Additional Features](https://static.vitextra.com/articles/50023/add-and-configure-the-employee-directory-web-part-Step8-en.png)

The Vitextra Employee Directory solution includes three web parts: **Employee Directory**, **Employee Directory (Entra ID)**, and **New Employees**. Each serves a distinct purpose and can be configured to fit your organization's specific needs.

💡 **Tip**  
For more detailed information, see [KB10062. Export Employee List into an Excel Spreadsheet](https://vitextra.com/en/support/kb/10062), [KB10207. Boost Onboarding with the New Employees Web Part in SharePoint Online](https://vitextra.com/en/support/kb/10207), and [KB10199. Customize Employee Details Pane](https://vitextra.com/en/support/kb/10199).

Most of the value of Employee Directory comes from matching it to your organization's own structure — the right columns, a layout your users are comfortable with, and filters that mirror how people actually search for colleagues. Once that groundwork is in place, features like Teams integration, custom attributes, and vCard export become quick additions rather than separate projects. See the companion guide, *How To Add Employee Directory App to Microsoft Teams*, for the natural next step.