Fields

By default, People Hub will display the following fields in:

Directory View

• Profile Picture
• Name
• Title
• Department
• Office
• Teams
• Work Phone
• Mobile Phone
• Email

Org Browser / Chart

• Profile Picture
• Name
• Title
• Department
• Office
• Email

How to Customize What and How Fields Are Displayed in People Hub?

You can customize the fields displayed in the People Hub web part by leveraging the Custom Overrides section in the advanced settings. This allows you to define which fields appear in different views (directory, organization chart or directory browser), how they are ordered, and what labels are used.

How to Use Custom Overrides?

To use custom overrides, you need to provide a JSON object that defines the fields, their display order, and their labels and etc. This JSON object specifies how each field is mapped from the data source (e.g., Microsoft Graph) and how it should appear in the web part.

Example

If you want to display a user's cellPhone profile property from Microsoft Graph, you would define a custom override like this:

{
  // this key can be any value, but it is recommended to use the field name
  "cellPhone": {
    "userMap": "cellPhone",
    "sourceMap": "mobilePhone",
    "label": "Mobile Phone",
    "directoryDisplayOrder": 7
  }
}

By defining this JSON object in the Custom Overrides section like an example above, the cellPhone field will be displayed as "Mobile Phone" in the directory view at the specified order. You can add more fields in a similar manner to customize the People Hub web part according to your organization's needs.

Let's Break Down the JSON Object

Key	Description
userMap	This key is used internally by the People Hub web part to map different sourceMap values to the same field across multiple data sources, like Microsoft Graph and SharePoint. For example, officeLocation in Graph and Office in SharePoint. The People Hub web part uses predefined userMap values for this purpose, and a list of these predefined values is provided below.
sourceMap	The actual field value that corresponds to the property in your data source (e.g., Microsoft Graph or SharePoint). This is the field that the userMap will point to.
label	Specifies how the field will be displayed in the People Hub web part. It's the label that users will see in the directory, organization chart, or other views.
directoryDisplayOrder	Can be set to either a boolean (false) or a number: If set to false, the column will be removed from the directory view. If set to a number, it determines the order in which the column appears in the directory view, with lower numbers appearing earlier.
orgChartDisplayOrder	Similar to directoryDisplayOrder, this key can also be set to a boolean (false) or a number: If set to false, the column will be removed from the organization browser and chart. If set to a number, it specifies the order in which the column appears in the organization chart, with lower numbers appearing earlier.
facetDisplayOrder	Can be set to a boolean (false) or a number: If set to false, the column will be removed from the filter list in the directory view. If set to a number, it determines the order in which the column appears in the directory filter, with lower numbers appearing earlier.

Data source for Pre-define Fields:

Below is a list of standard/inbuilt attributes. You can also create your own attributes within the User Profile Database and use SharePoint search properties.

note

Sprocket recommends the use of Microsoft Graph as your data source.

Microsoft Graph as the data source

Custom Property Internal Name	userMap	sourceMap	default label
AADObjectID	id	id	ID
displayName	name	displayName	Name
jobTitle	title	jobTitle	Title
userPrincipalName	pictureUrl	userPrincipalName	Photo
OriginalPath	profileUrl	OriginalPath	Profile
department	department	department	Department
officeLocation	office	officeLocation	Office
mail	teams	mail	Teams
workPhone	workPhone	workPhone	Work Phone
mobilePhone	cellPhone	mobilePhone	Mobile Phone
mail	email	mail	Email
userPrincipalName	accountName	userPrincipalName	User Name
manager	manager	manager	Manager
surname	lastName	surname	Last Name
accountEnabled	accountEnabled	accountEnabled	Account Enabled
businessPhones	businessPhones	businessPhones	Business Phones

SharePoint as the data source

Custom Property Internal Name	userMap	sourceMap	default label
AADObjectID	id	Id	ID
Title	name	Title	Name
JobTitle	title	JobTitle	Title
PictureUrl	pictureUrl	PictureUrl	Photo
Department	department	Department	Department
Email	teams	Email	Teams
WorkPhone	workPhone	WorkPhone	Work Phone
MobilePhone	cellPhone	MobilePhone	Mobile Phone
Email	email	Email	Email
Email	accountName	Email	User Name
Manager/Email	manager	Manager/Email	Manager
AdministrativeRole	administrativeRole	AdministrativeRole	Administrative Role
Office	office	Office	Office

Data source for None Pre-defined Fields

If the property already exists in the User Profile Properties, you can use the overrides in the People Hub web part to display these fields.

info

If the fields you want to display are not listed in the above tables, you don't need to set a userMap value in the JSON object. Simply use the sourceMap and label to define the field.

Example

If you want to display a field like "City" which is not predefined by Sprocket People Hub web part, you can define it in the JSON object as follows:

{
  "cellPhone": {
    "userMap": "cellPhone",
    "sourceMap": "mobilePhone",
    "label": "Mobile Phone",
    "directoryDisplayOrder": 7
  },

  "city": {
    // no need to set userMap as it is not predefined
    "sourceMap": "city",
    "label": "City",
    "orgChartDisplayOrder": 1
  }
}

Microsft provides a detailed list of properties available for you to bring through from Microsoft Graph.

Custom Fields & attributes

It's possible to add custom fields or attributes to your user data sources:

• On Premise Active Directory that can be syncronized to Microsoft Entra
• Directly to Microsoft Entra
• SharePoint User Profile Database with Search