<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.profilepic img {
width: 75px;
}
.contactname {
font-size: 16px;
}
.profilepic {
padding-left: 0px !important;
}
.fa-comment,
.fa-phone,
.fa-envelope {
font-size: 20px !important;
}
.contacticons {
text-align: center;
}
.contacticons .fa {
padding-left: 10px;
padding-right: 10px;
}
.contacticons a,
.contacticons a:visited,
.contacticons a:hover {
color: #333;
text-decoration: none;
}
.contactdescription {
font-size: 12px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var ConfigurationList = "5533c5bd-2d4b-4577-959f-964209fb1804";
var configurationlistURL = "/_api/Web/Lists(guid'" + ConfigurationList + "')/items?$select=Title,Value&$filter=Title eq 'Contact'";
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + configurationlistURL,
type: "GET",
contentType: "application/json;odata=nometadata",
headers: {
"accept": "application/json;odata=nometadata"
},
success: function(data) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=%27" + data.value[0].Value + "%27",
type: "GET",
contentType: "application/json;odata=nometadata",
headers: {
"accept": "application/json;odata=nometadata"
},
success: function(userprofiledata) {
$(".profilepic").append('<img src="' + userprofiledata.PictureUrl + '"/>');
var html = "<span class='contactname'><b>" + userprofiledata.DisplayName + "</b></span></br>";
html += "<span class='contactdescription'>" + userprofiledata.Title + "</span></br>";
html += "<span class='contactdescription'>" + userprofiledata.Email + "</span></br>";
html += "<span class='contactdescription'>" + userprofiledata.UserProfileProperties[10].Value + "</span></br>";
$(".contactinfo").append(html);
$("#instantim").prop("href", "im:<sip:" + userprofiledata.Email + ">");
$("#phone").prop("href", "tel:" + userprofiledata.UserProfileProperties[10].Value + "");
$("#email").prop("href", "mailto:" + userprofiledata.Email + "");
}
});
},
error: function(error) {
alert(JSON.stringify(error));
}
});
});
</script>
</head>
<body>
<div class="col-lg-12 col-ms-12">
<div class="col-lg-3 col-md-3 profilepic">
</div>
<div class="col-lg-9 col-md-9 contactinfo">
</div>
<div class="col-lg-12 col-md-12 contacticons">
<a id="instantim"><i class="fa fa-comment" aria-hidden="true"></i></a><a id="phone"><i class="fa fa-phone" aria-hidden="true"></i></a><a id="email"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</div>
</div>
</body>
</html>