0

I've been searching high and low for a couple of days for a solution, but can't find anything that fits. I've seen a lot of blogs refer to the Srch.U object and then using various methods. I've seen articles that point readers to the default item_person template. I've also seen the REST API mentioned, but am more confused than ever.

My current setup:

I'm using SharePoint Online. I have a very simple list called Team Members on a sub site with a few columns:

  • Title (default column - contains a plain text version of the user's display -name typed in manually)
  • TeamMember (People or Group currently set to Work Email so I can hook up the profile picture from Delve)
  • Job Title (Text field).

I then very simply grab this information and do some stuff to make it all look pretty.

What I would like:

I'd like to be able to use the Person field to pull through a user's email, phone number and any other properties I might want in the future and display them in the template as required.

My current code:

<mso:ManagedPropertyMapping msdt:dt="string">'Title'{Title}:'Title','TeamMember'{TeamMember}:'TeamMember','JobTitle'{JobTitle}:'JobTitle,JobTitleOWSTEXT'</mso:ManagedPropertyMapping>



    <div>
<!--#_

var Title = $getItemValue(ctx, "Title");
var TeamMember = $getItemValue(ctx, "TeamMember");
var JobTitle = $getItemValue(ctx, "JobTitle");

 _#-->
                    <div class="row">
                        <div class="col-xs-4">
                                <a href="https://mydomain-my.sharepoint.com/_layouts/15/me.aspx?p=_#= TeamMember =#_"><img class="img-responsive thumbnail" src="https://mydomain.sharepoint.com/_layouts/15/userphoto.aspx?size=L&accountname=_#= TeamMember =#_" alt="_#= JobTitle =#_" /></a>
                        </div>
                        <div class="col-xs-8">
                            <h2 class="media-heading comrole"><a style="color: #CC0000;" href="https://mydomain-my.sharepoint.com/_layouts/15/me.aspx?p=_#= TeamMember =#_">_#= Title =#_</a></h2>
                            <h2 class="media-heading comUserName" data-membersip="_#= TeamMember =#_">_#= JobTitle =#_</h2>
<p><a href="mailto:_#= TeamMember =#_">_#= TeamMember =#_</a></p>
                        </div>
                    </div>
                </div>

Any help as to what option to set my person field to and how to hook into the user's profile would be very much appreciated.

Thanks a lot,

Tom

  • Did you find any solution for this question. I am also facing the same problem. – Sagar Dec 3 '18 at 11:57
0

We have built a web part similiar to what you are trying to build here: Just place a content editor WP and point it to that html page (save this html code into your assets library or style library)

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HideFromDelve msdt:dt="string">1</mso:HideFromDelve>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
    <div id="Contacts"></div>
    <script>
        $(document).ready(function(){
                'use strict';

                $.ajax({
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Key Contacts')/items?$select=*&$select=Person/Title,Person/JobTitle,Person/EMail,Person/Department,Person/WorkPhone&$expand=Person/ID&$top=5",
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: getUserSuccess,
                    error: getUserError
                });

                function getUserSuccess(data, request) {
                    var html = [];
                    var results = data.d.results;
                    //console.log(data.d);
                    var siteCollectionURL = SP.PageContextInfo.get_siteServerRelativeUrl();
                    var siteURL = _spPageContextInfo.webServerRelativeUrl;
                    var image = siteCollectionURL + "/_layouts/15/userphoto.aspx?size=L&accountname=";
                    var mysite = "https://sitename.sharepoint.com/_layouts/15/me.aspx?p=";
                    var membersPage = siteURL + "/Pages/Members.aspx";
                    var icon = siteCollectionURL + "/SiteAssets/Images/Icons/people.png";

                        for (var i = 0; i < results.length; i++) {
                            html.push("<div class='contact-item'><div class='contact-profile-image'><img src='" + image + results[i].Person.EMail + "'></div>");
                            if(results[i].Person.Title){
                                html.push("<ul class='contact-profile-details'><li class='contact-name'><a href=\"#\" onclick=\"javascript:OpenInNewTab('"+mysite+results[i].Person.EMail+"'); return false;\">" + results[i].Person.Title + "</a></li>");
                            }
                            if(results[i].Person.JobTitle){
                                html.push("<li class='contact-description'>" + results[i].Person.JobTitle + "</li>");
                            }
                            if(results[i].Expertise){
                                html.push("<li class='contact-profile-expertise'>" + "Expertise: " + results[i].Expertise + "</li>");
                            }
                            if(results[i].Person.EMail ){
                                html.push("<li class='contact-email'><a href='" + "mailto:" + results[i].Person.EMail + "'>" + results[i].Person.EMail + "</a></li>");
                            }
                            if(results[i].Person.WorkPhone){
                                html.push("<li class=''>" + "Office Phone: " + results[i].Person.WorkPhone + "</li>");
                            }
                                html.push("</ul>");
                            html.push("<hr>");
                                        }
                                    if(i = results.length){
                                        html.push("<div  class='AllLink'><img src='" + icon + "'><a href='"+membersPage+"'>ALL TEAM MEMBERS</a></div>");                    


                    }
                    $('#Contacts').append(html.join(''));

                }


                function getUserError(error) {
//                  alert("error");
                    html.push("<div>Please refresh the page and try again</div>");
                }
        });

            function OpenInNewTab(url) {
              var win = window.open(url, '_blank');
              win.focus();
            }
    </script>
</body>
</html>
  • Thanks Ahmed. That's not quite what I'm looking for though. I already have a solution in place - I just need to enhance it slightly. :) – ToxicPaint May 11 '16 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.