SharePoint Experts Blog

How to display Lync presence in SharePoint Org Chart

We received many requests about displaying presence indicators in Org Chart and decided to prepare some snippet to help you with this.

I prepared snippet for tooltip template which allows to display presence inside tooltip. It looks like this for my account:

LyncPresence

 

You can customize HTML templates for boxes, tooltips and search results. See the documentation for more information.

You can use this code snippet even in box template. I will describe how it works but you can use it as is without modificaitons, just copy paste to your HTML template.

<span class="ms-imnSpan">
 <a href="#" class="ms-imnlink ms-spimn-presenceLink">
  <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
   <img name="imnmark" onload="IMNRC('{{SPS-SipAddress}}')" title="" showofflinepawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png" alt="Offline" sip="{{SPS-SipAddress}}" id="imn_{{UserProfile_GUID}},type=sip">
  </span>
 </a>
</span>
<span class="ms-noWrap ms-imnSpan">
 <a href="#" class="ms-imnlink" tabindex="-1">
  <img name="imnmark" title="" onload="IMNRC('{{SPS-SipAddress}}')" showofflinepawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png" alt="No presence information" sip="{{SPS-SipAddress}}" id="imn_{{UserProfile_GUID}}_2,type=sip">
 </a>
 <a target="_blank" class="ms-subtleLink" href="{{PersonalURL}}">{{PreferredName}}</a>
</span>

As you see it takes SPS-SipAddress field from user profile. It is inserted by token {{SPS-SipAddress}} into template. It is a Lync ID of employee required for displaying presence. So, this field has to be filled in profile or synced with Active Directory (this is out of the box SharePoint functionality).

If you didn’t modify tooltip template previously you can just copy and paste this HTML to template editor.

<div class="pl-item-photo">
 {{#if PictureURL}}
  {{#if PersonalURL}}
   <a href="{{PersonalURL}}" target="_blank">{{safeImage PictureURL}}</a>
  {{else}}
   {{safeImage PictureURL}}
  {{/if}}
 {{/if}}
</div>
<div class="pl-item-fields">
 <div class="field-container header-field">
 {{#if SPS-SipAddress}}
  <span class="ms-imnSpan">
   <a href="#" class="ms-imnlink ms-spimn-presenceLink">
    <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
     <img name="imnmark" onload="IMNRC('{{SPS-SipAddress}}')" title="" showofflinepawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png" alt="Offline" sip="{{SPS-SipAddress}}" id="imn_{{UserProfile_GUID}},type=sip">
    </span>
   </a>
  </span>
  <span class="ms-noWrap ms-imnSpan">
   <a href="#" class="ms-imnlink" tabindex="-1">
    <img name="imnmark" title="" onload="IMNRC('{{SPS-SipAddress}}')" showofflinepawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png" alt="No presence information" sip="{{SPS-SipAddress}}" id="imn_{{UserProfile_GUID}}_2,type=sip">
   </a>
  <a target="_blank" class="ms-subtleLink" href="{{PersonalURL}}">
   {{PreferredName}}
  </a>
 </span>
 {{else}}
  <a target="_blank" href="{{PersonalURL}}">{{PreferredName}}</a>
 {{/if}}
 </div>
 <div class="field-container ">
  {{Title}}
 </div>
 <div class="field-container ">
  {{Department}}
 </div>
 <div class="field-container ">
  <a href="mailto:{{WorkEmail}}">{{WorkEmail}}</a>
 </div>
 <div class="field-container ">
  {{WorkPhone}}
 </div>
 <div class="field-container ">
  {{Office}}
 </div>
 {{#if PersonalURL}}
  <div class="personal-page-link">
   <a href="{{PersonalURL}}" title="Navigate to personal page" target="_blank">View profile</a>
  </div>
 {{/if}}
</div>

You can find the snippet which I provided earlier inside this template. This snippet renders presence indicator and name of employee with link to user profile.

If you have any questions, feel free to comment.

Posted in: Org Chart

  • David Piscopo
    Hi, Trying to get this to work. I have copied the snippet above and it is almost there. i.e. Presence is available but it looks like there is a styling issue
    • Adam
      I am having the same issue. Have you found a solution?
      • David Piscopo
        Hi, I ended up hiding one of the hrefs (style=”display:none”) in the tooltip. I am not sure if it is correct but it does fix the problem: {{PreferredName}}