Show and search users from your organisation, through Microsoft Graph. Search results show as a nice People Card, and display the Live Persona Card on hover.
The web part can be configured with a static search query, show a search box or accept a search query through a Dynamic Data connection to further filter the displayed results. Dynamic data can by default come from the Microsoft Search search box or the Page Environment. You could also use the Search Box Web Part provided by the PnP Modern Search Web Parts.
As a code sample this clarifies the following concepts:
I wrote a blog post covering more if the inner workings, you can find it at SPFx People Search web part based on Microsoft Graph.
Additionally, this web part has also been demoed on the PnP Community call of September 10th, 2020.
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Either download the latest release OR build it yourself:
npm install
gulp build
gulp bundle --ship
gulp package-solution --ship
Install the package:
m365 login
m365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'User.Read.All'
Grant-PnPTenantServicePrincipalPermission -Scope "User.Read.All" -Resource "Microsoft Graph"
There are many web parts that aim to do the same thing, but they either use SharePoint Search as data store or they render their results in a completely different way. It's impossible to acknowledge all sources of inspiration to this solution, but I do want to give a shout out to two projects (and their contributors) that were foundational to deliver this solution as quickly as I did:
The foundation on which I started building my own solution. This web part can be downloaded from the SharePoint Framework Client-Side Web Part Samples & Tutorial Materials
These web parts were an enormous inspiration on code structure and implementation approach. Their codebase is very impressive, and a lot of the code in this web part is a literal copy paste from them. You can find more on the PnP Modern Search Web Parts page.