Sunday, January 22, 2023

Using the PnP Modern Search Results web part as a Department Web Part



Update: If you prefer the video version you can find it here: Using PnP Modern Search As Department Web Part - YouTube
Occasionally we get the request to display the members of a department on a modern SharePoint web page. Using the People Web part is out of the question as this web part only shows a static list of people, and we want the listing to show the members of the Department at any given time.
The Organization Chart is an option if your departments always have one manager, and each manager only has one department. 




However you might be looking for something a little more flexible than the Org Chart, and the PnP Modern Search solution can provide just that 😀

Before you can start using PnP Modern Search the solution must be installed in the App Catalog as per the official guide to PnP Modern Search

Even before we start working with the web part we need some information, the ID number for the department in question.
You find the list of departments in the Term Store. Find the department in the People group and select the Usage Settings in the right hand section, and there you will find the unique ID for that department. 



Back on the modern page again.

Once the App is installed in your site the steps are as follows:
1) Edit the page
2) Insert the Web Part (PnP Search Results)



3) Select Configure or click the Edit Web part Icon
4) Select SharePoint as the Data Source
5) Enter owstaxIdSPShDepartment:"THE_ID_OF_THE_DEPARTMENT" in the Query Template Field, in this case it will be owstaxIdSPShDepartment:"2ce09d31-c9d3-4265-abd7-5ac99fc3a060"
6) Scroll down and select LocalPeopleResults in the Result Source Id/Scop|Name field




7) Now you should see some results in the web part, however we are currently using a wrong layout/Display. Scroll further down and change to Page 2.
8) Select the People Layout 
9) Scroll down and enable the field "Show persona card on hover"
10) Change the Component size to a value that fits your design.



11) Rename the web part to the title of the department.

And here you go, an always updated department web part free of change.