This is a follow up to the webcast I presented for SharePoint Saturday in DC May 2^nd 2009. The goal is to enable presence information on usernames within a SharePoint site. This works well when you don't have Office Communication Server to leverage, and while it is not a replacement, it can be useful still. You can launch chat sessions or call the user from the presence dialog from within SharePoint. You'll also be able to see the users latest status from twitter, and you could go a step further by enabling a reply to that user. While this script is in essence a prototype, its not far off from being very useful to those who wanted to take it to the next level. So without further ado, here we go.

Step 1: jQuery Your SharePoint Site

The first step is to get jQuery and put it somewhere on your site. Visit http://www.jquery.com to find the latest version of the script and download a copy to your computer.

Once you have it downloaded drag it to the images directory, or a directory of your choosing on your SharePoint site. You can see here that I've uploaded both the development versions and the minified versions for different purposes.

Step 2: Create Your Presence List

Create a custom list and add the following fields:

 

You'll end up with a list that looks similar to this: Don't forget to populate it with our own data.

Step 3: Prepare Your Script

Copy the following script into notepad or a text editor:

<script src="http://www.sharepointevolved.com/images/jquery-1.3.2.js" type="text/javascript"></script>

 

    <script type="text/javascript">

      

 

    /*

    * Configuration settings for the Twitter Presence List

    */

    var twitterNameField     = "Title";             //Name of the field used for the twitter name

    var twitterNameFieldInt = "Title";             //Internal Name should be the same, but just in case its different or has spaces

    var adNameField          = "ADUser";         //Name of the Field with the Active Directory User

    var adNameFieldInt          = "ADUser";         //Internal Name should be the same, but just in case its different or has spaces

    var skypeNameField        = "Skype";            //Name of the field used for the Skype Name

    var skypeNameFieldInt    = "Skype";            //Internal Name of the field used for the Skype Name

    var phoneNameField        = "Phone";            //Name of the field used for the Skype Name

    var phoneNameFieldInt    = "Phone";            //Internal Name of the field used for the Skype Name

    

    var listName         = "{B5B2B296-9B79-4950-862E-5163DFDA3BC5}";        //Name/Guid of the list you're storing the values in

    /*    

    *    Url, Relative to the SharePoint site with the list.

    *    This link should not be terminated with a "/" forward slash

    *     Since "/_vti_bin/lists.asmx" will be appended;

    *    IE: "http://www.sharepointevolved.com" would be ""

    */

    var urlToSite         = "/presence";    

    

    /*

    * Script by Isaac Stith http://www.sharepointevolved.com

    * Modify below this line at your own risk

    */

    var lastLookupId = "";

    var lastLookupName = "";

    var curTweeter = null;

    var curElement = null;

    var curSkype = null;

    var curPhone = null;

    var foundTName = false;

    var readyToClose = false;

      

$(document).ready(function() {

 

 

//Lets put some javascript here!

        $("a[href*='userdisp']").hover(

function () {

setNotReadyToClose();

var loc = $(this).attr("href");

var name = $(this).html();

        var id = loc.substring(loc.indexOf("=")+1,loc.length);

        curElement = $(this);

        getTwitterName(id,name);

},

function () {

    setReadyToClose();

}

);

 

});

function getTwitterName(id,name)

{

if(lastLookupId != id)

{

removeOldBox();

    var soapEnv =

"<?xml version=\"1.0\" encoding=\"utf-8\"?> \

<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \

         <soap:Body> \

         <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>\

         <listName>"+listName+"</listName> \

         <query><Query><Where><Eq><FieldRef Name='"+adNameField+"' /><Value Type='User'>"+name+"</Value></Eq></Where></Query></query> \

         <viewFields><ViewFields><FieldRef Name='"+adNameField+"' /><FieldRef Name='"+twitterNameField+"' /><FieldRef Name='"+skypeNameField+"' /><FieldRef Name='"+phoneNameField+"' /></ViewFields></viewFields> \

         <rowLimit>0</rowLimit> \

         <queryOptions><QueryOptions/></queryOptions> \

         </GetListItems>\

         </soap:Body>\

        </soap:Envelope>";

        lastLookupId = id;

        lastLookupName = name;

        foundTName = false;

     $.ajax({

     url: urlToSite + "/_vti_bin/lists.asmx",

     type: "POST",

     dataType: "xml",

     data: soapEnv,

     complete: getTwitterNameCallback,

     contentType: "text/xml; charset=\"utf-8\""

     });        

     }

     else

     {

         //Same information being retreived, check and see if the div is closed

         if($("div#tweeter").html() ==null)

         {

             popupFromJson();

         }

     }

}

function removeOldBox()

{

    if($("div#tweeter").html() !=null)

    {

        $("div#tweeter").remove();

    }

}

function getTwitterNameCallback(xData, status)

{

     $(xData.responseXML).find("listitems").children().children().each(function(){

             if(foundTName ==false){

                  var title = ($(this).attr("ows_"+twitterNameFieldInt));

                  var usr = ($(this).attr("ows_"+adNameFieldInt));

                  curSkype = ($(this).attr("ows_"+skypeNameFieldInt));

                  curPhone= ($(this).attr("ows_"+phoneNameFieldInt));

                  var curid = usr.substring(0,usr.indexOf(";"));

                  if(lastLookupId == curid)

                  {

                      getTwitterStatus(title);

                      foundTName = true;

                      return;

                  }

             }

     });

      

}

function getTwitterStatus(username)

{

        $.getJSON("http://twitter.com/status/user_timeline/"+username+".json?count=1&callback=?",getTwitterStatusCallback);

}

function getTwitterStatusCallback(json)

{

        curTweeter = json;

        popupFromJson();

}

function popupFromJson()

{

        //Need to get all the parameters we want to display and put them ina nice little tooltip

        var outdiv = "<div id='tweeter'><img src="+$($(curTweeter).attr("user")).attr("profile_image_url")+" height='25'/>"+$(curTweeter).attr("text")+"<br/><a href='skype:"+curSkype+"'><img src='http://mystatus.skype.com/smallicon/"+curSkype+"' style='border:0px;'/></a> <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?chat'>Chat</a> | <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?add'>Add</a> | <a href='skype:"+curPhone+"?call'>Call Phone</a></div>";

        $(curElement).after(outdiv);

        var pos = $(curElement).position();

$('div#tweeter').css("top", pos.top+10);

$('div#tweeter').css("left", pos.left+25);

}

function setReadyToClose()

{

readyToClose = true;

window.setTimeout(finallyClose,2000);

}

function setNotReadyToClose()

{

     readyToClose = false;

}

function finallyClose()

{

     if(readyToClose==true){

          $("div#tweeter").remove();

     }

}

        function EnsureIMNControl()

        {

        

        }

        

        

    </script>

<style type="text/css">

    div#tweeter{

        background-color:#FFFFCC;

        border:3px black groove;

        margin: 5px;

        padding-right: 5px;

        padding-top: 5px;

        padding-left: 5px;

        padding-bottom: 5px;

        position:absolute;

        }

    div#tweeter img{

        

        vertical-align:text-top;

        border: 1px black solid;

        padding: 2px;

        margin-right:5px;

        float:left;

    }

    div#tweeter a {

    text-decoration:underline;

    color:black;

    vertical-align:bottom;

}

</style>

 

The only thing you have to change if you've followed the instructions are the listName and the url to site properties in the configuration section. You Can find the listId by going to the list settings of the Presence list and looking at the end of the URL.

You'll need to change the urlToSite property to the relative url to the site you're currently working on. You may also need to change the location of the jQuery file depending on where you've placed it on the site.

Step 4: Master your Master Page

Now that your script is ready, it is time to put it in your Master Page. Open up your master page in SharePoint designer and find the closing body tag. Should look like this:

You're going to paste the script you've modified for your use right above the closing body tag, then go ahead and save the master page.

If you've gotten this far should have successfully modified your site to see the presence information when you hover over a username. As an added bonus, I've removed the function that calls Microsoft's presence information in the EnsureIMNControl().

Step 5: Show of your brand new presence to your coworkers!

Or email meInsertATHereisaacstith.com