Node Vision | People Directory Plus

People Directory Plus uses HTML templates to control the appearance of user cards, the detail panel, the table view, and printed output. Templates support JSX syntax with access to user data, React components, and helper functions.

Edit templates in the configuration panel under Templates. Changes take effect immediately after saving.

Template types

Template	What it controls
User Card	The card layout in card view. Shown for each user in the grid.
User Details	The detail panel that opens when you click a user's card or name.
Table View	The table layout showing all users in rows and columns.
Print	The layout used when printing the directory.

Built-in templates: The app ships with three card templates — Standard, Compact, and Minimal. Select one as a starting point and customize from there.

Available user properties

These properties are available on the user object in all templates:

Core properties

Property	Description
`user.fullName`	Display name (preferred name or first + last)
`user.accountName`	Active Directory account name
`user.jobTitle`	Job title
`user.department`	Department
`user.primaryEmail`	Work email address
`user.workPhone`	Work phone number
`user.mobilePhone`	Mobile phone number
`user.officeLocation`	Office location / building
`user.officeNumber`	Office number / room
`user.aboutMeText`	About Me biography text
`user.personalSite`	Personal site / OneDrive URL
`user.responsibility`	Responsibility / role description

Photo and presence

Property	Description
`user.photoBgStyle`	Background style object for rendering the user's photo. Use as a `style` attribute on a div.
`user.photoUrl`	Direct URL to the user's profile photo.
`user.renderPresenceIndicator()`	Returns a React component showing the user's Teams presence status (Available, Busy, Away, etc.).
`user.presence`	Presence data object with status information.

Relationships

Property	Description
`user.manager`	Manager user object (with its own `fullName`, `accountName`, `jobTitle`, etc.).
`user.directReports`	Array of direct report user objects.
`user.assistant`	Assistant user object (with photo, name, title, department).

Enriched properties

Property	Description
`user.localTime`	Current local time based on the user's timezone.
`user.isNewHire`	Boolean — true if the user was hired in the last 90 days.
`user.outOfOfficeMessage`	Out-of-office message if set in Teams/Outlook.
`user.profileCompleteness`	Percentage (0–100) indicating how complete the user's profile is.
`user.profileData.skills`	Skills data (can be formatted with `formatAsList`).
`user.searchData`	Raw data from the SharePoint Search API response. Access any managed property via `user.searchData.PropertyName`.
`user.graphData`	Raw data from the Microsoft Graph API response.

Helper functions

These utility functions are available in template scope:

Function	Description
`copyToClipboard(text)`	Copies the given text to the clipboard and shows a toast notification.
`formatAsList(value, delimiter)`	Formats a delimited string as an HTML list. Useful for skills, e.g. `formatAsList(user.profileData.skills, '\|')`.
`toggleFavorite(accountName)`	Adds or removes a user from favorites.
`isFavorite(accountName)`	Returns true if the user is in your favorites list.
`getFavorites()`	Returns all favorite user account names.
`getRecentProfiles()`	Returns recently viewed profile account names.

Available components

These React components can be used in templates:

Component	Description
`<Icon />`	Fluent UI icon component.
`<Button />`	Fluent UI button component.
`<Link />`	Hyperlink component.
`<Tooltip />`	Tooltip wrapper for hover text.
`<RecentDocuments />`	Widget showing the user's recently modified documents.
`<OrgView />`	Widget showing the user's manager and direct reports.
`<SkillTags />`	Clickable skill tag badges.
`<CelebrationBadges />`	Birthday and work anniversary badge indicators.
`<CardActions />`	Pre-built action buttons (Teams chat, call, org chart, and overflow menu).

Localization in templates

Use the res object to access translated strings in templates:

Key	English value
`res.viewDetails`	View details
`res.workPhone`	Work phone
`res.mobilePhone`	Mobile phone
`res.location`	Location
`res.office`	Office
`res.aboutMe`	About me
`res.skills`	Skills
`res.responsibility`	Responsibility
`res.personalSite`	Personal site
`res.newHire`	New hire
`res.actionCall`	Call
`res.actionSendEmail`	Send email
`res.teamsChat`	Chat in Teams
`res.teamsCall`	Call in Teams
`res.teamsVideo`	Video call
`res.scheduleMeeting`	Schedule meeting

Example: Adding a custom field to the card

To display a custom SharePoint managed property on user cards, add it to the user card template. For example, to show the user's cost center:

{user.searchData.CostCenter && (
  <div className={styles.fieldRow}>
    <span className={styles.fieldLabel}>Cost Center</span>
    <span>{user.searchData.CostCenter}</span>
  </div>
)}

Important: The managed property must be included in propertiesToFetch in the Search Engine settings for it to be available in templates.

Example: Custom detail panel section

Add a skills section to the user details panel:

{user.profileData?.skills && (
  <div className={styles.section}>
    <div className={styles.sectionLabel}>{res.skills}</div>
    <div>{formatAsList(user.profileData.skills, '|')}</div>
  </div>
)}

Example: Conditional display

Show content only when a property has a value:

{user.mobilePhone && (
  <a href={"tel:" + user.mobilePhone}>
    {user.mobilePhone}
  </a>
)}

{user.isNewHire && (
  <span className={styles.badge}>{res.newHire}</span>
)}

{user.outOfOfficeMessage && (
  <div className={styles.oooMessage}>
    {user.outOfOfficeMessage}
  </div>
)}

Video walkthrough: See our template customization video for a step-by-step guide to editing templates.

Templates Guide