In my last blog post around the SharePoint (PnP) starter kit, I wrote about a search issue within this web part. I also wrote I advanced the initial people directory web part in order to display more information about a user using a Fabric UI React Callout.
When I shared my blog post on Twitter Mikael Svenson got back to me that he would like to see the hover as a PR.
Contribution
So after coming back from vacation I decided to contribute the enhancement I made on the People directory web part. The contribution consist of some other (small) things too, we experienced using the web part at a customer. First, of course the issue with search I initially had and described in my previous blog post. Second the Callout functionality showing more information about a user. Third a little issue with the responsiveness of Index navigation component of the People directory web part (the A-Z index option). When on smaller screen the A-Z index wasn’t nicely put on more then one line. So a small adjustment to the SASS/CSS was enough to make this happen.
I created a PR for this in the GitHub repository and I am awaiting for this PR to be added to the new version of the starter kit.
I hope you feel this as a good addition to the People directory web part. Please let me know what you think about it!
Sharing is caring!
ROBERT SCHOUTEN 
October 19, 2018 at 3:44 pm
These features would be a very welcome addition to the “People Directory”! Very nice work. How difficult would it be for me to adopt your code into my site? I’m mainly interested in displaying a couple extra standard people fields (office being most important).
The other thing I have noticed is that the search results display every user in the directory. Would it be possible to go about (hardcoding) filtering out accounts based on status? Example: blocked accounts where people have left the company.
Thanks for this post, I wish there was more discussion like this on the SharePoint starter kit!
LikeLike
October 23, 2018 at 6:44 am
Hi Matt, glad it is helpfull! To adopt the code into your site, you could download latest of starterkit and install that. My code is added to the starterkit. Otherwise you could start a new SPFx project with web part in it and copy the peopledirectory code from the starterkit project into your project. This way you don’t get all the other additional stuff. You are definitely able to add your own extra fields and filters to the REST search call, like you would do normally. Hope this helps you out. You could always start a discussion in the PnP starter kit GitHub project or raise an issue there and Mark it as question. Definitely people will react on that!
LikeLiked by 1 person
March 22, 2019 at 8:55 pm
Thank you for all your work on this. I’m trying to use the webpart in a site with a dark theme (black background), but the text on the callout is too dark to see. The rest of it looks great! Help?
LikeLike
September 21, 2022 at 8:49 am
What a great stuff! One question, we have some inactive user accounts and service accounts in the AAD, are we able to do a filter to show the active users only?
LikeLike