Thursday, 12 December 2019

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=''></script>  
 var myTimerVar = setInterval(designSearch, 20);  
 function designSearch() {  
 $($("iframe")[0]).contents().find('#ms-searchux-serp h2').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");  
 $("[data-automation-id=pageHeader]").find("[role=heading]").css("border-bottom","2px solid #454545");  
 $($('div[class="ControlZone"]')[0]).css('padding', '0');  
 $('div[class^="contentBox_"]').css('padding-bottom', '0');  

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


  1. Hi, Love Thakker :) , can you explain me how i add the Script Editor webpart in my Sharepoint onlione. I do not know which github files i need to install.
    Greetings form Germany Juergen

  2. This isn't just useful for the employee, yet will likewise help the previous business as it will altogether lessen the danger of the employee bringing any lawful cases against you.
    work from home

  3. As we forward, there is a probability of increasingly more site catalogs appearing. There will be expanding propensity to make in specific regions.

  4. How about we utilize a model. Let's assume you are a model plane lover and you need to discover a few sites that take care of your particular interest.

  5. Thus, endeavors these days center around improving the portable client experience of their websites.