Employee Directory Web Part Using Modern People Search SharePoint Online

This blog shows how to build an employee directory web part using the modern people search in SharePoint Online

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: