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:
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.
ReplyDeleteGreetings form Germany Juergen
Thanks for the useful information!
ReplyDeleteCurrency Market Live
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.
ReplyDeletework from home
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/
ReplyDeleteHow 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