I've created a page that searches the user profiles and I need some help to clean it up.
The issues that I would like resolved are:
1. Hide or display a blank where "null" is listed
2. Format the table so the headers are aligned correctly with the results
3. Make the email address a hyperlink
Here is what the form looks like:
As you can see the headers do not line up and null displays for any data that returns no result, and email address is just text.
Here's how to set it up:
Create a new page, add two script editor web parts
add the following code into one of them:
<!DOCTYPE html><html><head><meta content="text/html; charset=windows-1252" http-equiv="content-type"><title></title><style type="text/css">
#search label {
display: inline-block;
width: 5em;
text-align: left;
padding-right: 0.5em;
}
#search input {
display: inline-block;
}
input[type=button] {
margin-left:5%;
}
</style></head><div id="search" unselectable="on"><label unselectable="on">First Name: </label><input id="fnTextBox" type="text"><br unselectable="on"><label unselectable="on">Last Name: </label><input id="lnTextBox" type="text"><br unselectable="on"> <label unselectable="on">Job Title: </label><input id="jtTextBox" type="text"><br unselectable="on"><label unselectable="on">Department: </label><input id="deptTextBox" type="text"><br unselectable="on"> <label unselectable="on">Office: </label><input id="officeTextBox" type="text"><br unselectable="on"> <br> <input id="searchButton" type="button" value="Search"><input id="clearButton" type="button" value="Clear"></div><div id="resultsDiv" unselectable="on"></div>In the other script editor add the following:
(change to your javascript "site" location/path needed for your js library)
<script src="http://site/SiteAssets/jquery.min.js"></script> <script type="text/javascript">
$(document).ready(function () {
$("#clearButton").click(function () {
$("#resultsDiv").empty();
$("#fnTextBox").val('');
$("#lnTextBox").val('');
$("#jtTextBox").val('');
$("#deptTextBox").val('');
$("#officeTextBox").val('');
});
var spAppWebUrl = "http://site";
$("#searchButton").click(function () {
$("#resultsDiv").empty();
//var queryUrl = spAppWebUrl + "/_api/search/query?querytext='" + $("#searchTextBox").val() + "'";
var firstName = $("#fnTextBox").val() + "*";
//alert(firstName);
var lastName = $("#lnTextBox").val() + "*";
//alert(lastName);
var jobTitle = $("#jtTextBox").val() + "*";
var dept = $("#deptTextBox").val() + "*";
var office = $("#officeTextBox").val() + "*";
//alert(office);
var queryString = "'"+"and" +"("+ "FirstName:"+(firstName) +","+"LastName:"+(lastName)+","+"JobTitle:"+(jobTitle)+","+"Department:"+(dept)+","+"Office:"+(office)+")"+"'";
//the order of the query affects the order of display
//alert(queryString);
var queryUrl = spAppWebUrl + "/_api/search/query?querytext='*'&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'&rowlimit='500'&selectproperties='FirstName, + LastName, + PreferredName, + JobTitle, + WorkEmail, + Extension, + WorkPhone, + Department, + MobilePhone, + DID, + Office'&refinementfilters="+(queryString);
//alert(queryUrl);
$.ajax({ url: queryUrl, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: onQuerySuccess, error: onQueryError });
});
});
function onQuerySuccess(data) {
var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
if ($('results').val() != '')
{
//$('results').val() = '...';
alert("null");
}
$("#resultsDiv").append('<table>');
$("#resultsDiv").append('<th width=12.5%>' + "Preferred Name" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Job Title" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Work Email" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Extension" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Work Phone" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Department" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Mobile Phone" + '</th>');
$("#resultsDiv").append('<th width=12.5%>' + "Office" + '</th>');
$.each(results, function () {
$("#resultsDiv").append('<tr>');
$.each(this.Cells.results, function () {
//in the foreach loop
var arr=["PreferredName", "JobTitle", "WorkEmail", "Extension","WorkPhone", "Department", "MobilePhone", "Office"];
if(arr.indexOf(this.Key)>-1)
$("#resultsDiv").append('<td width=12.5%>' + this.Value + '</td>');
// $("#resultsDiv").append('<td>' + this.Value + '</td>');
});
$("#resultsDiv").append('</tr>');
});
$("#resultsDiv").append('</table>');
}
function onQueryError(error) {
$("#resultsDiv").append(error.statusText)
}
</script>I think this will be useful to anyone wanting to create a staff/employee directory that is searchable so any help I get cleaning this up, I'll be sure to post the completed code.