Note: The External RSS Feed UI Template is just a template, no colors or fonts have been applied. We all know that SharePoint doesn’t allow Cross Domain data access due to the missing headers. To solve this you need to accept the information as JSONP and not JSON Or XML. But there are certain sites which Read more about External RSS Feed UI Template[…]
Note: Contact UI Template is just a template, fonts and colors have not been implemented for beautification. For this I Created a Configuration List wherein i store the LoginName of the User. Then I query the User Profile Service and get the users information. UI: Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!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> |
Note: Birthday UI Template is just a template, fonts and colors have not been implemented for beautification. The ideal way to get the Birthdays is using search, by querying User Profile Services but due to limitation in my environment I used a Calendar. Following Columns need to have data: Title Email JobTitle EventDate AttachmentFiles (Attachments) Read more about Birthday UI Template[…]
Note: Upcoming Events UI Template is just a template, fonts and colors have not been implemented for beautification. I am assuming you can do that 😀 To implement this, first you need to have a Calendar List and information must be present in the below columns Title Description EventDate Template UI : Read more about Upcoming Events UI Template[…]