We recently received a request from a customer to build a SharePoint phone directory. The goal was to display users from Active Directory groups and security groups. For each person, the customer wanted to show information such as job title, phone number, email address, and more. In this post, we share how we built this SharePoint phone directory web part.
Default SharePoint People web part vs. our phone directory web part
SharePoint Online includes a default People web part that can show user profiles. However, the customer would have to add every user manually. Whenever group membership changes, it would also need to be updated by hand. To keep the effort as low as possible, the customer asked that all users of a configured Active Directory group or security group be displayed automatically.
We implemented the phone directory as an SPFx web part. An admin can configure the groups in the web part properties.
We read user information via the Microsoft Graph API and render it in the web part. When you hover a user, the component shows their details in a popover—the same behavior as the default People web part.
Sorting users via drag & drop
Another requirement was the ability to order users within a group. We implemented this with drag and drop. When the page is in edit mode, drag and drop becomes active, and an admin can arrange users in the desired order.
We store the order per group in a configuration file in SharePoint. On page load, we read the configuration and sort the users accordingly.
{
"groups": [
{
"title": "Test",
"orderedUserIds": [
"flo@openinnovationhub.onmicrosoft.com",
"verena@openinnovationhub.onmicrosoft.com",
"josef@openinnovationhub.onmicrosoft.com",
"cerima@openinnovationhub.onmicrosoft.com"
]
}
]
}