Employee Directory Webpart using Modern People Search SharePoint Online

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

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

Prerequisite -
1. Install Script Editor webpart. you can download the code from here.

Follow below steps to set up Employee Directory Webpart:

Step 1 - Go to Modern SharePoint Site. Add embed webpart in your page. Type below URL in your

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

Step 2 - Add script editor webpart below the embed webpart.
Step 3 - Add 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>  

Step 4 - Once done, you will see output as follow: