Web Parts
Employee Directory
Employee directory with search, alphabetical filter, dropdown filters, sort, and card/list views. Supports search mode and pinned employee mode.
PeopleFeature Parity: 95%
Get Employee Directory Working in 4 Steps
10-20 minutes
Prerequisites
- Bonzai 2 package installed on your site
- User profiles configured in Azure AD / SharePoint
1
Add the web part to your page
Edit the page, click +, search for "Employee Directory", and add it to a section.
2
Set the Result Source
Open the property pane and select a Result Source. Use “Local People Results” for most tenants, or enter a custom GUID if your organization has a dedicated people result source.
3
Choose display mode
Select Search Directory (default) or Pinned Employees in the Display Mode section.
4
Enable filters and publish
Optionally enable filter dropdowns, sort, and view switching in View & Filter Options, then publish.
When to Use This Web Part
Use this when you need to...
- Create a company-wide employee directory
- Enable users to find colleagues by name or department
- Display contact information for employees
- Link to user profiles in SharePoint/Delve
- Browse employees alphabetically
- Show pinned employees on a team page
Best page locations
- People page — dedicated employee directory
- About Us page — company org overview
- Department pages — team member listings
- Contact page — find the right person
Consider alternatives when...
- • Displaying a specific list of featured people — use People Listing
- • Showing organizational hierarchy — use Org Chart solutions
- • Listing external contacts — use a custom list with People Listing
Related web parts:
People Listing — curated list from a SharePoint listLocations — office locations with contacts
Display Modes & Views
- Search Directory: Full directory with search and A–Z filtering
- Pinned Employees: Curated people list (by individuals or criteria)
View Templates
- Card View (default): responsive grid of profile cards
- List View: compact rows with column headers for quick scanning
Allow view switching
Enable
showViewSwitcher to let users toggle between Card and List at runtime.Filtering & Sorting
In Search Directory mode, you can add a toolbar that lets users narrow results with dropdown filters and change sorting. Filters and sort combine with search text and A–Z filtering.
- Filter dropdowns: Department, Office, Job Title (configured via
filterFields) - Active filter chips: removable chips with “Clear all”
- Sort dropdown: Name (A–Z / Z–A), Department, Job Title, Office
- Exclude non-employee accounts: one toggle to exclude guests/rooms/equipment/shared mailboxes
- Custom query filter: advanced KQL exclusions appended to every query
Clean results without custom query transforms
Employee Directory always enforces
contentclass:spspeople to prevent non-people results. Use enableStandardExclusions for common cleanup, and queryFilter for tenant-specific rules.Configure Fields
- Enable/disable fields, reorder, and choose managed properties
- Select display type per field (Text, Email Link, Phone Link, Link, Icon + Text, Image)
- Reset to default if needed
Step-by-Step Configuration
1
Navigate to your target page
Go to the page where you want to add the directory (e.g., People, About Us, or a dedicated Directory page).
2
Add a section with appropriate width
Employee Directory works best in a full-width or two-thirds width section to display multiple columns of results.
3
Add the Employee Directory web part
Click the + button, search for "Employee Directory", and add it to your section.
4
Configure the title
Open the property pane and set a title like "Employee Directory", "Find a Colleague", or "Our Team".
Leave blank for a cleaner look if the page title already indicates the purpose.
5
Select display mode
Choose Search Directory (default) or Pinned Employees in the Display Mode section.
6
Configure pinned options (if used)
Pick employees directly or filter by criteria, then set pinned layout (items per row/page).
7
Set items per page
Configure how many employees display per page using the slider. 20-28 is typical for a grid layout.
8
Configure view options
In View & Filter Options, choose a default view (Card or List) and enable “Allow View Switching” if you want users to toggle views.
9
Enable filters and sort
Toggle filter dropdowns (Department/Office/Job Title) and the sort dropdown in View & Filter Options.
10
Set up exclusions (optional)
If you see conference rooms, shared mailboxes, or external accounts, enable “Exclude Non-Employee Accounts”. For specific exclusions, add KQL in Custom Query Filter.
11
Configure fields
Use Configure Fields to enable/disable fields, change order, and select managed properties.
12
Publish and test
Save and publish. Test by searching for known employees and using the A-Z filter.
Common Configurations
Copy these ready-to-use configurations:
Company Directory
Full directory with all features enabled
Best for: Dedicated People page
Configuration
| title | Employee Directory |
| itemsPerPage | 28 |
| displayMode | Search Directory |
| enableWildcardSearch | On |
Department Team Page
Compact directory for team pages
Best for: Department landing pages
Configuration
| title | Our Team |
| displayMode | Pinned Employees |
| pinnedSelectionMode | Select Individuals |
| pinnedItemsPerRow | 4 |
| pinnedItemsPerPage | 12 |
Quick People Search
Search-focused minimal directory
Best for: Homepage sidebar widget
Configuration
| title | Find a Colleague |
| searchText | Search employees... |
| itemsPerPage | 8 |
| displayMode | Search Directory |
Browse by Name
Alphabetical browsing focus
Best for: Contact directory pages
Configuration
| title | Staff Directory |
| alphabeticalFilterField | PreferredName |
| itemsPerPage | 20 |
| displayMode | Search Directory |
| Configure Fields | Role, Location |
Filtered Company Directory
Directory with department, office, and role filters
Best for: Large organizations with 200+ employees
Configuration
| title | Employee Directory |
| displayMode | Search Directory |
| enableFilters | On |
| enableSortDropdown | On |
| showViewSwitcher | On |
| enableStandardExclusions | On |
| itemsPerPage | 28 |
Clean Directory
Excludes conference rooms, contractors, and external users
Best for: Organizations with mixed account types
Configuration
| title | Employee Directory |
| displayMode | Search Directory |
| enableStandardExclusions | On |
| queryFilter | -JobTitle:Contractor |
| enableWildcardSearch | On |
Best Practices
Ensure user profiles are complete
The directory pulls from Azure AD and SharePoint user profiles. Encourage employees to update their profile photos and job titles for best results.
Use on a full-width section for large organizations
For companies with 100+ employees, a full-width layout allows the grid to display more results at once, reducing pagination clicks.
Use the standard exclusions toggle for clean results
Most organizations have conference rooms, shared mailboxes, and external accounts in their directory. Enable
enableStandardExclusions to filter these out automatically instead of building custom query transforms.List View for data-dense directories
For directories with 500+ employees, List View shows more people per screen than Card View and pairs naturally with filters and sorting.
Combine with People Listing for featured staff
Use Employee Directory for the full org, and People Listing on department pages to highlight specific team members or leadership.
Search indexing may affect results
People search relies on SharePoint/Azure AD indexing. New employees may take 24-48 hours to appear in search results.
Reference
Technical details for developers and advanced users.
Property Pane Configuration
Basic Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (default: Employee Directory) |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: ContactCard) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
resultSource | Dropdown | SharePoint Search result source (with Custom GUID option) |
searchText | Text | Placeholder text for the search box (default: Search) |
alphabeticalFilterField | Text | Field to use for A-Z filtering (default: PreferredName) |
itemsPerPage | Slider (4-100) | Results displayed per page (step: 4, default: 28) |
Display Mode
| Property | Type | Description |
|---|---|---|
displayMode | Choice | Search Directory (default) or Pinned Employees |
pinnedSelectionMode | Choice | Select Individual Employees or Filter by Criteria |
pinnedEmployees | People Picker | Multi-select people (individual mode only) |
pinnedCriteriaField | Dropdown | Managed property to filter by (criteria mode) |
pinnedCriteriaValue | Dropdown | Value for the selected criteria field |
Pinned Layout
| Property | Type | Description |
|---|---|---|
pinnedItemsPerRow | Slider (1-6) | Number of employee cards per row (default: 4) |
pinnedItemsPerPage | Slider (1-50) | Employees per page (default: 12) |
Search Options
| Property | Type | Description |
|---|---|---|
enableWildcardSearch | Toggle | Enable wildcard search for partial matches (default: On) |
trimDuplicates | Toggle | Remove duplicate results from search (default: Off) |
enableStandardExclusions | Toggle | Exclude external users, conference rooms, equipment, and shared mailboxes (default: Off) |
queryFilter | Multiline Text | Custom KQL filter appended to every search (e.g., -Department:Contractors) |
View & Filter Options (Search Directory mode)
| Property | Type | Description |
|---|---|---|
templateName | Dropdown | Default view: Card View or List View (default: Card) |
showViewSwitcher | Toggle | Allow runtime view switching between Card and List (default: Off) |
enableFilters | Toggle | Show filter dropdowns (default: Off) |
filterFields | Text | Comma-separated managed properties for filters (default: Department,OfficeNumber,JobTitle) |
enableSortDropdown | Toggle | Show sort dropdown (default: Off) |
Display Options
| Property | Type | Description |
|---|---|---|
fieldConfigJson | Collection | Enable/disable fields, reorder, and map managed properties |
Additional Link
| Property | Type | Description |
|---|---|---|
additionalLinkText | Text | Text for an additional link in the footer |
additionalLinkUrl | Text | URL for the additional link |
Features Checklist
- ✅ Name search
- ✅ Alphabetical A-Z filter
- ✅ Profile photos from Azure AD
- ✅ Contact information
- ✅ Profile links to Delve/SharePoint
- ✅ Pagination
- ✅ Pinned Employees mode
- ✅ Configurable field mapping
- ✅ Responsive grid layout
- ✅ Card and List view templates
- ✅ Runtime view switching (Card/List toggle)
- ✅ Filter dropdowns (Department, Office, Job Title)
- ✅ Active filter chips with dismiss and Clear All
- ✅ Sort dropdown (Name, Department, Job Title, Office)
- ✅ Standard non-employee exclusions toggle
- ✅ Custom KQL query filter
- ✅ People content class enforcement (prevents non-people results)
Data Source
Employee Directory uses the SharePoint People Search API, which indexes:
- Azure AD user profiles
- SharePoint user profile properties
- Microsoft 365 profile information
Migration from Classic
| Aspect | Classic | Modern |
|---|---|---|
| Technology | bonzai.min.js + JSOM | SPFx + People Search API |
| Photos | SharePoint User Profile | Azure AD / M365 Profile |
| Profile Links | MySite | Delve / SharePoint Profile |
| Result Source Filters | Site Settings query transform | Built-in exclusions toggle + custom query filter |
| View Modes | Single view | Card View + List View with runtime toggle |
| Filtering | By custom query transform only | Interactive dropdowns (Department, Office, Job Title) |
| Sorting | Not configurable | Sort dropdown (Name, Department, Job Title, Office) |