All People Directory Plus settings are managed through the built-in configuration panel. Click the settings icon in the web part toolbar to open it. The panel is organized into tabs, each covering a group of related settings.
For advanced users, the full configuration is also available as a JSON5 document in Advanced → JSON5 Configuration.
Display settings
| Setting | Type | Default | Description |
|---|
defaultView | string | "CARDS" | Initial view mode. Values: "CARDS", "TABLE", "ORGCHART". |
defaultCardWidth | number | 240 | Width of user cards in pixels. |
minimalCardWidth | number | 200 | Minimum card width. Cards won't shrink below this value. |
displayViewSwitcher | boolean | true | Show/hide the Cards / Table / Org Chart view toggle buttons. |
displayCardView | boolean | true | Show the Card View button. |
displayTableView | boolean | true | Show the Table View button. |
displayOrgChartView | boolean | true | Show the Org Chart View button. |
displayPrintButton | boolean | true | Show/hide the print button. |
Search and filter settings
Search box
| Setting | Type | Default | Description |
|---|
displayTextBoxFilter | boolean | true | Show/hide the search text input. |
displayFilterFieldsDropDown | boolean | true | Show/hide the filter field selector dropdown next to the search box. |
filterFields | array | — | Array of searchable fields. Each entry has displayName (supports {{translationKey}} syntax), internalName (SharePoint managed property), and isDefault. Use "@" as internalName to search across all fields. |
resetSearchIcon | string | "clear" | Icon name for the reset/clear search button (Fluent UI icon). |
resetSearchIconPlacement | string | "FILTER_AREA" | Where to place the reset button. Values: "FILTER_AREA", "COMMAND_BAR", "HIDE". |
A-Z filter
| Setting | Type | Default | Description |
|---|
aToZFilter.enabled | boolean | true | Show/hide the A-Z letter tabs. |
aToZFilter.letters | string | "ABCDE...XYZ" | The letters to display. Customize for non-Latin alphabets or to show a subset. |
aToZFilter.filterField | string | "LastName" | The SharePoint managed property to filter by when a letter is clicked. |
aToZFilter.displayAllTab | boolean | true | Show an "All" tab to clear the letter filter. |
Custom tabs
An alternative to A-Z tabs. Use custom tabs to create category-based navigation (e.g. by department or office).
| Setting | Type | Default | Description |
|---|
customTabs.enabled | boolean | false | Enable custom tabs (replaces A-Z tabs when active). |
customTabs.filterField | string | — | The managed property to filter by. |
customTabs.allowPartialMatch | boolean | false | If true, matches values that contain the tab value (not exact match). |
customTabs.tabs | array | — | Array of tab definitions with label (display text) and value (filter value). |
Custom filter dropdowns
Add one or more dropdown filters for any field. Configured in the customFilters array.
| Setting | Type | Description |
|---|
enabled | boolean | Enable/disable this filter. |
label | string | Display label for the dropdown. |
filterField | string | SharePoint managed property to filter on. |
filteringType | string | "server" (KQL query) or "local" (client-side filtering). |
loadOptionsFromDisplayedUsers | boolean | Auto-populate options from values found in displayed users. |
allowPartialMatch | boolean | Match values containing the filter term (not exact). |
options | array | Manual option list. Each with label, value, and optional isDefault. |
Sorting
| Setting | Type | Default | Description |
|---|
sortByDropDown.enabled | boolean | true | Show/hide the sort dropdown. |
sortByDropDown.defaultSortByField | string | "LastName;FirstName" | Default sort field(s). Use semicolons to separate multiple fields. |
sortByDropDown.sortByFields | array | — | Available sort options. Each with displayName and internalName. |
Tab alignment & CSV export
| Setting | Type | Default | Description |
|---|
tabsAlignment | string | "even" | How tabs are distributed. "even" (equal width) or "left" (left-aligned). |
exportToCsv.enabled | boolean | true | Show/hide the CSV export button. |
exportToCsv.fieldsToExport | string | — | Semicolon-separated list of fields to include in the CSV export. |
Search engine settings
| Setting | Type | Default | Description |
|---|
additionalSearchTerms | string | — | KQL query appended to every search. Use this to globally filter users (e.g. Department:"Engineering"). |
trimDuplicates | boolean | false | Remove duplicate results from search. |
hideDisabledAccounts | boolean | true | Filter out disabled Active Directory accounts. |
pageSize | number | 15 | Number of results to load per page. |
propertiesToFetch | string | — | Semicolon-separated SharePoint managed properties to retrieve from search. |
hideUsersWithoutSpUserProfile | boolean | false | Hide users without a SharePoint User Profile. |
hideUsersWithoutOfficeProfile | boolean | false | Hide users without an Office 365 profile. |
systemAccounts | string | — | Semicolon-separated account names to exclude (e.g. sptimerv4;spocrwl). |
sourceId | string | — | SharePoint Search source ID. Leave empty to use the default People source. |
noOfRequiredLettersToStartSearching | number | 0 | Minimum characters required before search starts. Set to 0 to show all users immediately. |
enableAutoLoadMore | boolean | false | Automatically load more results when scrolling to the bottom. |
autoLoadMoreOffset | string | "300px" | Distance from the bottom to trigger auto-load. |
prefetchMultiplier | number | 1.3 | Multiplier for batch loading. Higher values fetch more results per request. |
Graph API settings
| Setting | Type | Default | Description |
|---|
disableGraphApi | boolean | false | Disable all Graph API calls. Improves loading speed but disables presence, out-of-office, and photo enrichment. |
graphApiVersion | string | "beta" | Graph API version. "v1.0" or "beta". Beta provides more features. |
graphApiUserEndpoint | string | — | Graph API user endpoint URL template with placeholders. |
outlookPhotoUrl | string | — | Photo URL template. Uses {{primaryEmail,true}} placeholder for the user's email. |
Theme settings
| Setting | Type | Default | Description |
|---|
primaryColor | string | "#0078d4" | Main brand color used for UI accents, buttons, and highlights. |
secondaryColor | string | "#F50057" | Secondary accent color. |
linkColor | string | "#555" | Color for hyperlinks in user cards and details. |
fontFamily | string | Segoe UI | Custom font family for the directory UI. |
useSpTheme | boolean | false | Use the SharePoint site theme colors instead of custom colors. |
Celebration settings
| Setting | Type | Default | Description |
|---|
celebrations.enabled | boolean | false | Master toggle for all celebration features. |
celebrations.showBanner | boolean | true | Display a collapsible banner for upcoming celebrations. |
celebrations.bannerMaxItems | number | — | Maximum number of items shown in the banner. |
birthday.enabled | boolean | true | Show birthday badges on user cards. |
birthday.fieldName | string | — | SharePoint managed property containing the user's birthday. |
birthday.rangeDays | number | — | Number of days ahead to highlight upcoming birthdays. |
workAnniversary.enabled | boolean | true | Show work anniversary badges. |
workAnniversary.fieldName | string | — | SharePoint managed property containing the hire date. |
workAnniversary.rangeDays | number | — | Number of days ahead to highlight upcoming anniversaries. |
Feature settings
| Setting | Type | Default | Description |
|---|
presence.enable | boolean | true | Show real-time presence indicators (requires Presence.Read.All permission). |
skillTags.enabled | boolean | false | Display clickable skill tags on user cards. |
skillTags.fieldName | string | — | Profile field containing skills (e.g. SPS-Skills). |
skillTags.searchFieldName | string | — | Search API managed property for skill search. |
skillTags.delimiter | string | "|" | Character separating skills in the field value. |
companyRootAccountName | string | — | Email of the top-level user for the org chart root (e.g. CEO). |
debug.enabled | boolean | false | Show debug information panel for troubleshooting. |
KQL query examples
The additionalSearchTerms field accepts KQL (Keyword Query Language) to globally filter users. Here are common examples:
| Goal | KQL |
|---|
| Show only a specific department | Department:"Engineering" |
| Show multiple departments | Department:"Engineering" OR Department:"Product" |
| Exclude a department | -Department:"Contractors" |
| Show users in a specific office | BaseOfficeLocation:"Sydney" |
| Hide mailbox accounts | hideMailboxes |
| Show users with a specific title | JobTitle:"Manager" |
| Users where a field is not empty | notEmpty(Department) |
| Users where a field is empty | isEmpty(MobilePhone) |
Tip: You can combine multiple KQL expressions with AND / OR. Expressions in additionalSearchTerms are appended to the user's search query.
Advanced settings
Available in the Advanced tab of the configuration panel:
- JSON5 Configuration — edit the raw configuration document directly. Useful for bulk changes or copying settings between environments.
- Custom JavaScript Filter — write a custom filter function that runs after server-side filtering. Receives a user object and returns
true to include or false to exclude. - Custom CSS — inject a global stylesheet to override any visual element.
- Translations — override any localization string for the current language.
Custom JavaScript filter example
function filter(user) {
// Only show users from Engineering with "Manager" in their title
return user.department === "Engineering"
&& user.jobTitle.includes("Manager");
}
