I've created a UserProfile lookup that displays my desired fields in a table and the PictureURL is showing as text from the query, how can I convert the PictureURL to the actual image in the table? I need it to display all pictures if the query shows more than one and a default image or no image if the link is blank.
Here is a sample of what I have:
I created a new page and added two Script Editors, one for the html and one for the JQuery.
<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" /><script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script><meta content="text/html; charset=windows-1252" http-equiv="content-type"><title></title><style type="text/css">
#search label {
display: inline-block;
width: 10em;
text-align: left;
padding-right: 0.5em;
}
#search input {
display: inline-block;
}
input[type=button] {
margin-left:9%;
}</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">Office: </label><input id="autocompleteTextBox" type="text"> <br><label unselectable="on">Dept / Program: </label><input id="autocompleteTextBox1" type="text"> <br> <label unselectable="on">Job Title: </label><input id="autocompleteTextBox2" type="text"><br><input id="searchButton" type="button" value="Search"><input id="clearButton" type="button" value="Clear"></div><div id="resultsDiv" unselectable="on"></div>Here is the Jquery
<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('');
$("#autocompleteTextBox2").val('');
$("#autocompleteTextBox1").val('');
$("#autocompleteTextBox").val('');
});
//trigger search on enter
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#searchButton').click();
}
});
var spAppWebUrl = "http://site";
$("#searchButton").click(function () {
$("#resultsDiv").empty();
var firstName = $("#fnTextBox").val() + "*";
var lastName = $("#lnTextBox").val() + "*";
var jobTitle2 = $("#autocompleteTextBox2").val();
var jobTitle1 = "\""+(jobTitle2)+"\"";
var jobTitle = ($("#autocompleteTextBox2").val()=="")? "*":(jobTitle1);
var dept2 = $("#autocompleteTextBox1").val();
var dept1 = "\""+(dept2)+"\"";
var dept = ($("#autocompleteTextBox1").val()=="")? "*":(dept1);
var office2 =$("#autocompleteTextBox").val();
var office1 = "\""+(office2)+"\"";
var office = ($("#autocompleteTextBox").val()=="")? "*":(office1);
var queryString = "'"+"and" +"("+ "FirstName:"+(firstName) +","+"LastName:"+(lastName)+","+"JobTitle:"+(jobTitle)+","+"Department:"+(dept)+","+"BaseOfficeLocation:"+(office)+")"+"'";
//the order of the query affects the order of display
var queryUrl = spAppWebUrl + "/_api/search/query?querytext='*'&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'&rowlimit='500'&&sortlist='FirstName:ascending,LastName:ascending'&selectproperties='PictureURL, + FirstName, + LastName, + PreferredName, + JobTitle, + WorkEmail, + Extension, + WorkPhone, + Department, + MobilePhone, + DID, + BaseOfficeLocation'&refinementfilters="+(queryString);
$.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;
$("#resultsDiv").append('<table>');
$("#resultsDiv").append('<thead>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Picture" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Preferred Name" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Job Title" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Work Email" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Extension" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Work Phone" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Department" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Mobile Phone" + '</th>');
$("#resultsDiv").append('<th width=11.1% align="left">' + "Office" + '</th>');
$("#resultsDiv").append('</thead>');
$("#resultsDiv").append('<tbody>');
$.each(results, function () {
$("#resultsDiv").append('<tr>');
$.each(this.Cells.results, function () {
//in the foreach loop
var arr=[ "PictureURL","PreferredName", "JobTitle", "WorkEmail", "Extension","WorkPhone", "Department", "MobilePhone", "BaseOfficeLocation"];
if(arr.indexOf(this.Key)>-1)
$("#resultsDiv").append('<td width=12.5% align="left">' + (null == this.Value ? "" : this.Value) + '</td>');
});
$("#resultsDiv").append('</tr>');
});
$("#resultsDiv").append('</tbody>');
$("#resultsDiv").append('</table>');
convertEmail();
}
function convertEmail() {
$("#resultsDiv")
.find (':contains("@")')
.each ( function (index, element) {
var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
var corrected = $(element).html ();
var remainder = corrected;
while ( emailPattern.test ( remainder ) ) {
var email = emailPattern.exec ( remainder );
remainder = remainder.replace ( email, '' );
corrected = corrected.replace ( email, '<a href="mailto:' + email + '">' + email + '</a>' );
}
$(element).html ( corrected );
} );
}
function onQueryError(error) {
$("#resultsDiv").append(error.statusText)
}
</script>
Note: I did not include the code for the autocomplete text boxes, so just leave them blank if you load this up and it will search all.