Employee Directory Web Part Using Modern People Search SharePoint Online

Love Thakker

7 Comments

Join the conversation! Your thoughts help the community grow.

Dan O3y ago
This looks like it should be a relatively straightforward solution but I can't find anything called a 'script editor' webpart from step 2 'Add the script editor webpart below the embed webpart'.
Shahad3y ago
Hi, Thank for the solution but the search bax dose not appear after adding the script editor. any suggestion to fix this issue?
Love Thakker5y ago
Hi. Sorry for late response but can you check in console if you are getting any error?
It Assistant5y ago
Hi, this is exactly what I have been trying to create but I have followed your steps and even after adding the script with the script editor web part, I still do not have a search box and it shows the various titles of 'All' 'Files' 'Sites' 'People' 'News'. It also still has the 'Exit Search' option. If you could provide any help that would be amazing!
Love Thakker6y ago
Hello IT Support. Thank you for your comment. you can download the webpart from - https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor.
IT Support6y ago
This is EXACTLY what I was looking for! Thank you! I am trying to implement and I am unable to locate the Webpart mentioned,can you reshare the link?
- Terrell Williams4y ago
  I also can't find the files.. Please repost.. thanks!

Introduction

One of our clients wanted to show an Employee Directory. Our first suggestion was to build a custom SPFx, which will fetch data from Azure AD or Delve and add it on the page. However, the client wanted to use the OOTB feature and asked us if we can get something out of the people webpart.

From there, we invented the Employee Directory using Modern Search. Follow the below steps in case you want to implement it on your end.

Prerequisite

Install the Script Editor webpart. You can download the code from here.

Follow the below steps to set up the Employee Directory Webpart,

Step 1

Go to Modern SharePoint Site. Add embed webpart in your page. Type the below URL:

<iframe id="peopleSearchFrame" src="Your Office 365 Site URL/_layouts/15/search.aspx/people" width="3000" height="6000" scrolling="no"></iframe>

Step 2

Add the script editor webpart below the embed webpart.

Step 3

Add the below custom css / js to hide unwanted things.

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script>
var myTimerVar = setInterval(designSearch, 20);
function designSearch() {
$($("iframe")[0]).contents().find('#ms-searchux-serp h2').hide();
$($($("iframe")[0]).contents().find(".ms-Button-flexContainer")).hide();
$($($("iframe")[0]).contents().find(".SPSearchUX-module__searchFilters___s1xp2")).hide();
//CSS for search box and result
$($($("iframe")[0]).contents().find("#ms-searchux-serp div")[0]).css("padding","0 0 0 0px");
$($($("iframe")[0]).contents().find("#ms-searchux-serp div")[0]).css("border","0");
$($($("iframe")[0]).contents().find("#ms-searchux-serp div")[0]).css("padding","8px");
$($($("iframe")[0]).contents().find(".ms-searchux").parent('div')).css("padding","0 0 0 0px");
$($($("iframe")[0]).contents().find(".ms-searchux").parent('div')).css("border","0");
$($($("iframe")[0]).contents().find(".ms-searchux").parent('div')).css("padding","8px");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("border-bottom","2px solid #454545");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("color","#454545");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("font-weight","700");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("font-size","20px");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("padding-bottom","11px");
$("[data-automation-id=pageHeader]").find("[role=heading]").css("text-transform","capitalize");
$($($("iframe")[0]).contents().find(".SPSearchUX-module__searchFilters___12Rv7")).hide();
$($($("iframe")[0]).contents().find("div[class^='backLinkWrapper_']")).hide();
$($('div[class="ControlZone"]')[0]).css('padding', '0');
$('div[class^="contentBox_"]').css('padding-bottom', '0');
}
</script>

Once done, you will see output as follows: