Wednesday, June 16, 2010

Custom People Search Page

Within MOSS we are given 2 options for searching for people: The basic search box and the "options" drop-down, if so enabled. I didn't like any of these so I decided to make my own.

Within Search Center I created an Advanced Search page, removed all of it's components and added a Content Editor Web Part (CEWP) to create this:



Here is my code:

 <head>  
<META name="WebPartPageExpansion" content="full">
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:PublishingContactPicture msdt:dt="string">, </mso:PublishingContactPicture></mso:CustomDocumentProperties></xml><![endif]-->
<style type="text/css">
.style1 {
margin-right: 52px;
}
.style2 {
text-align: center;
}
.style3 {
background-color: #CCCCCC;
}
.style4 {
color: #FFFFFF;
}
.style5 {
color: #666666;
}
.style6 {
color: #666666;
background-color: #CCCCCC;
}
</style>
</head>
<script language="javascript" type="text/javascript">
$("#searchButton").click(function() {
// find the values in the form
var firstname = $("input#firstname").val();
var lastname = $("input#lastname").val();
var jobtitle = $("input#jobtitle").val();
var department = $("input#department").val();
var division = $("input#division").val();
var company = $("input#company").val();
//build the url
var url = "/searchcenter/Pages/peopleresults.aspx?k="
//build k variable to ensure users put in SOMETHING
var k = "";
if(firstname != "") k = k + " FirstName:" + firstname;
if(lastname != "") k = k + " LastName:" + lastname;
if(jobtitle != "") k = k + " JobTitle:" + "\"" + jobtitle + "\" ";
if(department != "") k = k + " Department:" + "\"" + department + "\" ";
if(division != "") k = k + " Division:" + "\"" + division + "\" ";
if(company != "") k = k + " Company1:" + "\"" + company + "\" ";
k = encodeURIComponent(k);
if(k != "")
{
url = url + k;
window.location = url;
}
else
{
$("#errorMsg").html("<font color=red><Strong>You must enter at least one criteria to search on</Strong></font>");
}
});
});
</script>
<!--Build the table with the inputs-->
<table cellpadding="3" cellspacing="0" border="0" width="450px" ID="Table3" class="style1">
<tr>
<td nowrap class="style3" colspan="5">
<strong><span class="style5">Find people with...</span><br>
</strong><span class="style4"><em>(You may use partial names to search with)</em></span></td>
</tr>
<tr>
<td nowrap style="width: 100px">
First Name:
</td>
<td width="80">
<input size="20" maxlength="100" id="firstname" name="firstname" type="text">
</td>
<td width ="40">&nbsp;</td>
<td nowrap style="width: 100px">
Last Name:
</td>
<td>
<input size="20" maxlength="100" id="lastname" name="lastname" type="text">
</td>
</tr>
<tr>
<td nowrap colspan="5" class="style6">
<strong>Other criteria to search on...<br>
</strong><span class="style4"><em>(Exact names are required)</em></span></td>
</tr>
<tr>
<td nowrap style="width: 100px">
Job Title:
</td>
<td width="80">
<input size="20" maxlength="100" id="jobtitle" name="jobtitle" type="text"></td>
<td width ="40">&nbsp;</td>
<td nowrap style="width: 100px">
Department:
</td>
<td>
<input size="20" maxlength="100" id="department" name="department" type="text"></td>
</tr>
<tr>
<td nowrap style="width: 100px">
Division:</td>
<td width="80">
<input size="20" maxlength="100" id="division" name="division" type="text">
</td>
<td width ="40">&nbsp;</td>
<td nowrap style="width: 100px">
Company:</td>
<td>
<input size="20" maxlength="100" id="company" name="company" type="text">
</td>
</tr>
<tr>
<td nowrap colspan="5" class="style2">
<input type="button" id="searchButton" value="Search">
</td>
</tr>
<tr>
<td nowrap colspan="5">
<div id="errorMsg" class="style2" />
</td>
</tr>
</table>

No comments:

Post a Comment