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='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:



6 comments:

  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

    ReplyDelete
  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

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

    ReplyDelete
  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. https://onohosting.com/

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

    ReplyDelete
  6. Additionally, you can to|you presumably can} play via their whole betting library for actual cash if you resolve to do so after making an attempt out the video games in demo mode. The PowerUP Roulette stay casino sport show is a extremely anticipated tackle the traditional Roulette sport, with a lot as} 5 PowerUP bonus rounds offering extra chances to win. Since you’re not making actual cash bets, you won’t get actual a reimbursement in return if you land a successful spin. OJO’s repertoire of freebie slot machines consists of the top-rated free thecasinosource.com slots of 2020 like Jackpot Jester 50,000, Esqueleto Explosivo and Immortal Romance. Therefore, most of those free slot video games can be found to play on a cellular system. All of those free slot machines are from high quality software program providers like Betsoft, Dragon Gaming, Nucleus Gaming, and Magma Gaming.

    ReplyDelete