Add E-mail to People Search Display Template

2 Comments

This is a follow up to my previous post on adding phone extension to people results page (PeopleResults.aspx).

This post provides steps on how I added e-mail with action (mailto) to people search.

WorkEmail is one of the default user profile properties already mapped in SharePoint both in User Profile Property and in Search Schema. This makes my job a bit easier because all I have to do is modify my Display Template to include this value.  Some of the steps listed here are the same as my previous post.  I hope this makes things easier than flipping back and forth between the two.

  1. If you already have a custom display template for Item_Person, skip to step 6.  If this is the first time you need to edit the display template for people results, continue to the next step.
  2. From Search Center, select the following:
    • Site Settings
    • Master pages and page layouts
    • Display templates
    • Search
  3. Download ‘Item_Person.html’, save it on your local drive with a different name (ex: My_Item_Person.html)
  4. Modify Title. This will be used later when I modify the People Search Core Results Web Part.
  5. <title>My People Item</title>
  6. In <div id=”ContactInfo”>tag, add
<!--#_ 
                                        if(has_email == true) {
_#-->
                                            <div id="WorkEmailField">
<!--#_ 
                                                var encodedWorkEmail = $htmlEncode(ctx.CurrentItem.WorkEmail);
                                                var displayWorkEmail = Srch.U.getSingleHHXMLNodeValue(hhProps, "workemail");
                                                if ($isEmptyString(displayWorkEmail)) { displayWorkEmail = encodedWorkEmail }
_#--> 
                                                <div id="WorkEmailValue" class="ms-srch-ellipsis" title="_#= encodedWorkEmail =#_"><a href="mailto:_#= encodedWorkEmail =#_"> _#= displayWorkEmail =#_ </a></div>
                                            </div>
<!--#_ 
                                        }
_#-->

7.  Save My_Item_Person.html, upload it to the Display Template/Search gallery, and publish it

8.  From Search Center, type in a query term (ex: Executive)

9.  From ‘Site Settings’, select ‘Edit Page’

10.  Edit ‘People Search Core Results’ Web Part

11.  Expand ‘Display Templates’, select ‘Use a single template to display items’, select My People Item, then select ‘OK’

12.  Check In and Publish the People Results page (PeopleResults.aspx)

Your results page shoud look similar to the following.  Note that the OOTB results page only displays Name, Title, and Department

PeopleResults

Again, these steps may not be the greatest, but they worked for me.

Advertisements

Add Phone Extension to Display Template for People Search

Leave a comment

One of the clients I worked with store users’ phone extension in a string (Multi value) field in their Active Directory, though this value could be stored in a regular string field. Regardless of where the value is stored, my objective was to display this value in people search (PeopleResults.aspx). Steps I used below may not be the greatest, but they worked for me.

  1. Map a SharePoint user profile property to this AD attribute. I used ‘PhoneExtension’ for this one.
  2. Start Full Profile Synchronization
  3. Start Full or Incremental Crawl in Search
  4. From Search Service Application, select ‘Search Schema’
  5. Select ‘Crawled Properties’ and search for ‘PhoneExtension’. I did this step to verify that the property I created was crawled, and to allow me to move to the next step. You should see ‘People:PhoneExtension’ for your search.
  6. Select ‘Managed Properties’, then select ‘New Managed Property’. I created ‘PhoneExtension’ as a ‘Text’ type, and selected the following:
    • Queryable
    • Retrievable
    • Safe
  7. Select ‘Add a Mapping’, type ‘PhoneExtension’ in the ‘Crawled property selection’ window
  8. Select ‘People:PhoneExtension’, then click ‘OK’ to close the ‘Crawled propety selection’ window
  9. Click ‘OK’ again to close the ‘New Managed Property’ window
  10. Start Full Crawl, wait for this to complete
  11. From Search Center, select the following:
    • Site Settings
    • Master pages and page layouts
    • Display Templates
    • Search
  12. Download ‘Item_Person.html’, save it on your local drive with a different name (ex: <Client>_Item_Person.html)
  13. Modify title. This will be used later when I modify the People Search Core Results Web Part.
<title>Client People Item</title>

14.  Add ‘PhoneExtension’:’PhoneExtension’ to the end of the mso:ManagedPropertyMapping line (about line 13 or so).  Since ‘WorkPhone’ is already mapped in SharePoint as one of the default user property mappings, I added it here as well.

ManagedPropertyMapping

<mso:ManagedPropertyMapping msdt:dt="string">'AboutMe':'AboutMe','AccountName':'AccountName','BaseOfficeLocation':'BaseOfficeLocation','Department':'Department','HitHighlightedProperties':'HitHighlightedProperties','Interests':'Interests','JobTitle':'JobTitle','LastModifiedTime':'LastModifiedTime','Memberships':'Memberships','PastProjects':'PastProjects','Path':'Path','PictureURL':'PictureURL','PreferredName':'PreferredName','Responsibilities':'Responsibilities','Schools':'Schools','ServiceApplicationID':'ServiceApplicationID','SipAddress':'SipAddress','Skills':'Skills','UserProfile_GUID':'UserProfile_GUID','WorkEmail':'WorkEmail','WorkId':'WorkId','YomiDisplayName':'YomiDisplayName','WorkPhone':'WorkPhone','PhoneExtension':'PhoneExtension'</mso:ManagedPropertyMapping>

15.  In <body><div id=”Item_Person”> tag, add var has_wphone = !$isEmptyString(ctx.CurrentItem.WorkPhone);
var has_ext = !$isEmptyString(ctx.CurrentItem.PhoneExtension);

Item_PersonDiv

16.  In <div id=”ContactInfo”> tag, add

<!--#_ if(has_wphone == true) { _#-->



<div id="WorkPhone">
<!--#_ var encodedwphone = $htmlEncode(ctx.CurrentItem.WorkPhone); var displaywphone = Srch.U.getSingleHHXMLNodeValue(hhProps, "WorkPhone"); if ($isEmptyString(displaywphone)) { displaywphone = encodedwphone } _#-->



<div id="WorkPhoneValue" class="ms-srch-ellipsis" title="_#= encodedwphone =#_"> _#= displaywphone =#_ </div>



</div>



<!--#_ } _#-->
<!--#_ if(has_ext == true) { _#-->



<div id="PhoneExtension">
<!--#_ var encodedext = $htmlEncode(ctx.CurrentItem.PhoneExtension); var displayext = Srch.U.getSingleHHXMLNodeValue(hhProps, "PhoneExtension"); if ($isEmptyString(displayext)) { displayext = encodedext } _#-->



<div id="PhoneExtensionValue" class="ms-srch-ellipsis" title="_#= encodedext =#_"> _#= displayext =#_ </div>



</div>



<!--#_ } _#-->

ContactInfoDiv

17.  Save Client_Item_Person.html, upload it to the Display Templates/Search gallery, and publish it

18.  From Search Center, type in a query term (ex: Executive)

19.  From ‘Site Settings’, select ‘Edit Page’

20.  Edit ‘People Search Core Results’ Web Part

21.  Expand ‘Display Templates’, select ‘Use a single template to display items’, select Client_People_Item, then select ‘OK’

22.  Check In and Publish the People Results page (PeopleResults.aspx)

Your results page should look similar to the following.  Note that the OOTB only displays Name, Title, and Department.

PeopleResults

On my next post, I’ll cover how to add the e-mail to People Results page.

Happy search editing.